Ошибки Workbox в Firefox: обработчики событий Fetch должны быть добавлены во время первоначальной оценки рабочего скрипта
У меня есть приложение angular, созданное jhipster. Я хочу добавить сервис-воркера. Из коробки он поставляется с базовой конфигурацией плагина Workbox webpack. Я обновил "workbox-webpack-plugin": "^5.1.2" и добавил "workbox-window": "^5.1.2" для связи с рабочим.
Основная идея состоит в том, чтобы отслеживать новые установки сервис-воркера и информировать пользователя о доступности новой версии.
Все это работает в Chrome версии 80.0.3987.149, но я получаю следующую ошибку в Firefox 74.0.1: во время начальной оценки рабочего скрипта необходимо добавить обработчики событий Fetch.
Конфигурация моего плагина webpack:
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true,
exclude: [/swagger-ui/],
runtimeCaching: [
{
urlPattern: /\.(?:css|js|html|json)$/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'appCache',
expiration: {
maxAgeSeconds: 60 * 60 * 24
},
broadcastUpdate: {
channelName: 'update-appCache'
}
}
},
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif|eot|ttf|woff|woff2)$/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'assetCache',
broadcastUpdate: {
channelName: 'update-assetCache'
}
}
},
{
urlPattern: /^https:\/\/fonts\.googleapis\.com/,
handler: 'StaleWhileRevalidate',
options: {
cacheName: 'google-fonts-stylesheets',
broadcastUpdate: {
channelName: 'update-googleFontsCache'
}
}
},
{
urlPattern: /^https:\/\/fonts\.gstatic\.com/,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts-webfonts',
broadcastUpdate: {
channelName: 'update-googleFontsCache'
},
cacheableResponse: {
statuses: [0, 200],
},
expiration: {
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}
}
}
]
})
Я регистрирую сервис-воркера в хуке ngOnInit моего корневого компонента angular:
import { Workbox } from 'workbox-window';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/service-worker.js');
// THIS EVENT IS LOGGED JUST FOR DEBUGGING PURPOSES
wb.addEventListener('activated', event => {
if (!event.isUpdate) {
console.log('Service worker activated for the first time!', { event });
} else {
console.log('Service worker activated!', { event });
}
});
wb.addEventListener('installed', event => {
console.log('Service worker installed!', { event });
if (event.isUpdate) {
this.confirmationService.confirm({
key: 'session',
message: `New version is available!. Click OK to refresh.`,
acceptLabel: 'OK',
accept: () => {
this.windowRef.getNativeWindow().location.reload();
}
});
}
});
// Register the service worker after event listeners have been added.
wb.register()
.then(registered => console.log({ registered }))
.catch(error => console.log({ error }));
}
Я думал, что подключение обработчиков событий к объекту Workbox перед вызовом register() в конце - это именно то, что подразумевается под сообщением об ошибке, но, видимо, я ошибаюсь.
Также я не смог найти подходящих примеров настройки плагина Workbox webpack с модулем workbox-window в приложении Angular.