Chrome кэширует service-worker.js даже с Cache-Control: no-store, no-cache Max-Age: 0

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 фактически получает ПОСЛЕДНЮЮ версию, и теперь другая вкладка запускает событие «установить».

  • На другой вкладке теперь находится последний сервисный работник.

Предпоследний тест:

  • Зарегистрировать service-worker.js
  • Внесите изменения, переименуйте service-worker.js в sw.js (зарегистрируйте sw.js)
  • Перейдите к http://локальный: 4000 и убедитесь, что он все еще использует кэшированный service-worker.js.
  • Перейдите к http://localhost:4000/dist/service-worker.js -> 404 Таким образом, даже если его больше не существует, он использует кешированную версию.

Финальный тест:

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.


1 259
1

Ответ:

В итоге возникла проблема с областью действия из-за того, что файл находился в /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