如何为网站快捷方式（主屏幕）配置app-name？

Question

我有一个网站，我的客户想将其添加到 android 上的主屏幕，所以当我这样做时（使用 chrome），chrome/android 要求provide/change 显示的名称。在我的例子中，它预先填充了 "App"。

翻译成英文的弹窗标签是"Add to Homesceen"

但是当我对 for-example Whosebug 做同样的事情时，我得到它预先填充了一个 "name" 可能是网站标题。

所以我尝试了什么：

我有一个标题标签并试图缩短它，但即使标题非常小，默认情况下仍然 "App"
我加了一个<meta name="application-name" content="name-X">没有效果，也试过<meta name="apple-mobile-web-app-title" content="name-X">
检查了没有验证的标记 errors/warning (w3c-validator)
App-icons 对于不同的设备和尺寸按预期工作
我尝试在网上搜索但没有成功：/
我什至无法弄清楚 "App" 可能来自哪里，因为它没有出现在源代码中

提前感谢任何帮助:)

Answer 1

您正在寻找 PWA JSON manifest。它会告诉您的浏览器关于您的应用程序。

正如你在上面的link中看到的，你应该提供short_name and/or name 属性。不要忘记 link 你的清单：

<link rel="manifest" href="/manifest.json">

示例：

{
  "short_name": "Maps",
  "name": "Google Maps",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/maps/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/maps/",
  "theme_color": "#3367D6"
}

如何为网站快捷方式（主屏幕）配置app-name？

How to configure app-name for website shortcut (homescreen)?

html

android

google-chrome

metadata