我在我的网站上集成了 Service Worker。过去一切正常,但现在,当我的服务人员尝试安装时出现错误:
Uncaught (in promise) TypeError: Request failed at anonymous service-worker.js:1
我的 service worker 处于“冗余”状态。
我不知道为什么...我没有更改我的代码,这是我的 index.html :
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
if(reg.installing) {
console.log('Service worker installing');
} else if(reg.waiting) {
console.log('Service worker installed');
} else if(reg.active) {
console.log('Service worker active');
}
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
这是我的 service-worker.js :
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/',
'/theme/website_mobile/js',
'/theme/website_mobile/css',
'/theme/website_mobile/js.js',
'/theme/website_mobile/css.css',
'/js/614cd8e.js',
'/css/f1407bb.css',
'/js/93779bc.js',
'/js/d228ec7.js',
'/theme/website_mobile/img/slider-home/slider1.jpg',
'/theme/website_mobile/img/slider-home/slider2.jpg',
'/theme/website_mobile/img/slider-home/slider3.jpg',
'/theme/website_mobile/img/slider-home/slider4.jpg',
'/theme/website_mobile/img/logo-website.png',
'/theme/website_mobile/img/picto-menu-close.png',
'/theme/website_mobile/img/picto-close.png',
'/var/website/storage/images/media/website-medias/website-materials/5163440-1-eng-GB/website-materials_article_list_main_website_enm.jpg',
'/theme/website_mobile/fonts/website-montserrat/Montserrat-Light.woff2',
'/theme/website_mobile/fonts/website-montserrat/Montserrat-Regular.woff2',
'/theme/website_mobile/fonts/website-montserrat/Montserrat-ExtraBold.woff2',
'/theme/website_mobile/fonts/website-avenir/Fonts/065a6b14-b2cc-446e-9428-271c570df0d9.woff2',
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// caches.match() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open('v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function (e) {
return caches.match('/');
});
}
}));
});
更奇怪的是,当我尝试编辑我的 service-worker.js 时,我添加了这个:
self.addEventListener('install', function(event) {
**reg.update();**
这是一个错误,但我发现这很好用!我在控制台中有一个 reg is undefined 错误,但我的 service worker 运行良好。
我试图更改 reg.update() 部分并放置一个简单的 console.log 但是,当我这样做时,service-worker 返回冗余状态并且不安装...
我不明白为什么当我在 service worker 代码中添加一个 undefined object 时,它会抛出一个错误但它工作得很好,当我回到我的旧代码(以前可以工作)时,它没有'安装。
也许,我在某处做错了......?
谢谢
最佳答案
我拔头发几天后才遇到这个问题。
在我的例子中,列表的一个 URL 返回 404,这使得整个 Cache.addAll
返回 promise reject 并出现极其不明确的错误 TypeError: Request failed
(“失败了什么,为什么?!”)。
如果您的业务逻辑允许优雅的缓存,尽管任何一个 url 失败,您可能希望将您的方法更改为列表中每一项的 Cache.add
:
var urls = ['/', ...]
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
urls.forEach(function (url) {
cache.add(url).catch(/* optional error handling/logging */);
});
})
);
});
关于javascript - Service Worker 不工作了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47904382/