Chrome - 在我的网站/应用程序的导航栏中添加“安装应用程序”

Question

最近，我在一些网站的 Chrome/Chromium 导航栏中发现了新的快捷方式。 Netgate 论坛

上提供示例

在导航栏右侧添加了一个新图标。

单击时，它会弹出一个弹出窗口，邀请安装应用程序，该应用程序最终只是一个具有独立容器的网站快捷方式。实际上，它与

More Tools

>

Create Shortcut

菜单具有相同的功能。
。

我已经检查了 Netgate 论坛 HTML 标头，但我没有找到正确的语法/功能来在我自己的应用程序上获得此行为。

在我看来，这是 PWA 的一项伟大的新功能，也是最终用户的简化器。

有人知道怎么做吗？
我什么也没找到。

Answer 1

来自搜索引擎的实际答案：

1. 添加到您的 HTML：

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

2. 创建包含基本信息的

   manifest.json

   文件，例如网站图标和 512px 图标（可选）：

{
  "short_name": "Flappy Bird",
  "name": "Flappy Bird: an HTML5 game",
  "icons": [
    {
      "src": "favicon.png",
      "type": "image/png",
      "sizes": "24x24"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

有关“网络应用程序清单”如何工作以及可以添加什么内容的更多信息，这里有一篇不错的参考文章：https://web.dev/articles/add-manifest