Service worker.js 不会更新更改。仅当缓存被清除时答案

【问题标题】：Service worker.js is not updating changes. Only if cache is clearedService worker.js 不会更新更改。仅当缓存被清除时
【发布时间】：2018-10-02 03:50:39
【问题描述】：

这是我第一个使用 laravel 的 PWA 应用。这段代码可以正常工作，它注册得很好，但是如果我对代码进行更改，例如在 HTML 中，它没有得到更新，控制台也没有抛出错误，我不知道为什么。

我正在使用此代码调用 service-worker.js

if ('serviceWorker' in navigator ) {
window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
});

}

这是 sw.js 的代码

var cache_name = 'SW_CACHE';
var urlsToCache = [
'/',
'/register'
];
self.addEventListener('install', function(event) {
    event.waitUntil(precache());
});
addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request)
        .then(function(response) {
        // Cache hit - return response
        if (response) {
            return response;
        }
        var fetchRequest = event.request.clone();
        return fetch(fetchRequest).then(
            function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
                return response;
            }
            var responseToCache = response.clone();
            caches.open(cache_name)
                .then(function(cache) {
                cache.put(event.request, responseToCache);
                });
            return response;
            }
        );
        })
    );
});
var fromCache = function (request) {
    return caches.open(cache_name).then(function (cache) {
    cache.match(request).then(function (matching) {
        return matching || Promise.resolve('no-match');
    });
    });
}
var update = function (request) {
    return caches.open(cache_name).then(function (cache) {
    return fetch(request).then(function (response) {
        return cache.put(request, response);
    });
    });
}
var precache = function() {
    return caches.open(cache_name).then(function (cache) {
    return cache.addAll(urlsToCache);
    });
}

Y 也使用了 skipWaiting();方法内部安装方法，但它使我的应用程序崩溃并且必须从 chrome://serviceworker-internals/ 卸载 sw

【问题讨论】：

在你打开应用程序一点点关闭应用程序然后再次打开后它是否得到更新？我相信这就是它的工作原理。应用程序打开时使用缓存，同时在后台上传更改以供下次打开时使用。

标签： javascript laravel service-worker

【解决方案1】：

这是 Service Worker 生命周期假定的工作方式：不会发生新的 Service Worker，除非：

由老服务人员控制的窗口或选项卡已关闭并重新打开
在 Chrome 开发工具中检查了“重新加载时更新”选项

这里有一个官方教程解释得很好：The Service Worker Lifecycle

【讨论】：

【解决方案2】：

Service Worker 将始终使用现有的 Worker。两个认为你可以做的是在 chrome 中有一个选项可以在加载时设置更新

转到 InspectorWindow (f12) -> 应用程序 -> 并检查重新加载时的更新。
如果您想立即更新，您可以选择网络优先缓存方法。这将始终从服务器获取最新信息并仅在离线模式下使用缓存。查看链接了解更多信息

How API is getting cached effectively, Using Service worker in Angular 5 using Angular CLI

【讨论】：