Precache Firebase JS файлы с Workbox - заблокированы CORS - PullRequest
Новая
       15

Precache Firebase JS файлы с Workbox - заблокированы CORS

0 голосов
/ 06 октября 2019

Я делаю PWA, который использует Google Firebase в качестве бэкэнда. Я настроил Workbox, чтобы сделать мой Service Worker, и он правильно корректирует все нужные мне файлы ... за исключением файлов JS firebase с gstatic.com. Я использую пользовательский интерфейс Onsen, и Workbox управляет предварительным кэшированием сторонних файлов Onsen, поэтому это должно быть как-то связано с файлами Firebase.

Это теги HTML, которые включают файлы Firebase: 

<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script crossorigin="anonymous" src="https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js"></script>
<script src="/__/firebase/7.0.0/firebase-auth.js"></script>
<script crossorigin="anonymous" src="https://www.gstatic.com/firebasejs/7.0.0/firebase-analytics.js"></script>

На данный момент это работник службы Workbox: 

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded ?`);
} else {
  console.log(`Boo! Workbox didn't load ?`);
}

workbox.precaching.precacheAndRoute([
    '/index.html',
    '/auth.js',
    '/script.js',
    'https://unpkg.com/onsenui/css/onsenui.css',
    'https://unpkg.com/onsenui/css/onsen-css-components.min.css',
    'https://unpkg.com/onsenui/js/onsenui.min.js',
    '/__/firebase/7.0.0/firebase-auth.js',
    'https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js',
    'https://www.gstatic.com/firebasejs/7.0.0/firebase-firestore.js',
    'https://www.gstatic.com/firebasejs/7.0.0/firebase-analytics.js'
]);

workbox.routing.registerRoute(
    /\.(?:png|jpg|jpeg|svg|gif)$/,
    new workbox.strategies.CacheFirst({
        cacheName: 'image-cache',
    })
);

workbox.routing.registerRoute(
    /\.(?:js|css|html)$/,
    new workbox.strategies.CacheFirst({
        cacheName: 'src-cache',
    })
);

Это одна из ошибок в консоли, когда я пытаюсь запустить ее: 

Access to fetch at 'https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Uncaught (in promise) TypeError: Failed to fetch

Может ли кто-нибудь сказатьмне как это исправить пожалуйста?

1 Ответ

1 голос
/ 18 октября 2019

Проблема не в Firebase как таковой. Ваше сообщение об ошибке говорит о том, что сервер gstatic.com не предоставляет заголовки CORS для этого ресурса. Без этого заголовка CORS рабочая коробка не сможет проверять ответы для этого ресурса. Это делает кэширование очень трудным.

Здесь обсуждается, что вы пытаетесь сделать здесь (предварительное кэширование из CDN) на проблема GitHub для рабочей коробки. Соответствующее предложение звучит так:

Одна сложность заключается в том, что это должно работать только в том случае, если CDN поддерживает CORS, поскольку предварительное кэширование непрозрачных ответов и их первичное кэширование не рекомендуется.

Рабочий документ doco рассказывает больше об этой проблеме кэширования и непрозрачных ответов:

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

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

Опция 1

Если вы используете что-то вроде веб-пакета для объединения вашего кода, то вы можете не использовать CDN, а вместо этого связать код firebase с вашим приложением. Вы можете посмотреть на использование инструмента сборки для автоматического создания манифеста предварительного кэша.

Опция 2

Удалите эти атрибуты crossorigin="anonymous" из тегов <script> в вашем htmlфайл. А затем удалите эти три нижних элемента из вашего манифеста предварительного кэша (для gstatic.com/firebase ...). Это означает, что вам не понадобятся заголовки CORS, но также, что эти файлы не будут предварительно кэшироваться в смысле PWA. Они по-прежнему должны кэшироваться вашим браузером, поэтому, надеюсь, они все еще будут работать.

Кстати, я также разрабатываю PWA с использованием Onsen: D

...