在Firebase Storage中将缓存设置为文件

Question

在Firebase Storage中将缓存设置为文件

javascriptjsoncachingfirebasefirebase-storage

38

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

我编写的JS脚本从Firebase存储的下载链接加载文件，例如：https://firebasestorage.googleapis.com/v0/b/discipulado-7b14b.appspot.com/o/book3.png?alt=media&token=65b2cde7-c8a4-45da-a743-401759663c17。我能否缓存这些请求？

更新

根据这篇回答，我不应该使用Firebase Storage来托管我的网站中的文件，只能用于管理用户上传和下载。这是正确的吗？

- bodruk

2

https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl - James Poag

1

对于存储，您可以设置文件的元数据，例如 contentType 或 cacheControl。 - James Poag

6个回答

14

将来在这里参考需要将所有的部分组合起来

首先，

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

那么，

storageRef.put(file, newMetadata)

- Max

现在已经被弃用了。您需要使用 putFile() 代替。 - progNewbie

1

使用 Firebase 9，您需要设置 updateMetadata(imageRef, newMetadata)。 - Marco

5

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

详情请参考：https://firebase.google.com/docs/storage/web/file-metadata#update_file_metadata 或者使用 storageRef.put(file, yourMetadata) 详情请参考：https://firebase.google.com/docs/storage/web/upload-files#upload_files

- Ruslan

4

此外，您可以通过访问Google Cloud控制台更改现有资源的缓存控制（因此无需重新上传缓存元数据）。

访问控制台并转到“Cloud Storage”。浏览到您的存储桶和文件，在那里找到“编辑元数据”。

在这里，您可以设置缓存控制策略：

- Vagner Gon

3

所以，如果你像我一样尝试在Firebase控制台中找到它 - 它不在那里。关键是通过Google的Cloud控制台访问文件，而不是通过Firebase控制台... - Ronen Rabinovici

3

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

如果没有缓存，则会从Firebase Storage请求图像，其中如果在文件元数据中指定了cacheControl属性或者使用了自定义头Cache-Control的Firebase Hosting来缓存图像，则也可以缓存图像。

- Diego R. Antunes

1

我也在使用Workbox，但由于您正在请求第三方文件，您可能需要采用staleWhileRevalidate或networkFirst策略。https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests - Alex Kimoto

2

使用Serviceworker可以实现这一功能。

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

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

要缓存而不带令牌，请使用类似以下的内容。

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

然后执行 cache.put(cacheUrl, response);。

- Haim763

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Poag · Accepted Answer

Storage的cacheControl: https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl

使用Hosting会获得更好的服务，而使用Firebase CLI进行部署非常简单。我想默认情况下Hosting中图像的Cache-Control是2小时，您可以在 .json 中全局增加它。

https://firebase.google.com/docs/hosting/full-config#headers

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

存储更适合用户文件上传，而Hosting适用于静态内容（虽然他们正在推出带有云函数的动态Hosting）。