Chrome v72, похоже, игнорирует заголовки Cache-Control и кэширует service-worker.js Для проверки я установил все ресурсы для использования:
res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private');
res.set('Max-Age', '0');
При переходе на localhost:4000/dist/service-worker.js я могу убедиться, что это установлено правильно:
HTTP/1.1 200 OK
X-Powered-By: Express
Cache-Control: no-store, no-cache, must-revalidate, private
Max-Age: 0
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Last-Modified: Thu, 14 Feb 2019 23:17:55 GMT
ETag: W/"3c1-168ee4d6297"
Content-Type: application/javascript; charset=UTF-8
Content-Length: 961
Vary: Accept-Encoding
Date: Thu, 14 Feb 2019 23:27:24 GMT
Connection: keep-alive
Даже при этом, начиная с Chrome 68, он по умолчанию «должен» обходить HTTP-кэш: https://developers.google.com/web/updates/2018/06/fresher-sw
Это явно не так.
Я проверил обновление при перезагрузке на вкладке «Приложения». Я закрыл Chrome и снова открыл, и он все еще использует старый service-worker.js из кеша.
Моя конфигурация рабочего ящика выглядит так:
new GenerateSW({
include: [/\.css$/, /\.js$/],
clientsClaim: true,
skipWaiting: true
}),
Я также могу убедиться, что Chrome кэширует service-worker.js, потому что если я:
Откройте новую вкладку и перейдите к: http://localhost:4000/dist/service-worker.js
Chrome фактически получает ПОСЛЕДНЮЮ версию, и теперь другая вкладка запускает событие «установить».
Предпоследний тест:
Финальный тест:
navigator.serviceWorker.register(`/dist/service-worker.js?hack=${Math.random()}`)
Конечно, теперь он подхватывает все новые обновления service-worker.js.
Это ошибка Chrome? Я что-то не так настраиваю? Такое же поведение происходит в Chrome Canary.
В качестве альтернативы я могу сделать следующее, чтобы обойти кеш:
navigator.serviceWorker
.register(`/dist/sw.js`)
.then(registration => {
registration.update();
})
Но это похоже на взлом....
🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.
В итоге возникла проблема с областью действия из-за того, что файл находился в /dist/service-worker.js, а не в корне.
Чтобы исправить проблему с областью действия, мне нужно было добавить следующий заголовок в ответ работника службы:
res.set('Service-Worker-Allowed', '/');
Тогда при регистрации:
navigator.serviceWorker.register(`/dist/sw.js`, { scope: '/' });
Огромная благодарность за эту статью: https://developers.google.com/web/tools/workbox/guides/troubleshoot-and-debug