在 iPhone 上为“添加到主屏幕”编写 Javascript？

是否可以使用 Javascript 来模拟 Mobile Safari 书签菜单中的 Add to Home Screen 选项？

可能和 IE 的 window.external.AddFavorite(location.href, document.title);类似？

182572 次浏览
小开

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

小开

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

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

目前该库的实现主要针对 iPhone 和 iPad 设备上使用的网络浏览器 Mobile Safari。

小开

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

但是，有一个小型库可以提示用户这样做，甚至指向正确的位置。很不错。

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

小开

这也是另一个很好的主屏脚本，支持 iphone/ipad，Mobile Safari，Android，黑莓触摸智能手机和 Playbook。

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble

小开

在 javascript 中，这是不可能的，但是在“ Web Clip”的帮助下，我们可以在 iPhone 中创建一个“ add to home screen”图标或快捷方式(通过代码文件。Mobile econfig)

https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html

http://appdistro.cttapp.com/webclip/

在创建一个 mobile config 文件之后，我们可以在 iphone safari 浏览器中传递这个 URL 安装证书，完成之后检查你的 iphone 主屏幕，会有一个快捷图标显示你的网页或者 webapp。.

小开

到了2020年，这在移动 Safari 上仍然是不可能的。

The next best solution is to show instructions on the steps to adding your page to the homescreen.

// 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);
}

enter image description here

图片和代码片段来自这篇伟大的文章 ，这篇文章涵盖了这个问题和其他许多关于如何让你的 PWA 感觉像 iOS 本地化的技巧。

小开
最佳答案

是的。大多数现代浏览器都支持渐进式 Web 应用程序的“添加到主屏幕”(或 A2HS)功能。引用 Mozilla Web Docs 文章的话:

添加到主屏幕是 modern browsers that allows a user to "install" a web app, ie. add a 主屏幕的快捷方式。

参见: 在 caniuse.com 上支持 A2HS 浏览器


提交答案