如何为网站快捷方式（主屏幕）配置应用程序名称？

Question

我有一个网站，我的客户想在 android 上添加到他的主屏幕，所以当我这样做时（使用 chrome），chrome/android 要求提供/更改显示名称。在我的情况下，它预先填充了“应用程序”。

翻译成英文的弹出窗口的标签是“添加到 Homesceen”

但是当我对例如stackoverflow做同样的事情时，我会预先填充一个“名称”，可能是站点标题。

所以我尝试过：

• 我有一个标题标签并试图缩短它，但即使标题很小，默认情况下仍然是“应用程序”
• 我加了一个<meta name="application-name" content="name-X">没有效果，也试过了<meta name="apple-mobile-web-app-title" content="name-X">
• 检查无错误/警告验证的标记（w3c-validator）
• 不同设备和尺寸的应用程序图标按预期工作
• 我试图在网上搜索但没有成功：/
• 我什至无法弄清楚“应用程序”可能来自哪里，因为它没有出现在源代码中

任何帮助提前致谢:)

Answer 1

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

正如您在上面的链接中看到的，您应该提供short_name和/或name属性。不要忘记链接您的清单：

<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"
}