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

Question

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

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

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

Answer 1

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

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

2. , чтобы убедиться, что это никогда не будет обойдено, я также установил Заголовки политики безопасности содержимого (а также метатеги, если приложение размещено где-то, где заголовки не могут быть легко установлены), поэтому этот браузер знает, что мое приложение не может получить доступ к Google CDN (или что-то еще на самом деле, за некоторыми исключениями, которые находятся под моим контролем).

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

Answer 2

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

Самый простой подход - получить файлы черезКоманда copyLibraries рабочей области или 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