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

Question

我在Angular中有一个配置了 PWA 的应用程序，除了缓存之外，assets/images我还想在在线时加载Firebase 存储中的图像时对其进行缓存。

我的应用程序使用启用了数据持久性的Cloud Firestore数据库。当我需要在离线模式下在系统上加载经过身份验证的用户的头像时，它会尝试通过字段加载photoURL，但由于它处于离线状态，我无法加载图像，因此图像不会显示，这对于用户。

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

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

我希望它在离线时，它会在缓存中的某个位置搜索已上传的图像。

每次我加载图像来调用某种方法来存储缓存图像或其他东西时，这都会非常烦人，我知道这是可能的，但我不知道该怎么做。

可以通过ngsw-config.json配置文件来实现吗？

ngsw-config.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Muli:300,400,600,700"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Answer 1

是的，有可能，我尝试过并为我工作，我有一个带有离子和角度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://medium.com/progressive-web-apps/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7

在测试中，为“service_worker”启动建立有效的 https 连接非常重要。下线后可以看到该文件来自“service_worker”

测试来自 service_worker 的 img _