Adding to home screen allows mobile websites and PWA's to open like native apps without registering in the Apple or Google App Stores. Currently, it is very difficult to get users to add web apps to their home screen, limiting the utility of mobile websites compared to native apps. See related Medium blog post.
This drop-in JS Library for mobile websites effectively guides a user to add the website to their home screen on both IOS and Android.
Instructions and UI in this library have been "battle-tested" and has yielded an ~85% home screen install rate on IOS and Android across all ages in past implementations.
Here is a demo (please open on your phone) of library use within a hypothetical app "Aardvark" 
All major browsers on IOS and Android are supported. Here are the guides shown for each platform/browser:
All major browsers on IOS and Android are supported, but in the edge case of a non-compliant or desktop browser, a message is shown to redirect the user to a supported browser. (This feature can be toggled on/off using the showErrorMessageForUnsupportedBrowsers flag.)
User is guided to open the link in the system browser.
These apps all use SFSafariViewController and can be handled similarly.
Make sure your site has the minimum requirements for installing a web app on homescreen for IOS and Android.
-
At
https://your-website.com/apple-touch-icon.png, include a square icon of your app that is (1) at least 40 x 40 pixels and (2) specifically namedapple-touch-icon.png(example). -
At
https://your-website.com/manifest.json, include a web manifest filemanifest.json(example). Reference the manifest in your index HTML file.index.html<head> ... <link rel="manifest" href="manifest.json"> .. </head>
This should be a quick drop-in library into your mobile website.
-
Include the library JavaScript and CSS files in your header (You can use JSDelivr CDN if you're just using the library directly and not making any changes):
index.html<head> ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/philfung/[email protected]/dist/add-to-homescreen.min.css"> <script src="https://cdn.jsdelivr.net/gh/philfung/[email protected]/dist/add-to-homescreen.min.js"></script> ... </head>
-
Call the library onload.
index.html<script> document.addEventListener('DOMContentLoaded', function () { window.AddToHomeScreenInstance = new window.AddToHomeScreen( { appName: 'Aardvark', // Name of the app appIconUrl: 'apple-touch-icon.png', // App icon link (square, at least 40 x 40 pixels) assetUrl: 'https://cdn.jsdelivr.net/gh/philfung/[email protected]/dist/assets/img/', // Link to directory of library image assets showErrorMessageForUnsupportedBrowsers: true, // Should we prompt users on non-compliant browsers (like IOS Firefox) to switch to compliant one (like Safari) Default: true. allowUserToCloseModal: false, // Allow user to close the 'Add to Homescreen' message? Not allowing will increase installs. Default: false. maxModalDisplayCount: -1 // If set, the modal will only show this many times. // Default is -1 (no limit). (Debugging: Use this.clearModalDisplayCount() to reset the count) } ); ret = window.AddToHomeScreenInstance.show(); // show "add-to-homescreen" instructions to user, or do nothing if already added to homescreen }); </script> </body>
Here's an example implementation.
Build the library:
npm run build
Test locally:
npm start
Next, save the dist directory to a CDN of your choice. Follow the steps in the previous section.
No dependencies. This is written in raw ES6 javascript and all css is namespaced to minimize codebase conflict and bloat.
- Bug: Fix in-app browser detection:
-
IOS
- GMail (no issue, opens in system browser)
- Threads
- Twitter (fixed for first-level links, doesn't work for twitter mobile website)
- Google App
-
Android
- GMail (no issue, opens in system browser)
- Threads
- Google App
-