Старый сервисный работник кэширует предыдущий сайт

Содержание

Вопрос или проблема
Ответ или решение
Проблема с кэшированием
Основные моменты вашего случая:
Шаги для решения проблемы
Долгосрочные решения

Вопрос или проблема

У меня был старый сайт, созданный на Gatsby, который использовал gatsby-plugin-offline для кэширования страницы с помощью сервисного рабочего. Я создал новый сайт (на NextJS), который теперь развернут на том же URL через Netlify.

Некоторые пользователи, пытаясь посетить сайт, вместо этого видят пустой экран с ошибками. Эти ошибки отображаются в консоли:

Это связано с тем, что сервисный рабочий gatsby-plugin-offline обслуживает кэшированную версию старого сайта:

Если я разверну старый сайт, он отображается правильно (так как активы, которые ищет кэшированный сайт, теперь доступны), однако он не показывает последнюю версию, только старую кэшированную версию.

Это означает, что даже если я обновлю скрипт sw.js, чтобы удалить любые сервисные рабочие (через gatsby-plugin-remove-serviceworker или другим способом), новая версия скрипта не подбирается.

Я также пытался добавить этот скрипт sw.js в корень своего приложения NextJS (в /public), но снова он не подбирается.

Пострадавшие пользователи могут увидеть новый скрипт sw.js, посетив /sw.js в своем браузере, но увы, при посещении сайта он не подбирается.

Я также также пытался добавить это в мой netlify.toml, снова безуспешно

[[headers]]
  for = "/sw.js"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

Сделав жесткое обновление, отображается правильный сайт, но затем при обычном обновлении снова отображается старый сайт.

Очевидно, я могу удалить сервисный рабочий на своем компьютере в инструментах разработчика, но это не поможет всем пользователям, испытывающим эту проблему.

Инструменты разработчика говорят, что сервисный рабочий был получен в июне, он когда-нибудь просто умрет естественной смертью?

Таким образом, суть проблемы заключается в:

Есть зомби-сервисный рабочий, который обслуживает старую версию страницы
Не удается запустить обновленный код SW, так как каждый раз обслуживается одна и та же кэшированная страница
Как я могу убедиться, что пользователи видят последнюю страницу, а не старую кэшированную версию

Я действительно в замешательстве. Буду очень признателен за любые предложения.

Ответ или решение

Кэширование старых веб-сайтов с помощью сервис-воркеров, особенно после обновления сайта, может вызвать серьезные проблемы, как это показано в вашем случае. Обсудим шаги, которые помогут вам устранить проблему и обеспечить пользователей последней версией вашего сайта.

Проблема с кэшированием

Проблема заключается в том, что старый сервис-воркер, созданный с помощью плагина gatsby-plugin-offline, продолжает кэшировать устаревшие ресурсы вашего сайта, что приводит к отображению старой версии при каждом новом запросе. При этом даже после развертывания новой версии на Next.js пользователи видят только кэшированные версии.

Основные моменты вашего случая:

«Зомби» сервис-воркер – старый сервис-воркер продолжает активным образом работать, что вызывает ошибки.
Обновленный sw.js не загружается – причинами могут быть неправильная конфигурация кэширования или задержки в обновлении сервис-воркера.
Проблема с обновлением – ваши пользователи видят старые страницы даже после обновления.

Шаги для решения проблемы

Удаление старого сервис-воркера:
Чтобы ускорить удаление старого сервис-воркера, вы можете воспользоваться следующими методами:
- Добавьте в код нового приложения специальный скрипт для удаления старого сервис-воркера. Это можно сделать даже в центре вашего нового приложения Next.js. Например, вы можете добавить следующий код в useEffect при загрузке компонента:
```
useEffect(() => {
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.getRegistrations().then(registrations => {
   registrations.forEach(registration => {
     registration.unregister();
   });
 });
}
}, []);
```
Настройка заголовков кэширования в Netlify:
Ваша попытка настроить Cache-Control для sw.js — правильный шаг. Убедитесь, что вы используете правильные заголовки и закладываете в их параметры, позволяющие браузеру игнорировать кэш. Попробуйте дополнительно добавить:
```
[[headers]]
 for = "/*"
 [headers.values]
   Cache-Control = "no-cache, no-store, must-revalidate"
```
Пользовательское уведомление:
Информируйте ваших пользователей о необходимости очистки кэша. Создайте баннер или всплывающее окно, чтобы уведомить их о том, что они должны очистить кэш в своем браузере. Это может помочь временным пользователям, которые столкнутся с проблемами кэширования.
Проверка наличия нового sw.js:
Убедитесь, что новый sw.js правильно загружается и активируется. Проверьте логи на наличие ошибок в консоли браузера, связанных с загрузкой или активацией сервис-воркера. Во время отладки отключите проблемный старый сервис-воркер в консоли разработчика и обновляйте страницу, чтобы убедиться, что обновленные ресурсы корректно загружаются.

Долгосрочные решения

Версионирование сервис-воркера: Каждый раз, когда вы развертываете сайт, можно добавлять версию в имя файла сервис-воркера или использовать другие методы его версионирования. Это поможет браузеру определить, что необходимо обновить старый сервис-воркер.
Кэширование ресурсов: Используйте более утонченные настройки кэширования, чтобы гарантировать, что такие важные изменения, как обновления сайта, всегда будут доступны пользователю.

Проблема с кэшированием сервис-воркера может быть непростой задачей, но следуя предложенным шагам, вы сможете устранить «зомби» сервис-воркеры и обеспечить пользователям доступ к актуальной версии вашего сайта.