PWA:如何以编程方式触发:"添加到主屏幕"？在iOS Safari上

仅2017年,苹果应用程序商店就创造了26亿美元的收入.为用户提供一种简单的方法将应用程序添加到主屏幕将减少其应用程序商店的收入.许多人认为他们故意拖延PWA支持,特别是这个安装横幅.即使是服务工作者对iOS的支持也只是几个月前,而Chrome现在已经有很长一段时间了.即使有这个晚期版本,它也没有在发行说明中提及.显而易见的原因!我可以看到它作为开发人员的感受. (21认同)
而且，由于它们的策展能力较弱，它们也将失去更多控制权。我可以理解为什么PWA应该是真正的未来，但他们为什么要拖延脚步。 (4认同)
@Anand我完全看到这个阴谋是真实的。我讨厌为iOS开发。 (3认同)
苹果讨厌开发人员。 (3认同)
这在 2020 年仍然正确/相关吗？有人知道吗？ (2认同)
是的。这仍然是事实。 (2认同)
@simeon 你能分享一下网址吗？结帐时会很有趣。我很乐意找到并分享该 PWA 中实现的内容。 (2认同)
netguru.co 示例代码的 url 已损坏 (2认同)

Answer 3

eya*_*oli 5

请注意，Chrome（Android 上）是唯一自动提示用户安装 PWA 的浏览器。您应该手动处理 iOS 和其他 Android 浏览器。统计数据显示（2021 年更新），排名前 3 的移动浏览器是 Chrome、Safari 和三星互联网（<6%）。

您可以使用此代码来帮助您提示：

// helps you detect mobile browsers (to show a relevant message as the process of installing your PWA changes from browser to browser)
var isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Samsung: function () {
    return navigator.userAgent.match(
      /SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i,
    );
  },
  Windows: function () {
    return (
      navigator.userAgent.match(/IEMobile/i) ||
      navigator.userAgent.match(/WPDesktop/i)
    );
  },
  any: function () {
    return (
      isMobile.Android() ||
      isMobile.BlackBerry() ||
      isMobile.iOS() ||
      isMobile.Opera() ||
      isMobile.Windows()
    );
  },
};

// use this to check if the user is already using your PWA - no need to prompt if in standalone
function isStandalone(): boolean {
  const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
  if (document.referrer.startsWith("android-app://")) {
    return true; // Trusted web app
  } else if ("standalone" in navigator || isStandalone) {
    return true;
  }
  return false;
}

Run Code Online (Sandbox Code Playgroud)

至于安装说明：

Chrome - auto
Safari - Press "Share" icon then "Add to home"
Samsung internet - An "Install" icon will be shown on the top bar (I didn't quite understand if the app should be registered in Samsung Store for it to show) OR press "Menu" on the bottom bar then "Add/install to home"
Other browsers - Press menu on the bottom/top bar then "Add/install to home"

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	21829 次
最近记录：	6 年，2 月前