Question

这是我的配置：

kv

我跑了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。它创建了以下 ngsw-config.json ：

ng add @angular/pwa

我的 package.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)"
        ]
      }
    }
  ]
}

我的 angular.json 包含：

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

这是我的 manifest.webmanifest ：

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

我使用{ "name": "postit", "short_name": "postit", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [...] }构建并部署在我的Web服务器上。

我收到ng build --prod警告：

当我进入离线模式时：

我想念什么，以便离线模式正常工作？

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

角度PWA：未检测到匹配的服务人员

3 个答案: