Angular Serviceworker:start_url在脱机时不响应200

版本

• “@angular/common”：“~9.0.0”
• “@angular/service worker”：“~9.0.0”

说明

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

我使用

ng add@angular/pwa--project[app]

实现了服务工作者，Lighthouse会将web应用识别为pwa。 突然，在一次部署到承载“安装”通知的Firebase之后，没有弹出“安装”通知，所以我检查了开发控制台

舱单仍然像往常一样出现：

但没有缓存任何内容：

在运行Lighthouse审计时，我遇到以下错误：

start_url does not respond with a 200 when offline

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.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

manifest.webmanifest

{
  "name": "App",
  "short_name": "App",
  "theme_color": "#5787b2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

---

因此，我在这篇关于类似问题的评论中找到了解决问题的方法：

在

app.module.ts

中，向ServiceWorker的注册添加

registrationStrategy:“立即注册”

，如下所示：

ServiceWorkerModule.register('ngsw-worker.js', { enabled: env.production, registrationStrategy: 'registerImmediately' }),

---

就我而言，我的app.module导入中包含以下内容：

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

除了prod变量返回的是

false

，因为所使用的环境不是--prod。请确保

env.production

实际返回了它应该返回的“true”。一个很好的起点是“脚本”中的

package.json

。检查该命令是否正在运行，或者是否已对其进行了配置