如何检测iOS浏览器是否支持Add to Homescreen功能

可以通过以下方式检测该功能是否存在，进而决定是否展示操作说明：

• 基于用户代理（UA）的判断
  iOS平台只有原生Safari浏览器支持「添加到主屏幕」功能，Chrome、Firefox等第三方iOS浏览器均不具备该能力。可以通过读取navigator.userAgent识别设备系统与浏览器类型：

  function canAddToHomescreen() {
    const ua = navigator.userAgent;
    // 判断是否为iOS设备
    const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
    if (!isIOS) return false;
    // 判断是否为原生Safari（排除第三方iOS浏览器）
    const isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|OPiOS/.test(ua);
    return isSafari;
  }
  

  调用canAddToHomescreen()返回true时，即可向用户展示添加到主屏幕的操作引导。

• 额外优化：排除已添加到主屏幕的场景
  如果用户已经将Web App添加到主屏幕并以独立模式打开，navigator.standalone会返回true，这种情况下无需重复展示引导：

  if (window.navigator.standalone) {
    // 已处于主屏幕独立运行模式，跳过引导展示
    return;
  }
  

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