Около года я использовал метод Дирка для обновления сервис-воркера в своем React-приложении на основе шаблона create-react-app, и он отлично работал. Однако месяц назад он неожиданно сломался.

Примечание. Если вас не волнует моя проблема, прокрутите вниз, чтобы узнать, как я рекомендую вам реализовать механизм обновления в вашем новом проекте create-react-app.

Когда я развернул новую версию своего приложения React, произошло следующее:

  • Запустился новый сервис-воркер (рядом со старым).
  • Код, использованный в образце Дирка, обнаружил новую версию и показал диалоговое окно обновления.
  • При нажатии на эту кнопку обновления кеши очищались и происходило обновление страницы. Однако новый сервис-воркер не активировался, пока не были закрыты все вкладки.
  • Таким образом, он по-прежнему использует старый сервис-воркер, который пытается обслуживать старый контент. Однако кеши очищаются, и в браузере больше нет содержимого файлов JavaScript.
  • Поэтому браузер пытается перезагрузить эти файлы с сервера. Однако он больше не может найти файл на моем сервере, потому что в новой версии моего приложения есть новые файлы JavaScript с разными версиями в имени файла. В моем случае файлы JavaScript выглядели так:

Это приводило к всевозможным ошибкам.

В Chrome есть инструменты разработчика, которые могут показать вам, что новый сервис-воркер ожидает, и вы можете нажать кнопку skipWaiting, чтобы активировать сервис-воркера самостоятельно:

Итак, как решить эту проблему? В этом посте показано, как создать очень простой диалог обновления, который отправляет событие SKIP_WAITING новому сервис-воркеру, когда вы нажимаете кнопку обновления, а затем перезагружает страницу.

Я лично даже пошел дальше и удалил диалоговое окно обновления, чтобы просто всегда сразу активировать нового сервисного работника.

Вот как максимально просто реализовать механизм автоматического обновления:

  • Создайте приложение create-реагировать с помощью следующей команды: npx create-react-app update-service-worker --template typescript
  • Создавайте все с npm install
  • В файле serviceWorker.ts экспортируйте определение типа конфигурации в строке 23:

  • Обновите файл index.tsx следующим образом:
  • Создайте свой проект с помощью npm run build и загрузите содержимое своего сервера сборки на свой веб-сервер.

Смотрите мой полный исходный код в моем репозитории GitHub.