Кэшированные изображения, полученные из Firebase Storage в приложении PWA

Question

У меня есть приложение в Angular с настроенным PWA , кроме кэширования assets/images Я также хотел бы кэшировать изображения, которые находятся в Firebase Storage , когда они загружаются, когда яВ сети.

Мое приложение использует базу данных 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

просто сделай

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/*"
      ]
    }
  }

Answer 2

Да, это возможно, я пробовал и у меня работает, у меня есть pwa с ionic и angular 7, в моем '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

При тестировании было очень важно иметь действующее https-соединение для запуска 'service_worker'. Как только вы выйдете из сети, вы увидите, что файл поступил от "service_worker"

Test img _ от service_worker