为 Firebase 存储中的文件设置缓存
Posted
技术标签:
【中文标题】为 Firebase 存储中的文件设置缓存【英文标题】:Set cache to files in Firebase Storage 【发布时间】:2017-10-22 19:12:27 【问题描述】:我有一个在 Firebase 上运行的 PWA。我的图像文件托管在 Firebase 存储上。我注意到我的浏览器没有为从存储系统加载的文件保存缓存。浏览器会在每次页面刷新时请求文件。这会导致不必要的延误和交通。
我的 JS 脚本从 Firebase 存储的下载链接加载文件,例如:https://firebasestorage.googleapis.com/v0/b/discipulado-7b14b.appspot.com/o/book3.png?alt=media&token=65b2cde7-c8a4-45da-a743-401759663c17。
我可以缓存这些请求吗?
更新
根据这些answer,我不应该使用 Firebase 存储来托管我网站上的文件。只是为了管理用户的下载和上传。这是正确的吗?
【问题讨论】:
firebase.google.com/docs/reference/js/… 对于存储,您可以在文件上设置元数据,例如contentType
或cacheControl
【参考方案1】:
cacheControl
用于存储:https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#cacheControl
您可以通过 Hosting 获得更好的服务,并且使用 firebase CLI 进行部署非常简单。我认为默认情况下,托管中图像的 Cache-Control 为 2 小时,您可以使用 .json 全局增加它。
https://firebase.google.com/docs/hosting/full-config#headers
托管可以扩展您的网站并将其移动到更接近需求的不同边缘节点。存储仅限于存储桶,但您可以为欧洲指定一个存储桶,为中国指定一个存储桶,为北美指定一个存储桶,等等。
存储更适合用户文件上传,托管更适合静态内容(尽管我认为他们正在推出具有云功能的动态托管)
【讨论】:
谢谢,兄弟!你帮了很多忙! :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)
【讨论】:
现在已弃用。您需要改用putFile()
。
使用 firebase 9,你必须设置 updateMetadata(imageRef, newMetadata);【参考方案3】:
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
【讨论】:
【参考方案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 的现有资源的缓存控制。 (因此,不需要使用缓存元数据重新上传)
访问控制台并转到“云存储”。 浏览到您的存储桶和文件,您可以在其中找到“编辑元数据”。
这里可以放缓存控制策略:
【讨论】:
以上是关于为 Firebase 存储中的文件设置缓存的主要内容,如果未能解决你的问题,请参考以下文章
Firebase 存储上传图像不适用于亚马逊火灾(型号:Fire 7)
node_modules/@angular/fire/firebase.app.module.d.ts 中的错误?
如何在 Flutter 中缓存来自 Firebase 的图像?
从 Expo 的缓存中以 base64 格式读取文件,写入 Firebase 存储(Cloud Storage for Firebase)