是否可以使用 Javascript 来模拟 Mobile Safari 书签菜单中的“添加到主屏幕”选项？
window.external.AddFavorite(location.href, document.title);可能类似于IE的东西？
iPhone上“添加到主屏幕”的Javascript？
IT技术
javascript
iphone
mobile-safari
bookmarks
homescreen
2021-01-23 12:30:23
6个回答
在 Safari 实现 Service Worker 并遵循 Chrome 和 Firefox 设置的方向之前，无法以编程方式将您的应用程序添加到主屏幕，或让浏览器提示用户
但是，有一个小库会提示用户执行操作，甚至指向正确的位置。很好用。
在 MobileSafari（包括主屏幕上的书签）中添加任何书签的唯一方法是使用内置 UI，而 Apple 无论如何都没有提供从页面内的脚本执行此操作的方法。事实上，我很确定在桌面版 Safari 上也没有执行此操作的机制。
有一个开源的 Javascript 库提供了一些相关的东西： mobile-bookmark-bubble
Mobile Bookmark Bubble 是一个 JavaScript 库，它在您的移动 Web 应用程序的底部添加一个促销气泡，邀请用户将应用程序添加到他们设备的主屏幕上。该库使用 HTML5 本地存储来跟踪促销是否已经显示，以避免不断唠叨用户。
该库的当前实现专门针对 iPhone 和 iPad 设备上使用的 Web 浏览器 Mobile Safari。
在javascript中，这是不可能的，但是在“Web Clips”的帮助下，我们可以在iPhone中创建“添加到主屏幕”图标或快捷方式（通过.mobileconfig的代码文件）
http://appdistro.cttapp.com/webclip/
创建 mobileconfig 文件后，我们可以在 iphone safari 浏览器安装证书中传递此 url，完成后检查您的 iphone 主屏幕是否有您的网页或 web 应用程序的快捷方式图标..
在 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 原生的技巧。