使用 Workbox 预缓存 Firebase JS 文件 - 被 CORS 阻止

Question

我正在制作一个使用 Google Firebase 作为后端的 PWA。 我已经设置了 Workbox 来制作我的 Service Worker，它正在正确地预缓存我需要的所有文件......除了来自 gstatic.com 的 firebase JS 文件。 我正在使用 Onsen UI 并且 Workbox 设法预缓存 Onsen 3rd 方文件，所以它一定与 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

有人可以告诉我如何解决这个问题吗？

Answer 1

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

关于工作箱的 GitHub 问题，有一些关于您在此处尝试执行的操作（来自 CDN 的预缓存）的讨论。 相关语句是：

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

工作箱 doco更多地讨论了这个缓存和不透明响应问题：

这个响应将缓存不透明的响应并从那时起提供它。 问题是，如果该请求因任何原因失败，Workbox 将无法检测到这一点，并将继续提供损坏的响应。 用户将处于损坏的 state 中。

在您的情况下，如果您可以强制工作箱缓存来自 CDN 的资源（我认为您不能），那么它有可能会缓存错误响应，或者至少工作箱不知道什么时候有新版本的资源可用，因为它无法检查响应。

选项1

如果您使用 webpack 之类的东西来捆绑您的代码，那么您不能使用 CDN，而是将firebase 代码与您的应用程序捆绑在一起。 您可以查看使用构建工具自动生成预缓存清单。

选项 2

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

顺便说一句，我还在使用 Onsen 开发 PWA：D