blocks|key|4348131|text|在MobileSafari中添加任何书签(包括主屏幕上的书签)的唯一方法是使用内置UI，而Apple无论如何都不提供从页面内的脚本执行此操作。事实上，我非常确定在桌面版的Safari上也没有这样做的机制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4348132|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The only way to add any book marks in MobileSafari (including ones on the home screen) is with the builtin UI, and that Apples does not provide anyway to do this from scripts within a page. In fact, I am pretty sure there is no mechanism for doing this on the desktop version of Safari either.

blocks|key|4348196|text|在Safari实现Service+Worker并遵循Chrome和Firefox设置的方向之前，无法通过编程方式将应用程序添加到主屏幕，也无法让浏览器提示用户|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4348197|但是，有一个小的库可以提示用户这样做，甚至可以指向正确的位置。这是一种享受。|4348198|https://github.com/cubiq/add-to-homescreen|offset|length|4348199|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

Until Safari implements Service Worker and follows the direction set by Chrome and Firefox, there is no way to add your app programatically to the home screen, or to have the browser prompt the user

However, there is a small library that prompts the user to do it and even points to the right spot. Works a treat.

<a href="https://github.com/cubiq/add-to-homescreen" rel="noreferrer">https://github.com/cubiq/add-to-homescreen</a>

blocks|key|1430285|text|有一个开放源码的Javascript库，它提供了相关的东西：mobile-bookmark-bubble|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1430286|1430287|手机书签泡泡是一个JavaScript库，它在你的移动web应用程序底部添加一个促销气泡，邀请用户将应用程序的书签添加到他们设备的主屏幕上。该图书馆使用HTML5本地存储来跟踪促销是否已经显示，以避免不断骚扰用户。|blockquote|1430288|1430289|这个库的当前实现专门针对Mobile+Safari，这是在iPhone和iPad设备上使用的web浏览器。|1430290|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/mobile-bookmark-bubble/^0|U|M|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|-4|5|6|7|W|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|X|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

There is an open source Javascript library that offers something related :
<a href="http://code.google.com/p/mobile-bookmark-bubble/" rel="noreferrer">mobile-bookmark-bubble</a>
<blockquote>
The Mobile Bookmark Bubble is a JavaScript library that adds a promo bubble to the bottom of your mobile web application, inviting users to bookmark the app to their device's home screen. The library uses HTML5 local storage to track whether the promo has been displayed already, to avoid constantly nagging users.
The current implementation of this library specifically targets Mobile Safari, the web browser used on iPhone and iPad devices.
</blockquote>

blocks|key|1428449|text|在javascript中，这是不可能的，但在“网页剪辑”的帮助下，我们可以在iPhone(通过.mobileconfig的代码文件)中创建一个“添加到主屏幕”图标或快捷方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1428450|https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html|offset|length|1428451|http://appdistro.cttapp.com/webclip/|1428452|创建mobileconfig文件后，我们可以在iphone+safari浏览器中传递此url安装证书，并在完成后查看您的iphone主屏幕，其中有一个您的网页或webapp的快捷方式图标。|1428453|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|4T|0|0|0|10|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]|Q|$5|M|N|O|A|$P|G]]]]

In javascript, it is not possible but yes with the help of “Web Clips” we can create a "add to home screen" icon or shortcut in iPhone( by the code file of .mobileconfig)

<a href="https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html" rel="nofollow noreferrer">https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/iPhoneOTAConfiguration/ConfigurationProfileExamples/ConfigurationProfileExamples.html</a>

<a href="http://appdistro.cttapp.com/webclip/" rel="nofollow noreferrer">http://appdistro.cttapp.com/webclip/</a>

after create a mobileconfig file we can pass this url in iphone safari browser install certificate and after done it check your iphone home screen there is a shortcut icon of your Web page or webapp..

blocks|key|1131598|text|在2020年，这在Mobile+Safari.上仍然是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1131599|下一个最佳解决方案是显示有关将页面添加到主屏幕的步骤的说明。|1131600|//+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%7Cipad%7Cipod/.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);
}|code-block|syntax|javascript|1131601|​|1131602|📷|atomic|offset|length|1131603|1131604|Picture+and+code+snippet+is+from+this+great+article，它涵盖了这个问题和许多其他关于如何让你的PWA感觉iOS原生的技巧。|1131605|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/80dca2b3b002249e0976d52b176ed3f7.png|imageAlt|1|LINK|MUTABLE|url|https://www.netguru.com/codestories/pwa-on-ios^0|0|0|0|0|0|1|0|0|0|0|1F|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1A|8|@]|9|@$N|1B|O|1C|1|1D]]|A|$]]|$1|P|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@$N|1G|O|1H|1|1I]]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]|11|$5|12|W|13|A|$14|15]]]]

In 2020, this is still not possible on Mobile Safari.
The next best solution is to show instructions on the steps to adding your page to the homescreen.
<pre><code>// Check if user has seen the message already
const hasSeenInstallPopup = localStorage.getItem(&quot;hasSeenInstallPopup&quot;);

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

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

// Checks if should display install popup notification:
if (!hasSeenInstallPopup &amp;&amp; isIos() &amp;&amp; !isInStandaloneMode()) {
 showInstallMessage();
 localStorage.setItem(&quot;hasSeenInstallPopup&quot;, true);
}
</code></pre>
<a href="https://i.stack.imgur.com/IV9x3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IV9x3.png" alt="enter image description here" /></a>
<a href="https://www.netguru.com/codestories/pwa-on-ios" rel="nofollow noreferrer">Picture and code snippet is from this great article</a> which covers this question and many other tips on how to make your PWA feel iOS native.

blocks|key|128800|text|这也是另一个很好的主屏脚本，支持iphone/ipad，Mobile+Safari，Android，Blackberry+touch智能手机和Playbook。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128801|https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble|offset|length|128802|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1Y|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

This is also another good Home Screen script that support iphone/ipad, Mobile Safari, Android, Blackberry touch smartphones and Playbook .

<a href="https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble" rel="nofollow">https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble</a>

Is it possible to use Javascript to emulate the Add to Home Screen option in Mobile Safari's bookmark menu?

Something similar to IE's <code>window.external.AddFavorite(location.href, document.title);</code> possibly?

Javascript for "Add to Home Screen" on iPhone?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否可以使用Javascript来模拟Mobile Safari书签菜单中的添加到主屏幕选项？可能是类似IE的window.external.AddFavorite(location.href, document.title);的东西？

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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