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

Question

我在 有一个申请带 PWA 的 Angular 配置，除了缓存 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

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

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

Test img _ from service_worker