您可以在页面加载之前禁用服务人员吗？答案

【问题标题】：Can you disable a service worker before the page loads?您可以在页面加载之前禁用服务人员吗？
【发布时间】：2018-09-14 11:39:35
【问题描述】：

我和我的团队有一个项目最初是作为 PWA 构建的，但后来决定放弃这个想法，因为我们意识到它需要比最初预期的更频繁地进行更改。但是，Service Worker 以及新设计的网站登录页面已经上线。尽管我们尽一切努力清除 PWA 缓存，但我们的客户仍然报告说他们正在接收旧的缓存版本的网站。

目前，我们设置了 Service Worker，以便在安装时删除所有缓存（以及在发生任何事情时作为预防措施），以及一些 JavaScript 在新页面实际时取消注册 Service Worker em> 负载。然而，问题是在用户向网站发出请求之前，这些都不会运行，此时浏览器已经在加载缓存的内容。是否可以清除此缓存并阻止浏览器加载任何已缓存的内容？

当前 service-worker.js

// Caching
var cacheCore = 'mkeSculptCore-0330121058';
var cacheAssets = 'mkeSculptAssets-0330121058';

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

    caches.keys().then(function (names) {
        for (let name of names)
            caches.delete(name);
    });
});

self.addEventListener('activate', function (event) {
    caches.keys().then(function (names) {
        for (let name of names)
            caches.delete(name);
    });
});

self.addEventListener('fetch', function (event) {
    caches.keys().then(function (names) {
        for (let name of names)
            caches.delete(name);
    });
});

index.html 中的脚本

(function () {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
            //returns installed service workers
            if (registrations.length) {
                for (let registration of registrations) {
                    registration.unregister();
                }
            }
        });
    }
})();

到目前为止，我已经阅读了其他一些类似的 StackOverflow 答案，including this one，但他们倾向于依赖用户手动执行某些操作来获取新内容，即。通过硬重新加载或通过浏览器设置手动禁用服务工作者。但是，就我而言，我们不能依赖手动用户操作。

【问题讨论】：

棘手的问题，如何使用一些 js 代码部署一个新的 html 页面来取消注册 service-worker 并告诉您的客户转到此 url。或者，如果您有一些“网络优先”的 html/js 资源，您可以将注销代码放在那里。
@StefChäser 感谢您的反馈。我应该澄清一下；这是一个公共信息网站，因此我们有一些“行人用户”可能只是偶尔检查一下可能已发布的有关该事件的更新。因此，我们实际上对手动用户操作几乎没有控制权，包括将它们定向到特定 URL。我知道这听起来不像 PWA/Service Worker 的用例，但主页原本打算是永久性的。

标签： javascript service-worker progressive-web-apps

【解决方案1】：

解决这个问题的一种方法是在文件（js，css）名称的末尾添加一个时间戳，这样每次发出请求时，缓存键在服务工作者中不可用，因此它倾向于在每次加载时获取文件的新版本。

<script type="text/javascript" src="/js/scipt1.js?t=05042018121212"/>

要在文件名中动态附加新的时间戳，请查看answer

但是如果 HTML 本身被缓存，这可能不可靠。

【讨论】：

不幸的是，HTML 是我最大的问题：/

【解决方案2】：

在“更新”所有内容之前添加这个：

$.each(['index.html','file1.js','file2.js','file3.js'],function(index,file) {
      $.get(file+'?t='+new Date().getTime(), function(){});
});
location.reload(true);

为了让 ServiceWorker 停止使用它的所有窗口，必须关闭它。如果是 webapp，你可以使用 window.close();

此代码仅加载列表中文件的新版本。如果有任何内部缓存，它们将全部更新。

【讨论】：