Ошибки 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.

Workbox-firefox-error

Конфигурация моего плагина 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.

0 ответов

Другие вопросы по тегам