为什么我的应用程序 pwa 不能离线工作？答案

【问题标题】：why my application pwa does not work offline?为什么我的应用程序 pwa 不能离线工作？
【发布时间】：2020-11-01 14:52:10
【问题描述】：

一个带有 pwa 的 Angular 10 应用程序，通过 firebase 托管进行部署

(1) 应用程序在线运行

(2)应用一启动，我就断网了，可以继续在页面之间浏览

(3) 一旦应用程序启动，我就切断了互联网。我刷新页面 (F5) 并遇到：HTTP ERROR 504

(4) 一旦应用程序启动。我安装应用程序。我通过它的图标运行它。该应用程序正在运行。我切断了互联网。我重新启动图标并 : HTTP 错误 504

然而，一旦安装或页面刷新，就可以离线启动应用程序，对吗？

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

app.module.ts

...
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
...

我忘记了什么吗？

【问题讨论】：

使用 HTTPS URL 运行时，您的 PWA 是否通过 Chrome Lighthouse 工具作为有效的 PWA 传递？如果有问题，它通常会给出很好的提示。

标签： angular progressive-web-apps

【解决方案1】：

尝试将 PWA 注册策略更改为立即注册，使其立即在浏览器上注册。

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

【讨论】：