Vue PWA Precache-манифест или ссылка на предварительную выборку HTML - PullRequest
0 голосов
/ 24 октября 2019

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

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

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

Спасибо!

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

enter image description here

Префиксный манифест в service-worker.js:

enter image description here

1 Ответ

0 голосов
/ 27 октября 2019

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...