如何在PWA中更新服务工作者缓存？
我在sw-toolbox库中使用service worker。我的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版本？
回答 5
Stack Overflow用户
发布于 2017-06-20 04:28:03
AFAIK sw_toolbox没有用于网络更新的缓存策略。我想这真的是你想要的。您希望修改缓存-网络竞争策略-> https://jakearchibald.com/2014/offline-cookbook/#cache-network-race，而不是让输家逐渐消失，一旦网络响应，您将希望更新客户端。这是更高级的，我有时间或时间在这里解释。我会向客户端发送一条消息，让它知道有更新。您可能希望在更新时提醒用户，或者只是强制更新。我不认为这是一种边缘情况，而是一种非常常见但很高级的情况。我希望很快发布一个更详细的解决方案。
Stack Overflow用户
发布于 2017-06-21 08:49:53
有一个很好的解决方案，他写了here，他声明(简而言之)要么不使用缓存优先策略，要么更新显示“重新加载最新更新”的UX模式。
Stack Overflow用户
发布于 2017-07-05 14:02:58
我在没有使用任何库的情况下与服务工作者打交道，我最终得到的解决方案涉及一些服务器端代码和一些客户端。简而言之，策略
首先需要的变量及其位置：
服务器端的
- 有一个"service worker version“变量(如果你使用的是php之类的东西，就把它放在数据库或配置文件中，它会在服务器端立即更新，而不需要重新部署。让我们称它为serverSWVersion
- On，您缓存的javascript文件之一(我有一个专门用于此的javascript文件)有一个全局变量，该变量也将是“服务工作者版本”。让我们称它为clientSWVersion
现在如何使用这两个：
每当有人登陆页面时，就向您的服务器发出ajax调用以获取serverSWVersion值，
- 。将此值与clientSWVersion值进行比较。
- 如果值不同，则表示您的web应用程序版本不是最新版本。
- 如果是这种情况，则取消注册服务工作程序并刷新页面，以便重新注册服务工作程序并缓存新文件。
当新文件可用时，实际执行什么操作
- 更新serviceSWVersion和clientSWVersion变量并将其上载到用户再次访问的服务器，然后应重新注册该服务工作者，并检索所有缓存的文件。
我提供了一个基于php服务器端的代码，我在实现这个策略时使用了它。它应该向你展示原则。只需在php服务器的htdocs中放置"Exercise“文件夹，它就可以在你不做任何其他事情的情况下工作。我希望你会发现它是有用的。请记住，如果您使用的是其他服务器而不是php，则可以使用数据库而不是配置文件来存储服务器端服务工作者变量：
Zip文件，代码：ServiceWorkerExercise.zip
https://stackoverflow.com/questions/44627922
复制相似问题
腾讯云开发者
