Javascript for “Add to Home Screen” on iPhone? – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and iphone. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Javascript for “Add to Home Screen” on iPhone?.
Problem :
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?
Solution :
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.
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.
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.
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);
}
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.
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)
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 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
Yes. The majority of modern browsers support the Add to Home screen (or A2HS) feature for Progressive Web Apps. To quote the Mozilla Web Docs article:
Add to Home screen is a feature available in
modern browsers that allows a user to “install” a web app, ie. add a
shortcut to their Home screen.
See also: A2HS browser support at caniuse.com