angular - 在 Angular 5 中添加 ServiceWorkerModule 后，PWA 显示独立和全屏无法工作

Question

当前行为

将配置添加到应用程序模块 environment.product 之后？ ServiceWorkerModule.register('./ngsw-worker.js') :[] 并在 .angular-cli.json 中启用 serviceWorker，这是我的设备上安装后的应用程序 (LG G6)在我的设备上打开后，通过 Chrome 将 Manifest.json 中的属性 display 设置为 standalone 或 fullscreen，应用程序始终在浏览器中的新选项卡中打开。当我删除服务工作人员配置(应用程序模块中的行)时，仅包含 list 的应用程序以独立或全屏模式打开。

预期行为

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

通过说明最小化问题重现

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

list .json

{
  "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 上的应用程序中。

如果没有服务工作人员(即仅使用应用程序缓存)，来自同一 URL 的同一应用程序将按预期在 Android 上运行，顶部没有地址栏。

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