Angular 当更改为离线并按刷新 (F5) 时，PWA 不起作用

Question

我正在使用 angular 制作 PWA 应用。

Angular: 12

发生的事情是：

我转到我的应用程序（在线模式）-> Web 应用程序可以正常显示
打开开发者控制台并将连接更改为离线
按 F5 重新加载应用程序

会发生什么：

下图是我点击重新加载时在屏幕上显示的内容：

这是我的 ngsw-config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "manifest.json",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

manifest.json

{
  "name": "ng-main",
  "short_name": "ng-main",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Answer 1

在花费数小时寻找解决方案之后当我使用 ng build --configuration production 构建我的应用程序时，我注意到了。我的 dist 文件夹中有一个 ngsw.json 文件。

但是，生成的ngsw.json文件中的urls和patterns都是空的，如下图：

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    }
]

当我将 url 添加到 assetGroups 中的缓存并再次尝试时，应用程序运行顺利。（请看下面的内容）

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/login",
            "/dashboard"
        ],
        "patterns": [
            "/*.css",
            "/*.js"
        ]
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/favicon.ico",
            "/index.html",
            "/manifest.webmanifest",
            "/ngsw.json"
        ],
        "patterns": []
    }
]

我已经向 Angular 团队报告了此事，并且已确认为 a bug in Angular 12。

总而言之，现在，我必须通过在 assetGroups 中复制带有缓存 url 的 ngsw.json 文件来解决此问题，在构建应用程序后，我将 ngsw.json 复制到dist 个文件夹。

Angular 当更改为离线并按刷新 (F5) 时，PWA 不起作用

Angular PWA does not work when change to OFFLINE and press Refresh (F5)

angular

angular-service-worker

angular-pwa

service-worker-config