网站内容更新方案(如何更新用户浏览器中的本地缓存及离线开发和此文PWA)

　　网站内容更新方案(如何更新用户浏览器中的本地缓存及离线开发和此文PWA)

　　服务工作+缓存可用于本地缓存网站的部分资源，甚至实现离线访问（如果您的网站是纯静态的）

　　这篇文章不会重复这项技术的具体科普知识。你可以参考这篇文章：在服务人员和cachestorage cache的帮助下，离线开发和PWA服务人员在这篇文章中，从介绍实战到攀登深坑

　　最新版本的Shangy theme也使用此技术来实现本地缓存。也许你会在第一个博客的后续访问中感觉很快，这可能是主要原因

　　本文主要讨论当需要更新缓存内容时，如何在用户浏览器中更新本地缓存

　　软件的生命周期是：安装->等待->激活->获取

　　开始注册并等待激活。激活后，聆听页面的请求

　　Sw.js通过函数导航器注册服务工作者。服务人员。寄存器（URL:String）

　　执行此功能时，如果浏览器发现此URL的文件内容已被修改（与以前注册的软件相比），它将重新安装新版本（安装->监视）

　　浏览器将在前一个软件空闲时替换它（例如，没有页面请求发生），而不是立即执行它。这就是为什么会有等待阶段

　　但是，我们可以在安装阶段使用skipwaiting强制跳过等待

　　sw.min.js：

　　self.addEventListener('install', function(event) {

event.waitUntil(self.skipWaiting()) //这样会触发activate事件

});

　　虽然文档中说self.skipwaiting函数可以跳转队列，直接强制旧版本退役，但经过具体实验，发现如果一个域名下有多个标签，还需要在edge和chrome上等待一小段时间，它可以很快取代safari和Firefox上的旧版本。（您可以在开发者工具-应用程序-服务工作流程中看到当前软件流程）

　　因此，此方法不能用于直接更新本地缓存

　　即使在执行serviceworker.register后可以强制替换旧版本，在打开网页时仍将使用缓存中的资源（您需要再次刷新以使用最新的资源）

　　原因是serviceworker.register是异步执行的JS。即使它被放置在页面的前面，一些资源仍然会在寄存器执行之前被加载。如果以前缓存过这些资源，它们将直接调用缓存，而不是最新的资源

　　因此，更好的方法是在成功安装新软件后提示用户刷新浏览器，以便更新本地缓存

　　您可以通过浏览器提供的此功能监控是否安装了新的软件版本：

　　navigator.serviceWorker.addEventListener('controllerchange', function (ev) {

//出现提示条，提示点击刷新页面，更新本地缓存

});

　　在本文文章中，谨慎处理service worker更新的第三种方法与此类似，但他给出的提示栏是，如果用户不单击，将不会安装新版本的SW。如果用户是懒惰的并且总是懒惰的，那么旧版本缓存将被一致地使用

　　我在上面所做的是，用户将安装新版本的SW，即使他没有单击提示栏，但旧版本缓存已加载到当前页面上，但用户下次将再次进入页面（或手动重新刷页面）（尽管他没有单击提示栏）