ChatGPT解决这个技术问题 Extra ChatGPT

Javascript for "Add to Home Screen" on iPhone?

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 window.external.AddFavorite(location.href, document.title); possibly?


D
Dan Dascalescu

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.

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


Sadly, this is the best solution currently available.
The library [link .../add-to0homescreen] works, however, the final call to invoke is addToHomescreen({}); Must have curly brace inside parenthesis signifying you are passing no parameters.
L
Louis Gerbarg

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.


Thanks, I was afraid not. I decided to check window.navigator.standalone and urge them to add it if it in running in Mobile Safari.
@David Not for web-apps. It's not many users that know they can bookmark to the home screen. IMHO it would be nice with a link/button that fires the dialog with a helpful message.
@David It isn't begging. Web apps on iOS can run as native apps, full screen if they are added to home screen. Even offline mode is possible so it would be cool if we can use javascript to add it to home screen (With proper dialog of corse).
@the_nakos and that's why there will never be an easy way to "add to home screen" because it would create an alternative to amazing Apple app store with amazing checkout plus amazing in-app purchases. It's not the only thing they did to prevent it. In the past full screen webapps were crippled by using only old JavaScript engine when mobile safari was already running much faster engine 9to5mac.com/2014/06/03/…
C
Community

There is an open source Javascript library that offers something related : mobile-bookmark-bubble

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.


Is there anything similar for Android (or, ugh, dare I say, Blackberry)?
m
maxpaj

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.

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

https://i.stack.imgur.com/IV9x3.png

Picture and code snippet is from this great article which covers this question and many other tips on how to make your PWA feel iOS native.


This custom alert will show all the time, it needs a bit more of explanation using cookies or sessions to show only once or every "X" days for not installed app users. It could be good to have the full code :)
R
Rawan-25

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)

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

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

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..


This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
Jeet, can you please explain me where I'm wrong Yes this is right By the script, it is not possible to create add to home screen but with the " web clip " we can create, for it we have to create .mobileconfig file
Thanks @jaepage for it.. cttapp.com was a online website where you can create your own mobilecofig file well right now they shutdown their webpage so You can use developer.apple.com/library/content/documentation/… this website Soon I will create our own web tool for it...
You can also use "apple configuratior 2" to create a webclip
M
Miuranga

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

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