如何更新 PWA 中的 Service Worker 缓存？

Question

我将 service worker 与 sw-toolbox 库一起使用。我的 PWA 缓存了除 API 查询（图像、css、js、html）之外的所有内容。但是，如果某天某些文件将被更改怎么办。或者如果 service-worker.js 将被更改怎么办。应用程序应该如何知道文件的变化？

我的 service-worker.js：

 'use strict';
importScripts('./build/sw-toolbox.js');

self.toolbox.options.cache = {
  name: 'ionic-cache'
};

// pre-cache our key assets
self.toolbox.precache(
  [
    './build/main.js',
    './build/main.css',
    './build/polyfills.js',
    'index.html',
    'manifest.json'
  ]
);

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

我不知道在 PWA 中更新缓存的常用方法是什么。也许 PWA 应该在后台发送 AJAX 请求并检查 UI 版本？

原文由 Ildar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在不使用任何库的情况下与服务工作者打交道，我最终提出的解决方案涉及一些服务器端代码和一些客户端。战略简述

首先，您需要的变量及其位置：

1. 在服务器端有一个“service worker version”变量（如果你使用像 php 这样的东西，将它放在数据库或配置文件中，它会立即在服务器端更新而不需要重新部署。我们称之为 serverSWVersion
2. 在您缓存的一个 javascript 文件上（我有一个专门用于此的 javascript 文件）有一个全局变量，它也将是“服务工作者版本”。我们称它为 clientSWVersion

现在如何使用这两个：

1. 每当有人登陆页面时，都会对您的服务器进行 ajax 调用以获取 serverSWVersion 值。将其与 clientSWVersion 值进行比较。

2. 如果值不同，则表示您的 Web 应用程序版本不是最新的。

3. 如果是这种情况，则取消注册 service worker 并刷新页面，以便重新注册 service worker 并缓存新文件。

当新文件可用时实际做什么

1. 更新 serviceSWVersion 和 clientSWVersion 变量并上传到适用的服务器。

2. 当有人再次访问时，应该重新注册 service worker 并检索所有缓存的文件。

我提供了一个基于 php 服务器端的代码，我在实施此策略时使用了它。它应该向您展示原则。只需将“Exercise”文件夹放入 php 服务器的 htdocs 中，它应该可以正常工作，而无需执行任何其他操作。我希望你觉得它有用……记住，如果你使用其他服务器而不是 php，你可以只使用数据库而不是配置文件来存储服务器端 service worker 变量：

包含代码的 Zip 文件： ServiceWorkerExercise.zip

原文由 Zuks 发布，翻译遵循 CC BY-SA 3.0 许可协议