0
237
ViewsHow to trigger the simple "Add to home screen" feature (the one without service worker)
There are in fact two "Add to home screen" features on Android browsers:
The popup dialog that is automatically showed on the bottom of Chrome Android when specific conditions are met (
manifest.jsonavailable, having a service worker as discussed here, website visited at least twice in > 5 minutes, etc.)
The Chrome menu item that we can trigger for any website, even if it does not have a service worker. This one simply creates a shortcut to the website on the home screen of the mobile device:
Question: How to add a button on a HTML page that triggers the creation of a home screen shortcut, like in the second bullet before? (i.e. for a very simple HTML website, without any service worker)
2 answers
Answer question0
I believe that what you want to achieve is not yet possible. In order to be able to make a shortcut, a dedicated API would be needed for that. Until then, there is no API other than service workers that can achieve this.
0
What you need is BeforeInstallPrompt event.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
});
const installApp = document.getElementById('installApp');
installApp.addEventListener('click', async () => {
if (deferredPrompt !== null) {
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
if (outcome === 'accepted') {
deferredPrompt = null;
}
}
});
Here is a article that might help you.
https://www.amitmerchant.com/adding-custom-install-button-in-progressive-web-apps/