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

Question

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

我可以缓存这些请求吗？

更新

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

Answer 1

cacheControl

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

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

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

Answer 2

将这些片段放在一起以供将来参考

首先，

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

那么，

storageRef.put(file, newMetadata)

Answer 3

storageRef.updateMetadata(yourMetadata)

可能是您需要的解决方案。

或

storageRef.put(file, yourMetadata)

Answer 4

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

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

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

Answer 5

为了补充答案，您还可以使用服务工作者，也许使用 workbox，并使用

cacheFirst

策略将所有图像缓存到用户浏览器中。然后，在第一次缓存之后，图像将首先从本地缓存加载。

如果没有缓存，则将从 Firebase Storage 请求图像，如果您在文件元数据中指定

cacheControl

属性，或者如果您使用带有自定义图像标头

Cache-Control

的 Firebase 托管，也可以在其中缓存图像。

Answer 6

为此使用 Serviceworker。

您可以将不带令牌的网址保存在缓存中，并在以后获取它们。

这样令牌的更改不会影响您的缓存。

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

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

然后

cache.put(cacheUrl, response);