javascript - Service worker.js 没有更新更改。仅当清除缓存时

标签 javascript laravel service-worker

这是我第一个使用 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

最佳答案

这就是 service worker 生命周期应该工作的:一个新的 service worker 不会发生,除非:

  • 老 service worker 控制的窗口或选项卡关闭并重新打开
  • 在 Chrome devtools 中选中“重新加载时更新”选项

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

关于javascript - Service worker.js 没有更新更改。仅当清除缓存时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52572557/

相关文章:

javascript - jQuery 点击显示/隐藏功能不正常

php - Laravel:将任意 URL 解析为其相应的 Controller /路由?

php - Laravel 几分钟后自动注销

javascript - 在 Laravel 中使用 Vue

javascript - 使用 URL 哈希重新定义 XSS 攻击中的转义函数

javascript - 对于迭代,元素未定义

javascript - Firefox 中的图像交换

javascript - 如何禁用子域的 Service Worker?

javascript - 服务 worker 的事件监听器放在哪里

node.js - 使用 nextjs 应用程序注册 service worker