Question

当前行为

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

预期行为

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

使用说明书轻微复制问题

我已经使用版本4.3生成应用程序并更新到5.1.3，添加@ angular / service-worker并使用角度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

Answer 1

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

如果没有服务工作者（即只使用appcache），来自同一网址的同一个应用在Android上按预期工作，顶部没有地址栏。

如果您保留服务工作者并更改主机以使HTTPS位于标准443端口上，那么应用程序将再次按预期在Android上运行并打开，顶部没有地址栏。这看起来像个错误？

Answer 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

PWA显示器独立和放大在Angular 5

当前行为

预期行为

使用说明书轻微复制问题

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

环境

2 个答案: