在PWA应用程序中缓存从Firebase存储收到的图像 [英] Cache images received from Firebase Storage in PWA application

问题描述

我在 Angular中配置了PWA 的应用程序，除了缓存assets/images外，我还想缓存 Firebase存储中的图像，当它们加载时我在线.

I have an application in Angular with PWA configured, besides caching assets/images I would also like to cache the images that are in Firebase Storage once they are loaded when I am Online.

我的应用程序使用了启用了数据持久性的 Cloud Firestore 数据库.当我需要以脱机模式在系统上加载经过身份验证的用户的化身时，它会尝试通过photoURL字段进行加载，但是由于它处于脱机状态，所以我无法加载该图像，因此该图像无法显示，因此无法显示对用户合法.

My application makes use of the Cloud Firestore database with data persistence enabled. When I need to load the avatar of the authenticated user on the system in offline mode, it tries to load through the photoURL field, but since it is offline I can not load the image so the image is not displayed and this is not legal for the user.

在我的代码中，按如下方式加载图像:

In my code I load the image as follows:

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

我希望它离线时，它将在缓存中的某个位置搜索上载的图像.

I would like it when it was offline, it would search somewhere in the cache for the image that was uploaded.

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

It would be very annoying every time I load the images to call some method to store the cached image or something, I know it is possible but I do not know how to do that.

是否可以通过ngsw-config.json配置文件来做到这一点?

Is it possible to do this through the ngsw-config.json configuration file?

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)"
        ]
      }
    }
  ]
}

推荐答案

做到这一点

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

和您的ngsw-config.json

and in your ngsw-config.json

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

这篇关于在PWA应用程序中缓存从Firebase存储收到的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！