缓存图标 Ionic PWA Angular答案

【问题标题】：Cache Icons Ionic PWA Angular缓存图标 Ionic PWA Angular
【发布时间】：2020-03-25 06:15:16
【问题描述】：

我想知道是否有人可以帮助我。我使用 Ionic + Angular 开发 PWA 并使用 Firebase 托管它。事实是当我失去互联网时，离子图标绝望了......我无法弄清楚如何修改我的 ngsw-config.json 以使其正常工作..

这是我的 Service Worker 配置文件

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/assets/fonts/*",
          "node_modules/videogular2/fonts/videogular.css",
          "/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)"
        ]
      }
    }
  ]
}

【问题讨论】：

标签： angular ionic-framework progressive-web-apps ionicons

【解决方案1】：

像这样添加新部分或扩展现有部分：

{
      "name": "icons",
      "installMode": "prefetch", // Download as soon as possible, may cause big net usage
      "updateMode": "prefetch", // Use cached version
      "resources": {
        "files": [
          "/svg/*.svg", // Path or template for your icons (Fetches all of it)
          "/svg/concrete.svg" // You may use concrete ones only
        ]
      }
}

如果您有一个大型图标库，最好指定应用程序处于离线模式时应该可用的图标。更多信息你可以在这里找到Angular service-worker configuration guide

【讨论】：