Как настроить Service Worker с React для предотвращения необнаруженной синтаксической ошибки в новых развертываниях в AWS CloudFront - PullRequest
Новая
       24

Как настроить Service Worker с React для предотвращения необнаруженной синтаксической ошибки в новых развертываниях в AWS CloudFront

0 голосов
/ 12 мая 2019

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

Я использую create-реагировать-приложение v2 с sw-precache.Сборки проходят через CircleCI для отправки новых файлов в S3, которые в свою очередь обслуживаются из CloudFront.Последний шаг сборки - сделать недействительным предыдущий дистрибутив CloudFront.

Проблема, с которой я сталкиваюсь, заключается в том, что при развертывании новой сборки и обновлении сервисного работника загрузка следующей страницы вызывает ошибку, посколькуфайлы комплекта, которые обслуживаются работником службы, больше не существуют.Чтобы сказать это снова, я могу загрузить сайт на www.example.com, но если я открою новую вкладку и загрузлю www.example.com/test, я получу Uncaught Syntax Error.

Несколько замечаний о моей настройке.

  1. Я создал поведение в CloudFront для установки Minimum and Maximum TTL для service-worker.js на 0.

  2. Для моих sw-precache-config.js, вот мои настройки: 

module.exports = {
  staticFileGlobs: [
    'build/index.html',
    'build/static/css/**.css',
    'build/static/js/**.js'
  ],
  swFilePath: './build/service-worker.js',
  stripPrefix: 'build/',
  handleFetch: false,
  runtimeCaching: [...]
}
Когда я загружаю первую страницу после сборки, для index.html я вижу следующий ответ: Status Code: 200 OK (from ServiceWorker)

Я предполагаю, что файл index.html не должен бытькэшируется сервисным работником.Но если я это сделаю, я не потеряю свои автономные возможности?Должен ли я установить runtimeCaching для index.html равным networkFirst, чтобы я всегда мог запрашивать его, но возвращался к кешу в автономном режиме?Если это так, будет ли это выглядеть так: 

runtimeCaching: [
    urlPattern: '/index.html',
    handler: 'networkFirst'
]

Некоторые из вещей, которые я пробовал, но у меня не получилось, включают показ сообщения пользователям для перезагрузки, когда это происходит (технически работает, но пользовательский опытне оптимально).Также посмотрел на skipWaiting: false вариант, но продолжал видеть ту же ошибку на новых сборках.

1 Ответ

1 голос
/ 13 мая 2019

Ваша проблема может быть связана с кэшированием service-worker.js в пользовательских браузерах , поэтому при развертывании новой версии старый сервисный работник все еще кэшируется в пользовательских браузерах.

Минимальный и максимальный TTL для служебного рабочего файла не должны быть 0. Вы всегда должны кэшировать его на границе Cloudfront, поскольку вы можете запускать запросы на аннулирование для очистки краевого края Cloudfront после нового развертывания.

Возможно, проблема связана с кешем в пользовательских браузерах . Вы можете попытаться удалить заголовки кэша для файлов service-worker.js при загрузке файлов в корзину. Возможно, вы захотите увидеть разницу между кешем в CloudFront и кешем в пользовательских браузерах.

Я написал статью о том, как и как развертывать одностраничные приложения и устранять проблемы с кешем. Пожалуйста, посмотрите на: https://medium.com/@lucashfreitas1/full-tutorial-guide-deploy-manage-and-deal-with-cache-on-spas-angular-react-vue-using-aws-566394f4f41e

Я также говорю о sw-precaching для одностраничных приложений в статье:

Частота обновления JavaScript работника службы (каждые 24 часа?) , https://github.com/GoogleChromeLabs/sw-precache/issues/332

...