Question

安装Service Worker后，Chrome浏览器需要多长时间才能检查其新版本？当前客户端服务工作者什么时候到期？

我试图找出与服务工作者一起开发并将更改推送到prod的最佳实践。目前，一旦对服务工作者的行为方式进行了更改，如果已经安装了以前的服务工作者，客户端并不总是在进行更改。

这个问题也有些相关：Programmatically update service worker - 理想情况下，一旦对SW实施了更改，您就希望在可能已经拥有该版本的所有客户端上强制更新它。

Answer 1

仔细阅读MDN文件提供了答案：

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Updating_your_service_worker

如果先前已安装了服务工作者，但在刷新或页面加载时可以使用新版本的工作程序，则新版本将在后台安装，但尚未激活。只有在不再加载任何仍在使用旧服务工作者的页面时，才会激活它。只要仍然没有加载此类页面，新服务工作程序就会激活。

Answer 2

默认情况下，服务工作人员会在 24小时后过期。但最好的方法是使用 max-age = 0 标头。因为我们希望我们的更改能够尽快反映出来。我不知道强制更新但是当它们没有缓存服务工作者文件并且没有为前一个服务工作者打开选项卡时，新服务工作者将自动安装。

请参阅此链接以获取更多信息 https://jakearchibald.com/2016/caching-best-practices/

Answer 3

我一直在Chrome计算机和Chrome Android手机上测试Service Worker。

结果是：

一件事是服务工作者，它是状态。
另一件事是在生产服务器上将文件更新为html，js等时的典型缓存问题。

首先，我很困惑，因为我认为Service Worker +缓存问题之间的混合只是一团糟。

我看到的是，如果我更改.js文件，则导航器无法捕获它。所以我解决问题的方法是在脚本调用中使用版本：

<script src="jquery-functions.js?ver=1.54"></script>

每次更改文件中的代码时，请确保增加versión（在我的情况下：ver = 1.55）

这仅适用于计算机和Android，而Server Worker则完全没有干扰。对于Web版本和webApp版本，它的工作方式相同。

另一个问题是如何更改或更新服务工作者本身。我尝试的第一个思路是删除对服务工作者文件的脚本调用。这不会删除服务工作者。

我在寻找删除服务人员的代码，这似乎在Chrome电脑和适用于Android的Chrome上正常运行。

// REMOVE ALL SERVICE WORKERS
navigator.serviceWorker.getRegistrations().then(
    function(registrations) {
        for(let registration of registrations) {
            registration.unregister();
        }
});

// AND REMOVE ALL CACHES 
caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

在计算机上： 在没有服务工作者脚本的情况下应用此代码后，它仍将运行，但带有以下控制台消息：domain.name-已删除。在第二次重新加载后，服务工作者的状态显示以下消息：“＃状态为冗余”。（这似乎没问题；服务人员已被删除）

如果再次运行服务程序，则在chrome控制台上向下滚动，我可以看到另一个服务程序正在运行；因此它似乎可以正常工作；这是杀死服务人员并唤醒他们的方法。

在Android手机上，启动webApp主屏幕图标时：第一次像往常一样打开：服务人员似乎可以继续正常工作。（其行为与Chrome电脑相同）

第二次尝试使用“飞行模式”打开webApp主屏幕图标（以测试服务人员的功能），当没有互联网连接时，我得到了导航器的典型错误。我了解此行为是正确的，因为服务人员已被杀死。

我认为这是对Service Workers充满信心的第一步，但是如果您有更多信息或测试，请给我反馈。

请务必将Chrome控制台与“应用程序”->“服务人员”的TAB一起使用，这样您才能了解背后的情况。

作为一个小小的奖励，当用户没有互联网连接时，很高兴通知用户无法保存所做的更改。那是我做的简单方法：

setInterval(() => {
    if (!navigator.onLine) { niceAlert("No Internet connection detected. Your changes will not be saved"); }
},5000);

服务工作者到期

3 个答案: