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

Question

我使用带有sw工具箱库的service worker。我的PWA缓存除API查询（图像、css、js、html）之外的所有内容。但是如果有一天某些文件会被更改呢。或者如果服务人员。js将被更改。应用程序应该如何知道文件中的更改？

我的服务人员。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版本？

Answer 1

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

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

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

现在如何使用这两个：

>

如果值不同，这意味着您的Web应用版本不是最新的。

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

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

>

当一个人再次访问时，服务工作者应该重新注册，所有缓存的文件都将被检索。

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

Zip文件，代码为：ServiceWorkerExercise。拉链

Answer 2

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

Answer 3

AFAIKsw_toolbox没有网络更新的缓存策略。我想这真的是你想要的。你想修改缓存-网络竞争策略-