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

Question

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

我可以缓存这些请求吗？

更新

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

Answer 1

您可以使用 Hosting 获得更好的服务，并且使用 firebase CLI 进行部署非常简单。我认为默认情况下，托管中图像的缓存控制是 2 小时，您可以使用 .json.

全局增加它

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

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

Answer 2

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

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

Answer 3

为此使用 Serviceworker。

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

这样令牌的变化不会影响你的缓存。

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

的东西

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

然后是cache.put(cacheUrl, response);

Answer 4

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

或

storageRef.put(file, yourMetadata)

Answer 5

将各个部分放在一起以备将来参考

首先，

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

然后，

storageRef.put(file, newMetadata)

Answer 6

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

访问控制台并转到 'Cloud Storage'。浏览到您的存储桶和文件，您可以在其中找到 'edit metadata'.

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

Set cache to files in Firebase Storage