113

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

可能类似于 IE 的东西window.external.AddFavorite(location.href, document.title);

4

6 回答 6

64

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

但是,有一个小型库会提示用户执行此操作,甚至指向正确的位置。工作一种享受。

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

于 2011-02-12T05:11:45.267 回答
58

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

于 2009-07-17T08:24:51.737 回答
8

有一个开源 Javascript 库提供相关的东西: mobile-bookmark-bubble

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

该库的当前实现专门针对 Mobile Safari,即 iPhone 和 iPad 设备上使用的网络浏览器。

于 2010-09-30T13:14:15.190 回答
3

在 javascript 中,这是不可能的,但可以借助“Web Clips”,我们可以在 iPhone 中创建“添加到主屏幕”图标或快捷方式(通过 .mobileconfig 的代码文件)

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

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

创建一个mobileconfig文件后,我们可以在iphone safari浏览器安装证书中传递这个url,完成后检查你的iphone主屏幕有你的网页或webapp的快捷方式图标..

于 2017-08-29T06:20:05.843 回答
3

在 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 原生的技巧。

于 2020-09-28T13:00:24.240 回答
2

这也是另一个很好的主屏幕脚本,支持 iphone/ipad、Mobile Safari、Android、Blackberry touch 智能手机和 Playbook。

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

于 2012-12-11T08:57:51.780 回答