使用Google的sw-precache构建的服务工作者真的可以成为networkFirst吗？

Question

我运行运行Hugo 的网站https://www.igluonline.com,我最近在Google的sw-precache之后安装了一名服务工作者.

这是Config文件:

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

注意事项:

虽然有时自动生成的代码会遇到一些错误,但服务工作者可以正常工作并在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体验是否如此 - 意味着用户必须重新加载两次或至少访问两页以查看刷新的代码 - 或者我是否犯了一些错误.我真的很感激.

Answer 1

在生成服务工作者时,获取所需策略的最简单方法是使用sw-precachewith sw-toolbox.

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

根据sw-precache文档:

该sw-precache模块能够将sw-toolbox代码和配置与其自身配置一起包含在内.使用(见下文)中的runtimeCaching配置选项是一种快捷方式,可通过导入服务工作者并编写自己的路由规则来完成手动操作.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文件.例如,假设有一个路径/到/ 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'
  }]
};

该文件可以传递给命令行界面,同时还可以设置verbose选项

$ 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

执行命令并使用此配置生成服务工作程序后,您可以比使用此方法更轻松地处理预缓存和策略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使用指南,了解有关配置的更多信息.