Ошибка при попытке использовать локальные файлы workbox вместо CDN

#service-worker #workbox

#service-worker #workbox

Вопрос:

Ситуация следующая, я использую workbox для предварительного кэширования файлов. Это работает локально, но когда я загружаю свои изменения на реальную веб-страницу. Я получаю следующую ошибку:

workbox-sw.js:1 Отказался загружать скрипт https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-routing.prod.js , поскольку он нарушает следующую директиву политики безопасности содержимого: «default-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ data: https://api.paguetodo.com https://static.paguetodo.com .

Обратите внимание, что ‘script-src-elem’ явно не задан, поэтому ‘default-src’ используется в качестве запасного варианта

Итак, что я пытался сделать, это использовать локальные файлы Workbox вместо CDN. Когда я выполняю команды, все кажется нормальным, и файлы добавляются в мой проект, но когда я пытаюсь импортировать их таким образом в свой файл service worker:

 importScripts('workbox-v6.0.0/workbox-sw.js');
workbox.setConfig({
  modulePathPrefix: 'workbox-v6.0.0/'
});
 

Я получаю следующую ошибку в браузере:

 Strategy.js:143 Uncaught (in promise) TypeError: this.q is not a function
    at w.v (Strategy.js:143)
 

Комментарии:

1. Просто измените свой CSP на default-src 'self' 'unsafe-inline' 'unsafe-eval' data: https://api.paguetodo.com https://static.paguetodo.com https://storage.googleapis.com . Это позволит загрузить workbox-routing.prod.js скрипт.

2. Возможно, вы захотите изучить developers.google.com/web/tools/workbox/guides/using-bundlers в качестве альтернативного способа использования Workbox, не полагаясь на загрузку дополнительных скриптов.