Add to home screen allows websites and PWA's to work 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 such websites compared to native apps. See related Medium blog post.
This drop-in JS Library for websites effectively guides a user to add the website to their home screen on IOS, Android and Desktop.
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/Android/Desktop are supported. Here are the guides shown for each platform/browser:
Users are guided to open the link in the system browser.
Make sure your site has the minimum requirements for installing a web app on homescreen for IOS and Android and Desktop.
-
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" crossorigin="use-credentials" href="manifest.json"> .. </head>
This should be a quick drop-in library into your 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. // Required. appIconUrl: 'apple-touch-icon.png', // App icon link (square, at least 40 x 40 pixels). // Required. assetUrl: 'https://cdn.jsdelivr.net/gh/philfung/[email protected]/dist/assets/img/', // Link to directory of library image assets. maxModalDisplayCount: -1 // If set, the modal will only show this many times. // Optional. Default: -1 (no limit). (Debugging: Use this.clearModalDisplayCount() to reset the count) }); ret = window.AddToHomeScreenInstance.show('en'); // show "add-to-homescreen" instructions to user, or do nothing if already added to homescreen // The only argument is the language to show the messages in (currently only 'de', 'en', 'pt' and 'fr' are available). }); </script> </body>
Here's an example implementation.
2-alternate. if you're calling the UI NOT onload, but sometime after (for example, in an onclick() handler for an "Install App" button), then you should still create your the instance onload, but call your UI later on the instance variable with .show()):
index.html
<script>
document.addEventListener('DOMContentLoaded', function () {
window.AddToHomeScreenInstance = new window.AddToHomeScreen({...
}));
document.getElementById('my_install_app_button').addEventListener('click', function () {
window.AddToHomeScreenInstance.show('en');
});
</script>
</body>This is because some handlers must be created onload.
- Make changes
- Test locally:
Start local server
npm run install
npm run build
npm run start
Load an example page http://127.0.0.1:8081
- Build the library into the
distdirectory
npm run build
- 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.
