Как настроить Workbox в приложении на основе Create-React-App?

Я использую приложение Create-React-App (CRA), которое по умолчанию регистрирует сервис-воркеры (используя workbox) и хотел бы оставить их включенными, если это возможно. Однако я абсолютно не могу разрешить моему приложению загружать какие-либо внешние источники, но Workbox в CRA по умолчанию загружает workbox-sw.js из Google CDN (как показано в этот вопрос).

В настоящее время я использую заголовки Content Security Policy, чтобы убедиться, что запрос заблокирован, но это, конечно, приводит к записи сообщения об ошибке, и я мог бы вообще не регистрировать сервис-воркеров.

Как настроить приложение на использование только локального JS, желательно без извлечения?


webpack create-react-app service-worker
person johndodo    schedule 18.01.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Использование локальных файлов Workbox вместо CDN Если вы не хотите использовать CDN, достаточно просто переключиться на файлы Workbox, размещенные в вашем собственном домене.

Самый простой подход — получить файлы с помощью команды copyLibraries workbox-cli или из выпуска GitHub, а затем указать workbox-sw, где найти эти файлы, с помощью параметра конфигурации modulePathPrefix.

Если вы поместите файлы в папку / Third_Party/workbox/, вы будете использовать их следующим образом:

importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({
modulePathPrefix: '/third_party/workbox/'
});

При этом вы будете использовать только локальные файлы Workbox.

предварительная ссылка https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_local_workbox_files_instead_of_cdn

person sancelot    schedule 01.02.2019
comment
@sancelot Спасибо, но куда мне это положить? package.json, registerServiceWorker.js или где-то еще? Я не вижу ссылок на workbox ни в одном из файлов, которые я могу редактировать в Create-React-App... Я что-то упустил? - person johndodo; 01.02.2019
comment
Эта ветка объясняет это medium.com/la-creative%C3%ADa/ - person sancelot; 04.02.2019
comment
@sancelot Я не думаю, что эта тема объясняет это достаточно. Может ли кто-нибудь опубликовать ответ на этот вопрос в самом Stackoverflow? спасибо! - person barnone; 03.11.2020

arrow_upward
1
arrow_downward

Я не нашел подходящего решения для этого, поэтому в итоге я использовал два механизма для достижения аналогичного эффекта:

  1. Сценарий сборки CI заменяет ссылку на Google CDN на локальный URL:
sed -i -e 's#https://storage[.]googleapis[.]com/workbox-cdn/releases/[0-9.]*/workbox-sw.js#/workbox/workbox-sw.js#g' build/service-worker.js
  1. чтобы убедиться, что это никогда не будет обойдено, я также установил политику безопасности контента заголовки (а также метатеги, если приложение размещено где-то, где заголовки не могут быть легко установлены), чтобы браузер знал, что мое приложение не может получить доступ к Google CDN (или к чему-либо еще на самом деле, с несколькими исключения, которые находятся под моим контролем).

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

person johndodo    schedule 02.02.2019
comment
Мне любопытно, порекомендует ли это общее сообщество React? Я думаю, что CRA предоставит более элегантное решение для объединения библиотеки Workbox в мой пакет JS... - person barnone; 03.11.2020