В настоящее время я работаю над интеграцией Service-Worker в свое приложение.Но у меня возникают проблемы, когда я хочу проверить это на моей локальной машине.
Кэширование в install
-Event не выполняется.Я искал ошибку в течение двух дней, но у меня больше нет идей.Когда я развертываю сайт, например, по netlify, все работает нормально.
Вот что мне дает вкладка сети:
Консоль разработчикапечатает:
Браузер: Chromium Version 70.0.3538.77 (Official Build)
Я активировал #allow-insecure-localhost
в хромированных флагах.Webpack обслуживает https://localhost:8081
(с самозаверяющим сертификатом).Если я щелкну правой кнопкой мыши по неудавшимся сетевым запросам и нажму Open in new tab
, все работает нормальноСтранно то, что сбойные файлы меняются каждый раз.
Код в моем index.jsx
(точка входа для веб-пакета):
...
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker
.register('/serviceWorker.js', { scope: "/" })
.then(e => {
console.log('Service Worker Registered');
console.log(e);
})
.catch(e => {
console.log("Service Worker fail");
console.log(e);
})
});
}
...
Код в моем serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(cachedURLs);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Редактировать: Как уже упоминалось в комментариях, я добавил catch
-блок к cache.addAll
:
return cache.addAll(cachedURLs).catch(err => console.log('error: ', err));
Но, к сожалению, он не более многословен:
error: TypeError: Failed to fetch
Для полноты это то, что Chromium сообщает о неудачном запросе (в данном случае это bundle.js
)