Javascript Service worker.js未更新更改。仅当缓存被清除时
这是我第一个使用laravel的PWA应用程序。这段代码运行正常,注册良好,但是如果我对代码做了更改,例如在HTML中,它不会得到更新,控制台也不会抛出错误,我不知道为什么 我使用此代码调用service-worker.jsJavascript Service worker.js未更新更改。仅当缓存被清除时,javascript,laravel,service-worker,Javascript,Laravel,Service Worker,这是我第一个使用laravel的PWA应用程序。这段代码运行正常,注册良好,但是如果我对代码做了更改,例如在HTML中,它不会得到更新,控制台也不会抛出错误,我不知道为什么 我使用此代码调用service-worker.js if ('serviceWorker' in navigator ) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.j
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/这就是服务人员生命周期假设的工作:新的服务人员不会出现,除非:
- 由旧的服务人员控制的窗口或选项卡将关闭并重新打开
- 在Chrome开发工具中选中了“重新加载时更新”选项
这里有一个官方教程对此做了很好的解释:服务工作者将始终使用现有工作者。你可以做的两件事是在chrome中有一个选项来设置加载时的更新
在你打开应用程序一段时间后,它是否会得到更新?关闭应用程序,然后再次打开?我相信这就是它的工作原理。在下次打开应用程序时,在后台上载更改时,将使用缓存。