2

当前行为

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

预期行为

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

使用说明最小化重现问题

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

清单.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
4

2 回答 2

5

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

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

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

于 2018-03-21T18:27:07.000 回答
0

我猜manifest.json当您构建应用程序时， 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
于 2018-01-06T14:54:23.450 回答