Активы, загруженные из сети при запуске из тега скрипта

Question

Я использую workbox с workbox-webpack-plugin для кеширования некоторых ресурсов. Моя текущая конфигурация должна кешировать два файла:.js и.css. Оба файла кэшируются должным образом, но проблема в том, что браузер все еще загружает их из сети, и я понятия не имею, почему.

Вот плагин workbox в моей конфигурации webpack, который генерирует работника сервиса:

new GenerateSW({
  swDest: 'service-worker.js',
  importWorkboxFrom: 'local',
  chunks: ['myChunk'],
  skipWaiting: true,
  clientsClaim: true,
  ignoreUrlParametersMatching: [/.*/],
  cacheId: 'myCacheId',
}),

Вот сгенерированный сервисный работник:

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://xxx
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://xxx
 */

importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});

importScripts(
  "precache-manifest.14645da973669ef1d2247d1863e806bd.js"
);

workbox.core.setCacheNameDetails({prefix: "myCacheId"});

workbox.skipWaiting();
workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://xxx
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {
  "ignoreUrlParametersMatching": [/.*/]
});

И доказанный манифест:

self.__precacheManifest = [
  {
    "revision": "9b22d66a17276ac21d45",
    "url": "myChunk.js"
  },
  {
    "revision": "9b22d66a17276ac21d45",
    "url": "myChunk.css"
  }
];

Предварительное кэширование действительно работает, но похоже, что событие извлечения не перехватывается работником службы. Если я попытаюсь загрузить файлы прямо из адресной строки в Chrome, файл будет загружен корректно из сервисной службы. Но когда он загружается из script тег моей страницы, он все еще загружается из сети.

Вот заголовок запроса при загрузке из тега script:

GET /assets/myChunk.js?1546600720154 HTTP/1.1
Host: localhost:5000
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */*
Referer: http://localhost:5000/xxx
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr-BE;q=0.8,fr;q=0.7,te-IN;q=0.6,te;q=0.5
Cookie: visitor_id=f86c312d-76e2-468d-a5c5-45c47fa3bbdc

Любая помощь будет отличной!

Answer 1

Согласно приведенному вами фрагменту HTTP-трафика, ваш <script> пометить результаты в запросе на /assets/myChunk.js?1546600720154, 1546600720154 Бит параметра запроса вызывает несоответствие при попытке сопоставить этот запрос с предварительно кэшированными URL-адресами.

Я бы предложил одну из двух вещей:

1. Сконфигурируйте веб-пакет для добавления хэша контента как части ваших URL-адресов и используйте его в качестве временных параметров URL-адреса для очистки кэша. Workbox должен иметь возможность просто читать эти хешированные URL как есть.

2. Продолжайте использовать параметр запроса URL-адреса на основе времени для очистки кэша, но настройте Workbox так, чтобы он игнорировал эти параметры при определении соответствия с предварительно кэшированными URL-адресами. Вы можете сделать это с помощью ignoreUrlParametersMatching вариант. Требуется массив RegExp с, и что-то вроде ignoreUrlParametersMatching: [/^\d+$/] было бы достаточно, чтобы Workbox игнорировал любые параметры запроса, состоящие исключительно из чисел.

Я бы, наверное, пошел с вариантом 1, если бы вы могли.