9

我运行运行 Hugo 的网站https://www.igluonline.com，我最近安装了一个遵循 Google 的sw-precache的服务工作者。

这是配置文件：

module.exports = {
  staticFileGlobs: [
    'dist/css/**.css',
    'dist/**/*.html',
    'dist/images/**.*',
    'dist/js/**.js'
  ],
  skipWaiting: true,
  stripPrefix: 'dist',
  runtimeCaching: [{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]
};

注意事项：

尽管有时自动生成的代码会出现一些错误，但 service worker 可以正常工作并在 Web 和移动设备上提供离线体验。

它也已cache-control设置为max-age=0，当我推送新代码时，它会进行更新。

问题：

我设置runtimeCaching handler为networkFirst并根据谷歌的sw-toolbox API（在sw-precache使用时出现runtimeCaching）它应该最好从 http 调用中获取页面，如果没有连接它应该回退到缓存。

但是当我刷新我的代码并打开一个新窗口进行测试时（请注意，我确实在更新之前关闭了运行网站的所有选项卡和窗口），它将显示缓存页面。它自然会下载新的服务工作者并在第二次重新加载时更新页面，但我不希望我的访问者每次都刷新我的主页以获取新内容。

我尝试将runtimeCaching代码更改为以下代码，希望至少让我的主页直接从网络加载，但我没有运气：

runtimeCaching: [{
    urlPattern: /\//,
    handler: 'networkOnly'
  },{
    urlPattern: /\/*/,
    handler: 'networkFirst'
  }]

现在我不确定所需的 PWA 体验是否是这样的——这意味着用户必须重新加载两次或至少访问两个页面才能看到刷新的代码——或者我是否犯了一些错误。我真的很感激考虑。

4

1 回答 1

5

生成 service-worker 时，获得所需策略的最简单方法是使用sw-precachewith sw-toolbox。

使用 生成新的 service-worker 时sw-precache，您还可以sw-toolbox通过传递正确的配置选项来获取生成文件末尾的代码。

根据sw-precache 文档：

该sw-precache模块能够将sw-toolbox代码和配置与自己的配置一起包含在内。使用（见下文runtimeCaching）中的配置选项是一种快捷方式，可以通过导入Service Worker 并编写自己的路由规则来完成您可以手动执行的操作。sw-precachesw-toolbox

这是文档runtimeCaching中显示的选项的示例：sw-precache 

runtimeCaching: [{
  urlPattern: /^https:\/\/example\.com\/api/,
  handler: 'networkFirst'
}, {
  urlPattern: /\/articles\//,
  handler: 'fastest',
  options: {
    cache: {
      maxEntries: 10,
      name: 'articles-cache'
    }
  }
}]

您可以将此选项与您选择的配置一起使用。

例如，您可以使用文档中所述的配置文件：

支持使用 --config 传递复杂的配置。文件中的任何选项都可以通过命令行标志覆盖。我们强烈建议通过 module.exports 将定义配置的外部 JavaScript 文件传递​​给它。例如，假设有一个 path/to/sw-precache-config.js 文件，其中包含：

module.exports = {
  staticFileGlobs: [
    'app/css/**.css',
    'app/**.html',
    'app/images/**.*',
    'app/js/**.js'
  ],
  stripPrefix: 'app/',
  runtimeCaching: [{
    urlPattern: /this\\.is\\.a\\.regex/,
    handler: 'networkFirst'
  }]
};

该文件可以传递到命令行界面，同时还可以设置详细选项，通过

$ sw-precache --config=path/to/sw-precache-config.js --verbose

这提供了最大的灵活性，例如为 runtimeCaching.urlPattern 选项提供正则表达式。

或者您可以使用 JSON 文件：

我们还支持为 --config 传递 JSON 文件，尽管这提供的灵活性较低：

{
  "staticFileGlobs": [
    "app/css/**.css",
    "app/**.html",
    "app/images/**.*",
    "app/js/**.js"
  ],
  "stripPrefix": "app/",
  "runtimeCaching": [{
    "urlPattern": "/express/style/path/(.*)",
    "handler": "networkFirst"
  }]
}

此示例使用 JS 文件作为配置选项：

$ sw-precache --config=path/to/sw-precache-config.js --verbose

执行命令并使用此配置生成 service-worker 后，您可以比仅使用sw-precache.

您可以直接在文件中配置策略，也可以在 service-worker 代码的底部手动添加它们。

以下是生成代码底部的示例：

//sw-precache generated code...

// *** Start of auto-included sw-toolbox code. ***
/*
 Copyright 2016 Google Inc. All Rights Reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/ 
//(!function(e){if("object"==typeof exports&&"undefined"!=typeof module))...

// *** End of auto-included sw-toolbox code. ***

// Runtime cache configuration, using the sw-toolbox library.

toolbox.router.get(/this\\.is\\.a\\.regex/, toolbox.networkFirst, {});

toolbox.options.debug = true;

//Here you can configure your precache:

toolbox.precache([
    '/',
    '/assets/background.png',
    '/assets/logo.png',
    '/assets/application.css',
]);

//And here you can configure your policies for any route and asset:

toolbox.router.get('/', toolbox.fastest);
toolbox.router.get('/assets/background.png', toolbox.fastest);
toolbox.router.get('/assets/logo.png', toolbox.fastest);

//Here is the Network First example

toolbox.router.get('/myapp/index.html', toolbox.networkFirst);

我发现这比仅使用sw-precache.

在这里您可以找到sw-toolbox 使用指南以获取有关配置的更多信息。

于 2017-05-17T05:07:40.677 回答