Я создаю PWA, где я хотел бы дополнительно загружать и кэшировать ВСЕ мультимедийные ресурсы, используемые в приложении, если пользователь этого хочет. Поведение PWA по умолчанию кэширует ресурсы только тогда, когда они запрашиваются при перемещении по приложению. Мне нужно предложить функциональность, чтобы нажать кнопку, загрузить ресурсы, go в автономном режиме и использовать все приложение, и чтобы все ресурсы кэшировались без необходимости посещать различные маршруты и представления в режиме онлайн.
Для контекста, при загрузке приложения Vuex извлекает содержимое JSON из моего API, переводит его в состояние и сохраняет в IndexedDB.
Если пользователь нажимает кнопку «загрузить все», я хочу проанализировать JSON в $ store.state соберите URL-адреса (изображения, PDF-файлы и MP4-файлы) в массив и передайте этот массив в ServiceWorker для преднамеренного кэширования всех ресурсов по этим URL-адресам для автономного использования (до допустимого предела хранения источника).
Я использую Vue CLI и плагин Vue PWA, поэтому у меня есть файл registerServiceWorker. js Файл и предварительный кэш-манифест созданы для производства.
Я нахожу информацию о inte rnet об этом немного сбивает с толку, я думал использовать подход, обозначенный https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker, но я не уверен насчет некоторых спецификаций ifics, а также не знаете, как решить эту проблему так, чтобы она хорошо сочеталась с Vue рабочим процессом CLI?
Если возможно, можете ли вы включить в свой ответ следующие вопросы:
Должен ли я использовать GenerateSW или InjectManifest?
Нужно ли мне писать свой собственный Service Service Worker или я могу подключиться к методам жизненного цикла (register (), cached ()? , обновлено ()) в registerServiceWorker. js?
Заранее благодарю за помощь.