Question

我运行的网站https://www.igluonline.com正在运行Hugo，我最近在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'
  }]
};

考虑：

虽然有时自动生成的代码会遇到一些错误，但服务工作者可以正常工作并在网络和移动设备上提供离线体验。

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

问题：

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

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

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

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

现在我不确定所需的PWA体验是否如此 - 意味着用户必须重新加载两次或至少访问两页以查看刷新的代码 - 或者我是否犯了一些错误。我真的很感激。

Answer 1

生成服务工作者时，获取所需政策的最简单方法是将sw-precache与sw-toolbox一起使用。

使用sw-precache生成新的服务工作者时，您还可以通过传递正确的配置选项，在生成的文件末尾获取sw-toolbox代码。

根据sw-precache Documentation：

sw-precache模块能够将sw-toolbox代码和配置与其自身配置一起包含在内。使用runtimeCaching（see below）中的sw-precache配置选项是一种快捷方式，可以通过在服务工作者中导入sw-toolbox并编写自己的路由规则来完成手动操作。

这是runtimeCaching documentation上显示的sw-precache选项的示例：

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

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

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

支持使用--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'
  }]
};
该文件也可以传递给命令行界面通过
设置详细选项
$ 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更轻松地处理预缓存和策略。

您可以直接在文件中配置策略，也可以在服务工作者代码的底部手动添加策略。

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

//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 Usage Guide以获取有关配置的更多信息。

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

1 个答案: