在 Angular 5 中添加 ServiceWorkerModule 后，PWA 显示独立和全屏无法正常工作答案

【问题标题】：PWA display standalone & fullscreen not working after add ServiceWorkerModule in Angular 5在 Angular 5 中添加 ServiceWorkerModule 后，PWA 显示独立和全屏无法正常工作
【发布时间】：2018-01-06 13:21:57
【问题描述】：

当前行为

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

预期行为

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

用指令最小化重现问题

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

manifest.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

【问题讨论】：

某事告诉我这个模板来自 Angular repo...????

标签： angular progressive-web-apps manifest.json displaymode

【解决方案1】：

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

如果没有 service worker（即只使用 appcache），来自相同 URL 的相同应用在 Android 上可以正常运行，顶部没有地址栏。

如果您保留 Service Worker 并更改主机以使 HTTPS 位于标准 443 端口上，则该应用再次在 Android 上按预期运行，并且在顶部没有地址栏的情况下打开。这似乎是一个错误？

【讨论】：

这个！你救了我的命。
感谢分享！自定义端口确实无法按预期工作。 PWA 在常规浏览器模式下启动，并没有获得 display-mode:standalone 的任何好处
我有理由确定“端口转发”是指使用通过 USB 连接到计算机的 Android 手机进行开发的方法，该计算机设置了 chrome 以将运行在其上的 Web 服务器转发到本地主机端口在电话上 - 通常从 chrome://inspect 页面设置。但是，从 localhost 提供服务时，服务人员应该可以正常使用 http，这不是真的吗？ “但是localhost 也被认为是安全来源”chromium.org/blink/serviceworker/service-worker-faq

【解决方案2】：

我猜你构建应用时，dist 文件夹中缺少 manifest.json 文件。

您可能在 .angular-cli.json 的 assets 数组中缺少 manifest.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "chronery-web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json"  // Add this if it's missing!
      ],
      "index": "index.html",
      "main": "main.ts",

并确保将其添加到您的 index.html:

<head>
    ...
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#009688">
</head

【讨论】：

我之前加过这个。