为 Firebase 存储中的文件设置缓存答案

【问题标题】：Set cache to files in Firebase Storage为 Firebase 存储中的文件设置缓存
【发布时间】：2017-10-22 19:12:27
【问题描述】：

我有一个在 Firebase 上运行的 PWA。我的图像文件托管在 Firebase 存储上。我注意到我的浏览器没有为从存储系统加载的文件保存缓存。浏览器会在每次页面刷新时请求文件。这会导致不必要的延误和交通。

我可以缓存这些请求吗？

更新

根据这些answer，我不应该使用 Firebase 存储来托管我网站上的文件。只是为了管理用户的下载和上传。这是正确的吗？

【问题讨论】：

【解决方案1】：

您可以通过 Hosting 获得更好的服务，并且使用 firebase CLI 进行部署非常简单。我认为默认情况下，托管中图像的 Cache-Control 为 2 小时，您可以使用 .json 全局增加它。

托管可以扩展您的网站并将其移动到更接近需求的不同边缘节点。存储仅限于存储桶，但您可以为欧洲指定一个存储桶，为中国指定一个存储桶，为北美指定一个存储桶，等等。

存储更适合用户文件上传，托管更适合静态内容（尽管我认为他们正在推出具有云功能的动态托管）

【讨论】：

谢谢，兄弟！你帮了很多忙！ :D
在这个答案中，“托管”是指 Firebase 托管，“存储”是指 Firebase 存储。两者都是 Firebase 提供的服务。只是为了清楚起见。
我遇到了同样的问题，并找到了通过 Firebase Hosting 提供云存储文件的解决方案。现在我们可以从这两种产品中获益。 :) dev.to/dbanisimov/building-image-cdn-with-firebase-15ef

【解决方案2】：

将这些部分放在一起以供将来参考

首先，

// Create file metadata to update
var newMetadata = {
  cacheControl: 'public,max-age=4000',
}

那么，

storageRef.put(file, newMetadata)

【讨论】：

【解决方案3】：

storageRef.updateMetadata(yourMetadata) 可能是您需要的解决方案。

或

storageRef.put(file, yourMetadata)

【讨论】：

【解决方案4】：

为了补充答案，您还可以使用服务工作者，可能使用workbox，使用cacheFirst 策略将所有图像缓存到用户浏览器中。然后，在第一次缓存之后，图像将首先从本地缓存中加载。

如果没有缓存，则将从 Firebase 存储请求图像，如果您在文件元数据中指定 cacheControl 属性，或者如果您使用带有自定义标头 Cache-Control 的 Firebase 托管，则图像也可以被缓存。图片。

【讨论】：

我也在为此使用工作箱，但是您可能需要在工作箱中使用 staleWhileRevalidate 或 networkFirst 策略，因为您正在请求第三方文件。 developers.google.com/web/tools/workbox/guides/…

【解决方案5】：

为此使用 Serviceworker。

您可以将没有令牌的网址保存在缓存中，然后再获取它们。

这种方式的令牌更改不会影响您的缓存。

要在没有令牌的情况下进行缓存，请使用类似

cacheUrl = url.origin + url.pathname.substr(0, url.pathname.length - urlPath.length) + urlPath;

然后cache.put(cacheUrl, response);

【讨论】：

【解决方案6】：

此外，可以更改访问 Google Cloud Console 的现有资源的缓存控制。（因此，不需要使用缓存元数据重新上传）

访问控制台并转到“云存储”。浏览到您的存储桶和文件，您可以在其中找到“编辑元数据”。

这里可以放缓存控制策略：

【讨论】：