为 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/… 对于存储,您可以在文件上设置元数据,例如contentTypecacheControl 【参考方案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)

如何从firebase中的变量为地图添加价值?

node_modules/@angular/fire/firebase.app.module.d.ts 中的错误?

如何在 Flutter 中缓存来自 Firebase 的图像?

从 Expo 的缓存中以 base64 格式读取文件,写入 Firebase 存储(Cloud Storage for Firebase)

如何从 fire-base 为不同的产品风格 Android 生成不同的 json 文件