В настоящее время я работаю над интеграцией Service-Worker в свое приложение. Но у меня возникают проблемы, когда я хочу протестировать его на своем локальном компьютере.
Кэширование в событии install не работает. Два дня искал ошибку, но идей больше нет. Когда я развертываю сайт, например, 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.info('Service Worker Registered');
console.info(e);
})
.catch(e => {
console.info("Service Worker fail");
console.info(e);
})
});
}
...
Код в моем serviceWorker.js
let cacheName = 'test';
let cachedURLs = [
"/",
"/bundle.js",
"/manifest.webmanifest",
"/favicon.ico",
"/favicon-256.png"
];
self.addEventListener('install', function(e) {
console.info('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.info('[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.info('error: ', err));
Но, к сожалению, он не более подробный:
error: TypeError: Failed to fetch
Для полноты это то, что Chromium сообщает о неудавшемся запросе (в данном случае это bundle.js).
У меня была аналогичная настройка, но не было window.addEventListener ('load', ... в index.jsx. Также позаботьтесь о том, чтобы все cachedURL существовали.
@ t3__rry Да, но это ничего не меняет, потому что fetch-listener никогда не запускается при первоначальном рендеринге страницы. Ошибка выдается в install-listener (при кешировании файлов с cache.addAll). @Niels: Каждый файл / URL существует, как я уже указывал в своем посте. Я могу загрузить их, если открою неудавшиеся запросы.
@Dirk, хорошо, а вы тогда пробовали добавить блок catch в слушатель install?
@ t3__rry Да, я пробовал, но это не дает больше информации. Я обновил свой пост и добавил снимок экрана с неудавшимися запросами. Это помогает?
@Dirk не совсем, я думал, у тебя будет больше идей ... Я наткнулся на эту ветку, если она может тебе помочь: stackoverflow.com/questions/47160929/…
@ t3__rry Я уже нашел эту ветку, но все равно спасибо. Но я пробовал без fetch-слушателя. Тот же результат. Я пробовал в режиме инкогнито (без Chromium Addons) -> тот же результат. И файлы написаны правильно. Я предполагал, что ошибка находится в webpack-dev-server. Но не похоже, я активировал verbosemode express. Неудачные запросы даже не доходят до экспресса. Итак, я предполагаю, что Chromium не работает ...
@Dirk, да, это странно ... и ваша реализация верна, так что я думаю, что это тоже на стороне Chromium



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Привет, не могли бы вы добавить блок
catchк своему обещанию вfetchevent-listener:.catch(err => console.info('error: ', err)));Может быть, он будет более выразительным