Как vue PWA использует предварительный кеш? Я все еще получаю "Страница не работает в автономном режиме"

Question

У меня есть приложение vue, которое я обновил, чтобы иметь возможность PWA. Он использует службу обмена сообщениями Firebase, которая заменила работника службы своим собственным файлом Firebase-Messaging-SW. js. Сервисный работник зарегистрирован, активен и работает, я добавил pwa в файл vue .config. js, чтобы он генерировал манифест. json. Когда вы создаете рабочую версию приложения, следующий код добавляется к вершине работника сервиса.

importScripts("precache-manifest.7b51ac9589a6dc8041a85d8f1792defa.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

Из того, что я вижу, percache работает нормально.

Если этого достаточно заставить сайт работать в автономном режиме?

Нужно ли мне добавлять управление кешем самостоятельно?

Чего мне не хватает, потому что я все еще получаю сообщение об ошибке «Страница не работает в автономном режиме» в Chrome инструментах разработчика на вкладке манифеста приложения.

Answer 1

Вам нужно добавить эту строку в сервисную мастерскую. Это заставляет браузер думать, что страница будет работать в автономном режиме:

self.addEventListener('fetch', function(event) {}) // add this to fool it into thinking its offline ready