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

问题描述

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

• 角度：12

正在发生的事情是：

• 我转到我的应用程序（在线模式）-> 网络应用程序可以正常显示
• 打开开发者控制台并将连接更改为离线
• 按 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)"
        ]
      }
    }
  ]
}

• ma​​nifest.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",{
      "src": "assets/icons/icon-128x128.png","sizes": "128x128",{
      "src": "assets/icons/icon-144x144.png","sizes": "144x144",{
      "src": "assets/icons/icon-152x152.png","sizes": "152x152",{
      "src": "assets/icons/icon-192x192.png","sizes": "192x192",{
      "src": "assets/icons/icon-384x384.png","sizes": "384x384",{
      "src": "assets/icons/icon-512x512.png","sizes": "512x512","purpose": "maskable any"
    }
  ]
}

解决方法

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

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

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

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

"assetGroups": [
    {
        "name": "app","urls": [
            "/login","/dashboard"
        ],"patterns": [
            "/*.css","/*.js"
        ]
    },"urls": [
            "/favicon.ico","/index.html","/manifest.webmanifest","/ngsw.json"
        ],"patterns": []
    }
]

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

总而言之，现在，我必须通过复制 ngsw.json 文件和 assetGroups 中的缓存 URL 来解决方法，在构建应用程序后，我将该 ngsw.json 复制到 {{ 1}} 文件夹。