【问题标题】:Angular-Serviceworker: start_url does not respond with a 200 when offlineAngular-Serviceworker:离线时 start_url 不响应 200
【发布时间】:2020-10-07 02:10:15
【问题描述】:

版本

  • “@angular/common”:“~9.0.0”
  • “@angular/service-worker”:“~9.0.0”

说明

我使用 ng add @angular/pwa --project [app] 实现了 service-worker,Lighthouse 会将网络应用识别为 PWA。 突然,在一次部署到托管“安装”通知的 Firebase 后没有弹出,所以我检查了开发控制台。

清单仍然照常显示:

但是没有缓存:

运行 Lighthouse-Audit 时,出现以下错误:

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)"
        ]
      }
    }
  ]
}

ma​​nifest.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"
    }
  ]
}

【问题讨论】:

    标签: angular firebase-hosting lighthouse angular-service-worker


    【解决方案1】:

    所以我在此评论中找到了解决我的问题的类似问题的方法: https://stackoverflow.com/a/61152966/8581106

    app.module.ts 中添加registrationStrategy: 'registerImmediately' 到ServiceWorker 的注册中,如下所示:

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

    【讨论】:

      【解决方案2】:

      就我而言,我的 app.module 导入中有以下内容:

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

      除了 prod 变量返回 false,因为使用的环境不是 --prod。确保env.production 实际上在它应该返回的地方返回“true”。一个好的起点是“脚本”中的package.json。检查命令是否正在运行 --configuration=prod-env 或者您是否已对其进行配置。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-03-05
        • 2019-04-09
        • 2016-05-22
        • 2016-01-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-12-10
        相关资源
        最近更新 更多