Манифест Vue PWA Precache и ссылка на предварительную выборку HTML

Мне интересно, когда я создаю приложение Vue PWA с использованием интерфейса командной строки и позволяя всей конфигурации использовать значения по умолчанию, мое созданное приложение:

  • предварительная выборка всех фрагментов при начальной загрузке с использованием ссылок предварительной выборки HTML
  • предварительное кэширование всех фрагментов с помощью механизма PWA Workbox

Как эти два механизма взаимодействуют и следует ли отключить один из них?

Благодарность!

Механизм предварительной загрузки в index.html <HEAD>:

Манифест прекэширования в service-worker.js:

1 ответ

Они сталкиваются. Браузер загружает их несколько раз.

Скорее всего, происходит следующее (я говорю, скорее всего, потому, что ссылка предварительной выборки является подсказкой для браузера, и разные браузеры могут реализовать ее использование разными способами и приоритетами):

  1. Браузер получает HTML
  2. Браузер видит ссылки предварительной выборки
  3. В какой-то момент браузер начинает загружать ссылки для дальнейшего использования
  4. Когда Service Worker зарегистрирован, он предварительно кеширует все те же активы
  5. При более поздних посещениях / перезагрузках страницы все активы поступают из кеша ПО и ничего не загружается снова.

Двойная загрузка происходит из-за того, что функция предварительного кеширования SW использует очистку кеша и пытается загрузить такие ресурсы, как /realname.hash.js?bla=hash_in_the_manifest_file поэтому даже если ваши файлы уже содержат хеш-значения в своих именах, механику предварительного кеширования это не устраивает.

На самом деле, если вы посмотрите документацию плагина предварительного кэширования Workbox, вы увидите, что они предлагают вам отказаться от проверки версии (хэша), если вы уже используете хеш-значения в именах файлов.

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