带有Workbox的Precache Firebase JS文件-被CORS阻止

Question

我正在制作一个使用Google Firebase作为后端的PWA。我已经设置了Workbox来制作我的Service Worker，并且可以正确缓存所有我需要的文件...除了gstatic.com的firebase JS文件。我使用的是Onsen UI，并且Workbox可以预缓存Onsen 3rd party文件，因此必须与Firebase有关。

这些是包含Firebase文件的HTML标签：

<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

Anoyone可以告诉我如何解决此问题吗？

Answer 1

问题是不是Firebase这样的。您的错误消息表明gstatic.com服务器不提供该资源的CORS标头。没有该CORS标头，工作箱将无法检查该资源的响应。这使得缓存非常困难。

关于在工作区a GitHub issue上您要在此处进行的操作（来自CDN的预缓存）进行了一些讨论。相关句子是：

一个复杂的问题是，这仅在CDN支持CORS的情况下才有效，因为预先缓存不透明的响应并先提供高速缓存不是一个好习惯。

workbox doco讨论有关此缓存和不透明响应的更多信息：

此响应将缓存不透明的响应，并从那时起开始提供。问题在于，如果该请求由于任何原因而失败，Workbox将无法检测到该请求，并将继续提供无效的响应。用户将处于损坏状态。

对于您的情况，if，您可以强制工作箱从CDN缓存资源（我认为您不能这样做），那么就有机会缓存​​错误响应，或者至少工作箱不会这样做。不知道何时有新版本的资源可用，因为它无法检查响应。

选项1

如果使用的是webpack之类的代码来捆绑代码，则可以not使用CDN，但可以将firebase code捆绑到您的应用中。您可以查看使用build tool自动生成预缓存清单。

选项2

从html文件的crossorigin="anonymous"标记中删除这些<script>属性。然后从您的预缓存清单中删除前3个项目（对于gstatic.com/firebase ...）。这意味着您将不需要CORS标头，而且这些文件也不会在PWA意义上进行预缓存。不过，它们仍应由您的浏览器缓存，因此希望它仍然可以工作。

附带说明，我也在使用Onsen：D开发PWA