Angular PWA独立显示器&；在5中添加ServiceWorkerModule后全屏不工作当前行为_Angular_Progressive Web Apps_Manifest.json_Displaymode

Angular PWA独立显示器&；在5中添加ServiceWorkerModule后全屏不工作当前行为

angular

Angular PWA独立显示器&；在5中添加ServiceWorkerModule后全屏不工作当前行为,angular,progressive-web-apps,manifest.json,displaymode,Angular,Progressive Web Apps,Manifest.json,Displaymode,将配置添加到应用程序模块environment.production之后？ServiceWorkerModule.register（'./ngsw-worker.js'）：[]并在.angular-cli.json中启用serviceWorker，我的应用程序通过Chrome在我的设备（LG G6）上安装后，属性在manifest.json中显示，在我的设备上打开后设置为独立或全屏，应用程序始终在浏览器的“新建”选项卡中打开。当我删除service worker配置（应用程序模块中的行）时，仅

将配置添加到应用程序模块

environment.production之后？ServiceWorkerModule.register（'./ngsw-worker.js'）：[]

并在.angular-cli.json中启用

serviceWorker

，我的应用程序通过Chrome在我的设备（LG G6）上安装后，属性

在manifest.json中显示，在我的设备上打开后设置为独立或全屏，应用程序始终在浏览器的“新建”选项卡中打开。
当我删除service worker配置（应用程序模块中的行）时，仅在独立或全屏模式下打开清单的应用程序
预期行为

安装应用程序后，应用程序应以stadalone或全屏模式打开，具体取决于manifest.json中的设置值
带指令问题的最小再现
我使用版本4.3生成应用程序，并将其更新为5.1.3，添加@angular/service worker，并使用angular cli生成build
with--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/ 我克隆、构建并运行良好（显示为独立应用程序）
环境
我猜在您构建应用程序时，dist文件夹中缺少manifest.json
文件
您可能在.angular cli.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


...
你说你正在使用端口转发-我不太清楚这意味着什么。根据我的经验，除非从标准HTTPS地址提供服务，否则带有服务人员的渐进式web应用程序无法正常工作。当我使用非标准端口（例如，4567而不是443）从正确配置的HTTPS启动我的应用程序时，Android上的应用程序中将显示地址栏
如果没有服务人员（即仅使用appcache），来自同一URL的同一应用程序在Android上可以正常工作，顶部没有地址栏
如果您保留服务工作者并更改主机，使HTTPS位于标准443端口上，那么该应用程序在Android上也能正常工作，并且在顶部没有地址栏的情况下打开。这似乎是一个bug？我之前添加了这个。有人告诉我这个模板来自角度报告。。。这你救了我的命。谢谢分享！自定义端口确实不能按预期工作。PWA以常规浏览器模式启动，但没有显示模式的任何好处：standaloneI我有理由相信“端口转发”指的是一种使用Android手机开发的方法，该手机通过USB连接到一台装有chrome设置的计算机，该计算机将运行在其上的web服务器转发到手机上的本地主机端口——通常从chrome://inspect 页然而，当从本地主机提供服务时，服务工作者应该可以很好地使用http，这难道不是真的吗？“但也被视为安全来源”
<head>
    ...
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#009688">
</head