8

我正在构建一个Angular 渐进式 Web 应用程序。我希望我的应用程序表现得像本机应用程序，但是如果您希望它表现得像本机应用程序，我会遇到一些不应该存在的问题。

我已将其构建为 PWA，它已成功添加到我的主屏幕上。应用程序和图标都显示在主屏幕上。但我面临的问题是：

  • 当我搜索它时，就像我在手机上搜索其他应用程序一样，它不会出现在列表中。但是我已经用Flipkart Lite测试了这个场景，我已经将它添加到我的主屏幕，当我搜索它时，它会出现在应用程序列表中。

我的 manifest.json 是：

{
  "name": "beautyOfSoul",
   "gcm_sender_id": "103953800507",
  "short_name": "beautyOfSoul",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

我的app.module.ts文件将服务工作者导入为：

environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [], ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

您可以找到如下截图： 在此处输入图像描述 在此处输入图像描述

请让我知道我能做些什么来实现这一目标。

4

1 回答 1

2

检查您是否已将元标记添加到 HTML。某些移动操作系统需要某些元标记才能使 PWA 工作。

请查看此处以获取有关 PWA 元的更多信息。https://github.com/gokulkrishh/awesome-meta-and-manifest

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="App name">
<link rel="icon" sizes="192x192" href="./logo.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Name">
<link rel="apple-touch-icon" href="./logo.png">

<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->

<meta name="theme-color" content="#9fa2a3">
于 2018-06-27T09:26:15.547 回答