Angular PWA：未检测到匹配的服务工作者

Question

这是我的配置：

Angular CLI: 8.2.1
Node: 10.15.2
OS: win32 x64
Angular: 8.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.1
@angular-devkit/build-angular     0.802.1
@angular-devkit/build-optimizer   0.802.1
@angular-devkit/build-webpack     0.802.1
@angular-devkit/core              8.2.1
@angular-devkit/schematics        8.2.1
@angular/cdk                      8.1.2
@angular/material                 8.1.2
@angular/pwa                      0.802.1
@ngtools/webpack                  8.2.1
@schematics/angular               8.2.1
@schematics/update                0.802.1
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

我运行ng add @angular/pwa。它创建了以下 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",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我的 package.json 包含：

"@angular/pwa": "^0.802.1",
"@angular/service-worker": "~8.2.0",

我的 angular.json 包含：

"serviceWorker": true,
"ngswConfigPath": "ngsw-config.json"

这是我的manifest.webmanifest:

{
  "name": "postit",
  "short_name": "postit",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [...]
}

我使用 ng build --prod 构建并部署在我的网络服务器上。

我收到 No matching service worker detected 警告：

当我切换到离线模式时：

我错过了什么让离线模式起作用？

Answer 1

在非本地主机服务器上进行 PWA 测试时，您要确保它是 HTTPS。
这是核心要求。

Answer 2

在 LocalHost 上，您可以使用本地 Http 服务器测试应用程序。

试试

npm install http-server-spa

然后在构建后转到 dist 文件夹和运行服务器

http-server-spa / index.html

看看你会不会用。

Answer 3

PWA service worker 将使用 prod 版本。我发现了这个问题，但是一旦我用 ng build --prod 而不是 ng build

Angular PWA：未检测到匹配的服务工作者

Angular PWA: no matching service worker detected

angular

service-worker

progressive-web-apps

angular-service-worker