Ошибки рабочего ящика в Firefox: обработчики событий Fetch должны быть добавлены во время начальной оценки рабочего сценария - PullRequest
Новая
       34

Ошибки рабочего ящика в Firefox: обработчики событий Fetch должны быть добавлены во время начальной оценки рабочего сценария

0 голосов
/ 10 апреля 2020

У меня есть приложение, сгенерированное jhipster angular. Я хочу добавить работника службы. Из коробки поставляется с конфигурацией плагина Workbox Webpack Basi c. Я обновил «workbox-webpack-plugin»: «^ 5.1.2» и добавил «workbox-window»: «^ 5.1.2» для связи с рабочим.

Основная идея - слушать установки нового сервисного работника и информирование пользователя о доступности новой версии.

Все это работает в Chrome Версия 80.0.3987.149, но я получаю следующую ошибку в Firefox 74.0.1: Извлекать обработчики событий должен быть добавлен во время первоначальной оценки рабочего скрипта.

workbox- firefox -error

Моя конфигурация подключаемого модуля веб-пакета: 

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,
                        }
                    }
                }
            ]
        })

I я регистрирую работника сервиса в ловушке ngOnInit моего root 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 с модулем рабочего окна в приложении Angular.

...