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

Question

我正在使用 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)"
        ]
      }
    }
  ]
}

• 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

构建我的应用程序时。我的

ngsw.json

文件夹中有一个

dist

文件。

但是生成的

urls

文件中的

patterns

和

ngsw.json

都是空的，如下：

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

当我在

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 团队报告了此事，并已确认它是 Angular 12 中的一个错误。

总之，现在，我必须通过复制

ngsw.json

文件以及

assetGroups

中的缓存网址来解决问题，在构建应用程序后，我将其

ngsw.json

复制到

dist

文件夹中。

Answer 2

但就我而言，

ngsw.json

中的

dist/myproject

中的URL不为空，但仍处于离线模式，无法正常工作。抛出错误

错误是

 ngsw.json URL: http://127.0.0.1:8080/ngsw.json?ngsw-cache-bust=0.2758348374356183

错误：net::ERR_INTERNET_DISCONNECTED 获取：ngsw-worker.js:2925 尺寸：0B 时间：3毫秒

Answer 3

解决所有

manifest

文件错误和警告。

如何查找

manifest

文件错误？

打开开发控制台，然后转到应用程序选项卡 > 选择左侧的清单，您将能够看到错误和警告。

并重新上传。希望它能解决离线模式问题。