能否在页面加载之前禁用服务辅助角色？

Question

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

目前，我们已经设置了Service Worker，以便在安装时删除所有缓存（以及每当发生任何事情时作为预防措施），以及一些JavaScript，以便在新页面实际加载时取消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答案，包括这个，但是它们倾向于依赖用户手动做一些事情来获取新内容，即通过硬重载或通过浏览器设置手动禁用服务人员。然而，在我的案例中，我们不能依赖手动用户操作。

Answer 1

在“更新”所有内容之前添加以下内容：

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

必须关闭ServiceWorker才能停止所有使用它的窗口。如果它是一个网络应用程序，您可以使用Windows。close（）；

这段代码只是加载列表中文件的新版本。如果有任何内部缓存，它们都将被更新。

Answer 2

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

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

要在文件名中动态附加新的时间戳，请检查此答案

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