如何创建一键添加网站至Android/iPhone/iPad主屏幕的链接

首先明确：出于浏览器的安全策略限制，没有办法通过一个链接直接触发系统的「添加到主屏幕」操作——浏览器不允许网页脚本直接调用这类涉及系统权限的功能。不过我们可以通过以下两种方案优化用户体验，尽量减少操作步骤：

1. 配置PWA清单，触发浏览器自动添加提示 #

如果你的网站符合PWA（渐进式Web应用）的要求，Chrome（Android/iOS）会自动识别并弹出「添加到主屏幕」的原生提示，用户只需点击提示即可完成操作，无需手动找菜单。

需要在网站根目录添加manifest.json文件，并在HTML页面的<head>中引入：

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

manifest.json的核心配置示例：

{
  "name": "你的网站全称",
  "short_name": "短名称", // 主屏幕图标下方显示的文字
  "start_url": "/", // 打开主屏幕应用时的起始页面
  "display": "standalone", // 以独立应用模式打开，隐藏浏览器地址栏
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

满足条件后，Chrome会在用户多次访问网站、停留一定时长后自动弹出添加提示，这是最接近“一键操作”的原生方案。

2. 自定义引导按钮，简化操作路径 #

因为无法直接调用系统API，我们可以做一个醒目的按钮，点击后根据设备类型展示针对性的引导提示，帮用户快速定位添加入口：

示例代码：

<button id="addToHomeBtn">添加到主屏幕</button>
<script>
document.getElementById('addToHomeBtn').addEventListener('click', () => {
  const isAndroid = /Android/i.test(navigator.userAgent);
  const isIOS = /iPhone|iPad/i.test(navigator.userAgent);
  
  let guideText = '';
  if (isAndroid) {
    guideText = '请点击浏览器右上角的「⋮」按钮，选择「添加到主屏幕」即可';
  } else if (isIOS) {
    guideText = '请点击浏览器底部的「分享」按钮，选择「添加到主屏幕」即可';
  } else {
    guideText = '请在浏览器菜单中找到「添加到主屏幕」选项';
  }
  
  // 可以替换为自定义弹窗组件，提升视觉体验
  alert(guideText);
});
</script>

补充说明 #

• iOS平台的Chrome浏览器，添加主屏幕的入口是右上角的「⋯」菜单，系统底层限制与Safari一致，无法直接触发添加操作；
• 所有方案都无法绕过浏览器的安全限制直接完成添加，只能通过优化引导路径降低用户操作成本。

内容的提问来源于stack exchange，提问作者coolio83000