Javascript 如何在PWA中更新服务工作者缓存？

我使用图书馆的服务人员。我的PWA缓存除API查询（图像、css、js、html）之外的所有内容。但是如果有一天某些文件会被更改呢。或者，如果service-worker.js将被更改怎么办。 应用程序应该如何知道文件中的更改

My 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版本？

假设sw_工具箱没有网络更新缓存策略。我想这就是你想要的。 您想修改缓存网络竞争策略-> 一旦网络做出响应，您就需要更新客户端，而不是让失败者消失。这是一个更先进的一点，我有时间在这里解释。 我会给客户端发一条消息，让它知道有更新。您可能希望提醒用户更新或强制更新。

---

我不认为这是一个边缘案例，而是一个非常普遍但先进的场景。我希望不久能发布一个更详细的解决方案。

有一个不错的解决方案，他说（简而言之）要么不使用缓存优先策略，要么更新显示“为最新更新重新加载”的UX模式

我与服务人员打交道时没有使用任何库，最终提出的解决方案涉及一些服务器端代码和一些客户端代码。简而言之，这一战略

首先是您需要的变量和位置：

在服务器端有一个“service worker version”变量（如果您使用的是像php这样的东西，则将其放入数据库或配置文件中，它将在服务器端立即更新，而无需重新部署。我们称之为serverSWVersion

在您缓存的其中一个javascript文件（我有一个专用于此的javascript文件）上有一个全局变量，该变量也将是“服务工作者版本”。我们称之为clientSWVersion

现在如何使用这两个：

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

如果值不同，则表示您的web应用程序版本不相同 最新的

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

新文件可用时实际执行的操作

更新serviceSWVersion和clientSWVersion变量，并在适用时上载到服务器

当有人再次访问时，应重新注册服务人员，并检索所有缓存文件

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

包含以下代码的Zip文件：

---

将self.toolbox.router.any（'/'，self.toolbox.cacheFirst）；更改为self.toolbox.router.any（'/'，self.toolbox.faster）；

当服务人员被更改时，浏览器将安装它，但在关闭并重新打开浏览器选项卡或PWA应用程序窗口之前，新版本不会被激活。 因此，如果更改缓存名称，则在浏览器重新打开之前，新缓存不会为任何文件提供服务，在此之前，旧缓存也不会被删除。 您可以使用registration.onupdatefound检测页面javascript中的service worker更改，并要求用户关闭并重新打开窗口-类似以下内容：

//注册服务工作者
navigator.serviceWorker.register（'sw.js'）。然后（函数（注册）
{
registration.onupdatefound=函数（）
{
log（“找到ServiceWorker更新”）；
警报（“新版本可用-请关闭此浏览器选项卡或应用程序窗口，然后重新打开以更新…”）；
}
}，函数（err）
{
console.log（'ServiceWorker注册失败：'，错误）；
})；