Question

我在Firebase上运行PWA。我的图片文件托管在Firebase存储上。我注意到我的浏览器没有为从存储系统加载的文件保存缓存。浏览器为每个页面刷新请求文件。它会造成不必要的延迟和流量。

我可以缓存这些请求吗？

更新

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

Answer 1

存储的

a.moveToElement(driver.findElement(By.xpath("li#btnEnableEditing.LoginOkButtonFooter"))).click().perform(); a.moveToElement(driver.findElement(By.xpath("//*@id='btnEnableEditing']"))).click().perform();：https://firebase.google.com/docs/reference/js/firebase.storage.SettableMetadata#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

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

如果没有缓存，则会从Firebase存储中请求图像，如果您在文件元数据中指定了cacheControl属性，或者如果您使用带有自定义标头的Cache-Control主机，则还可以缓存图像{{ 1}}用于图像。

Answer 4

为此使用Serviceworker。

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

通过这种方式更改令牌不会影响您的缓存。

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

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

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

Answer 5

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

或

storageRef.put(file, yourMetadata)

Answer 6

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

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

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