iPhone 上“添加到主屏幕”的 Javascript？

Question

是否可以使用 Javascript 模拟 Mobile Safari 书签菜单中的“添加到主屏幕”选项？

类似于 IE 的

window.external.AddFavorite(location.href, document.title);

可能吗？

Answer 1

在 Safari 实现 Service Worker 并遵循 Chrome 和 Firefox 设定的方向之前，无法以编程方式将您的应用程序添加到主屏幕，或者让浏览器提示用户

但是，有一个小库会提示用户去做，甚至会指向正确的位置。很好吃。

https://github.com/cubiq/add-to-homescreen

Answer 2

在 MobileSafari 中添加任何书签（包括主屏幕上的书签）的唯一方法是使用内置 UI，而 Apples 无论如何都不提供从页面内的脚本执行此操作。事实上，我很确定在桌面版 Safari 上也没有这样做的机制。

Answer 3

有一个开源的 Javascript 库提供了相关的东西：移动书签气泡

Mobile Bookmark Bubble 是一个 JavaScript 库，它在您的移动 Web 应用程序底部添加一个促销气泡，邀请用户将该应用程序添加到他们设备的主屏幕上。该库使用 HTML5 本地存储来跟踪促销是否已经显示，以避免不断地唠叨用户。

此库的当前实现专门针对 Mobile Safari，即 iPhone 和 iPad 设备上使用的 Web 浏览器。

Answer 4

2020年了，这在Mobile Safari上还是做不到的

下一个最佳解决方案是显示有关将页面添加到主屏幕的步骤的说明。

// Check if user has seen the message already
const hasSeenInstallPopup = localStorage.getItem("hasSeenInstallPopup");

// Detects if device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}

// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

// Checks if should display install popup notification:
if (!hasSeenInstallPopup && isIos() && !isInStandaloneMode()) {
  showInstallMessage();
  localStorage.setItem("hasSeenInstallPopup", true);
}

图片和代码片段来自这篇很棒的文章，其中涵盖了这个问题和许多其他关于如何让你的 PWA 感觉 iOS 原生的技巧。