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

Question

我正在制作一个网站，我的客户想要将其添加到Android主屏幕上，因此当我使用Chrome执行此操作时，Chrome/Android会要求提供/更改显示名称。在我的情况下，它预填了“App”。

弹出窗口的标签翻译成英语是“添加到主屏幕” 但是，如果我使用例如stackoverflow做同样的操作，它会预填一个“名称”，可能是网站标题。 所以我尝试了以下方法：

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

提前感谢任何帮助 :)

- john Smith

---

也许这个链接可以帮助你：https://developer.android.com/guide/topics/ui/shortcuts/creating-shortcuts。然后，你可以在“@string”部分配置你想要的快捷方式名称。 - Rob Cime

谢谢您对此进行详细说明，但是一个网站是否也可以具有Android应用程序清单呢？这篇文章似乎是专门针对本机Android应用程序的，但我正在拥有一个网站。 - john Smith

@johnSmith 这个问题已经在SO上被问过了 - 请参见 https://dev59.com/_VsW5IYBdhLWcg3w-rTB#41974009 。除了需要一个清单文件外，您还需要一个“服务工作者”JavaScript文件（详见答案）。 - Rachel Gallen

Answer 1

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

正如上面的链接中所示，你需要提供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"
}

- Fabio Manzano

---

非常感谢，这正是我在寻找的 :-) 我还添加了一个空的 Service Worker，不知道是否也必要，但现在它按预期工作了！ - john Smith