在 Angular 5 中添加 ServiceWorkerModule 后，PWA 显示独立和全屏不起作用

Question

当前行为

将配置添加到应用程序模块environment.production ? ServiceWorkerModule.register('./ngsw-worker.js') : []并serviceWorker在 .angular-cli.json 中启用后，我的应用程序在通过 Chrome 安装在我的设备（LG G6）display上并在我的设备上打开standalone或fullscreen打开后在我的设备上设置 manifest.json 中的属性后，应用程序始终在浏览器中打开在新标签中。当我删除 Service Worker 配置（应用模块中的行）时，仅在独立或全屏模式下打开清单的应用。

预期行为

安装应用程序后，应用程序应以 stadalone 或全屏模式打开，取决于 manifest.json 中的设置值。

使用说明最小化问题的重现

我有使用 4.3 版生成并更新到 5.1.3 的应用程序，添加 @angular/service-worker 并build使用--prod. 为了为应用程序提供服务，我在我的 chrome 中使用端口转发。

清单文件

{
  "short_name": "FindPark",
  "name": "Find Nearby Car Parks",
  "start_url": "/search",

  "theme_color": "#206886",
  "background_color": "#ffffff",

  "display": "standalone",
  "orientation": "portrait",

  "icons": [
    {
      "src": "/assets/favicon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

改变行为的动机/用例是什么？

我不知道为什么不能使用我的应用程序，因为我发现示例类似于我的应用程序 https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/ 和我克隆和构建并且工作正常（显示为独立应用程序）。

环境

Angular version: 5.1.3 (also checked with 5.0.0, 5.0.3, 5.1.0)


Browser:
- [x] Chrome (desktop) version 63.0.3239.108
- [x] Chrome (Android) version 63.0.3239.111
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 6.11.4  
- Platform:  Linux 

Others:
@ngrx 4
rxjs 5.5.6
Android 

Answer 1

您说您正在使用端口转发 - 我不太确定这在这里意味着什么。根据我的经验，除非从标准 HTTPS 地址提供服务，否则带有 Service Worker 的渐进式 Web 应用程序无法正常工作。当我使用非标准端口（例如，4567 而不是 443）从正确配置的 HTTPS 启动我的应用程序时，地址栏将显示在 Android 上的应用程序中。

如果没有 service worker（即只使用 appcache），来自相同 URL 的相同应用程序在 Android 上按预期工作，顶部没有地址栏。

如果您保留 service worker 并更改托管，以便 HTTPS 位于标准 443 端口上，则该应用程序再次在 Android 上按预期工作，并且打开时顶部没有地址栏。这似乎是一个错误？