iPhone上的"添加到主屏幕"的Javascript？

Question

iPhone上的"添加到主屏幕"的Javascript？

Ker*_*ick 105 javascript iphone bookmarks mobile-safari homescreen

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

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

Answer 1

小智 61

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

但是,有一个小型库可以提示用户这样做,甚至指向正确的位置.工作一种享受.

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

http://cubiq.org/add-to-home-screen可能是一个更好的链接,可以对其进行演示并获得良好的信息. (19认同)

Answer 2

Lou*_*arg 50

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

@David不适用于网络应用.知道他们可以在主屏幕上添加书签的用户并不多.恕我直言,这将是一个很好的链接/按钮,用一个有用的消息激发对话框. (17认同)
@David这不是乞讨.iOS上的Web应用程序可以作为本机应用程序运行,如果它们被添加到主屏幕,则全屏显示.即使是离线模式也是可能的,所以如果我们可以使用javascript将其添加到主屏幕(使用适当的corse对话框),这将是很酷的. (13认同)
谢谢,我不敢.我决定检查`window.navigator.standalone`并敦促他们在Mobile Safari中运行时添加它. (3认同)
@the_nakos,这就是为什么永远不会有一个简单的方法来"添加到主屏幕",因为它将创建一个惊人的Apple应用程序商店的替代品与惊人的结帐和惊人的应用内购买.这不是他们为防止它而做的唯一事情.在过去的全屏幕webapps中,当移动safari已经运行得更快的引擎时,只使用旧的JavaScript引擎就会瘫痪http://9to5mac.com/2014/06/03/ios-8-webkit-changes-finally-allow-all -apps到具有最相同的性能,如野生动物园/ (3认同)

Answer 3

bob*_*bob 45

另一个触发"添加到主屏幕"弹出窗口的脚本:http://cubiq.org/add-to-home-screen

该链接已断开。 (5认同)

Answer 4

小智 8

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

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

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

是否有类似的Android(或者,呃,我敢说,黑莓)？ (2认同)

Answer 5

max*_*paj 8

到了 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);
}

Run Code Online (Sandbox Code Playgroud)

Answer 6

Reg*_*ham 1

TLDR：@Craig 在上面有一个更好的答案。

以下是我的原始答案，但我认为它不能充分回答问题。今天我想说你必须尝试一个库来模拟这种效果，因为 WebViews (PWA) 不支持 A2HS。

@Kerrick我想删除我的答案，但不能，因为它已被接受。

旧答案：

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

添加到主屏幕是现代浏览器中提供的一项功能，允许用户“安装”网络应用程序，即。添加到主屏幕的快捷方式。

另请参阅：caniuse.com 上的 A2HS 浏览器支持

归档时间：	16 年，5 月前
查看次数：	163359 次
最近记录：	8 年，3 月前