Question

我将服务工作者与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版本？

Answer 1

AFAIK sw_toolbox没有针对网络更新缓存的策略。这真的是你想要的。您想要修改缓存网络竞争策略 - ＆gt; https://jakearchibald.com/2014/offline-cookbook/#cache-network-race 一旦网络响应，您将需要更新客户端，而不是让失败者逐渐消失。这有点高级，我有时间或时间在这里解释。我会向客户发布一条消息，让它知道有更新。您可能希望提醒用户更新或仅强制更新。我不认为这是一个边缘情况，但是一个非常常见但非常先进的方案。我希望尽快发布更详细的解决方案。

Answer 2

有一个很好的解决方案here，其中（简而言之）指出不使用缓存优先策略或更新显示＆＃34;重新加载以获取最新更新的UX模式。＆＃34 ;

Answer 3

我在没有使用任何库的情况下处理服务工作者，我最终提出的解决方案涉及一些服务器端代码和一些客户端。简而言之，战略

首先是您需要的变量以及：

在服务器端有一个“服务工作者版本”变量（把它放在数据库或配置文件中，如果你使用像服务器那样立即在服务器端更新而不需要重新部署的东西。我们称之为 serverSWVersion

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

现在如何使用这两个：

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

如果值不同，则表示您的网络应用版本不是最新的。

如果是这种情况，则取消注册服务工作者并刷新页面，以便重新注册服务工作者并缓存新文件。

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

更新 serviceSWVersion 和 clientSWVersion 变量，并在适用的情况下上传到服务器。

当某人再次访问时，应重新注册服务工作者并检索所有缓存的文件。

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

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

Answer 4

更改self.toolbox.router.any（＆＃39; / ＆＃39;，self.toolbox.cacheFirst）; to self.toolbox.router.any（＆＃39; / ＆＃39;，self.toolbox.fastest）;

Answer 5

更改服务工作者后，浏览器将安装它，但是直到关闭并重新打开浏览器选项卡或PWA应用程序窗口后，才会激活新版本。因此，如果您更改缓存名称，那么直到重新打开浏览器后，新的缓存才会提供任何文件，直到那个时候，旧的缓存也不会被删除。您可以使用registration.onupdatefound来检测页面javascript中服务人员的更改，并要求用户关闭并重新打开窗口-像这样：

// register the service worker
	navigator.serviceWorker.register('sw.js').then(function(registration) 
	{
		registration.onupdatefound = function()
		{
			console.log("ServiceWorker update found.");
			alert("A new version is available - please close this browser tab or app window and re-open to update ... ");
		}
	}, function(err)
	{
		console.log('ServiceWorker registration failed: ', err);
	});

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

5 个答案: