Json 在PWA应用程序中缓存从Firebase存储接收的图像

我在Angular中配置了一个应用程序，配置了PWA，除了缓存

资产/图像

之外，我还希望在联机时加载Firebase存储中的图像后缓存它们

我的应用程序使用启用了数据持久性的Cloud Firestore数据库。当我需要在脱机模式下在系统上加载认证用户的化身时，它会尝试通过

photoURL

字段加载，但由于它处于脱机状态，我无法加载图像，因此图像不会显示，这对用户来说是不合法的

在我的代码中，我加载图像如下：

<img class="avatar mr-0 mr-sm-16" src="{{ (user$ | async)?.photoURL || 'assets/images/avatars/profile.svg' }}">

---

是的，这是可能的，我尝试过并为我工作，我有一个带有ionic和angular 7的pwa，在我的“ngsw config.json”中，我使用了以下配置：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**",
        "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
      ]
    }
  }],
  "dataGroups": [{
    "name": "api-freshness",
    "urls": [
      "https://firebasestorage.googleapis.com/v0/b/mysuperrpwapp.appspot.com/"
    ],
    "cacheConfig": {
      "maxSize": 100,
      "maxAge": "180d",
      "timeout": "10s",
      "strategy": "freshness"
    }
  }]
}

本文很好地解释了如何工作以及可以使用哪些策略

在测试中，为“服务工作者”启动建立有效的https连接非常重要。脱机后，您可以看到该文件来自“service_worker”

就这么做吧

storage.ref("pics/yourimage.jpg").updateMetatdata({ 'cacheControl': 'private, max-age=15552000' }).subscribe(e=>{ });

在您的ngsw-config.json中

"assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ],
      "url":[
        "https://firebasestorage.googleapis.com/v0/b/*"
      ]
    }
  }

---

好的，我试试这个；）只是一个问题，图像是通过保存在Firestore中的URL加载的，这是Firebase Storage在上载文件时提供的下载URL。这个图像会加载吗？你是说函数“getDownloadURL（）”？，当我处于脱机模式时，这个函数返回相同的URL，如果它在联机时至少执行过一次，但我不确定它是如何工作的。getDownloadURL（）函数我只在图像上载完成时调用，在得到保存在Firestore中的URL后，在我的应用程序中，我得到了保存在Firestore中的photoURL字段的值。我认为这不起作用。重要的是要澄清，加载到firebase的图像有一个默认的“缓存控制”元数据，它是“私有的，最大年龄=0”，这意味着它不能通过反浏览器缓存，并且需要为每个请求下载，要解决这一问题，您需要更改如下内容：“ref.updateMetadata({'cacheControl'：'private，max age=15552000'}）“否则，“服务人员”将尝试从网络下载图像，并得到一个错误“504网关时间”输出“cacheControl”-信息值黄金。将其添加到我的“resize”-函数（基本上操作我应用程序中的每个图像）后，一切都很顺利。谢谢！

"assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js"
      ],
      "url":[
        "https://firebasestorage.googleapis.com/v0/b/*"
      ]
    }
  }