PWA add to home screen not showing popup
All the guidelines are provided at : https://developers.google.com/web/fundamentals/app-install-banners/
Below are the points for PWA 'Add To Home Screen' banner
- The web app is NOT already installed.
- Add service worker and manifest files. service worker should be in a directory where start_url is in its scope.
(e.g. '/public/home' is in scope of '/' or '/public/')
In manifest.json, prefer_related_applications is NOT set as true
manifest.json includes:
- short_name or name,
- icons must include a 192px and a 512px sized icons,
- start_url,
- display must be one of: fullscreen, standalone, or minimal-ui
Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler. e.g.
self.addEventListener('fetch', function(event) {})
Currently, the user has interacted with the domain for at least 30 seconds
Code is placed to load service worker in root JS file.
function registerServiceWorker() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceWorker.js') //
.then(function(reg){
console.log("service worker registered")
}).catch(function(err) {
console.log(err)
});
}
else {
console.log("Could not find serviceWorker in navigator")
}
}
registerServiceWorker()
In html page manifest file is added
<link rel="manifest" href="/pwa/manifest.json">
Banner was not dismissed earlier(Will not appear for 3 months as per guide for mini-info-bar). You can bring it back by clearing cookies.
For iOS devices, need to provide icons set in html page as per Safari Web Content Guide:. Presently 'Add to home screen' is only supported for Safari browser. You find this by clicking on share icon.
The first step for Add to Home Screen (A2HS) automatic pop-up testing is using the lighthouse audit tools.
You need to run the PWA audit and correct warnings there until you see
--- "User can be prompted to install the Web App"
The lighthouse audit tools are available as a tab in the Chrome dev tools or as a Chrome extension.
The extension usually has the more current features.
Once you see that message you can test the automatic pop-up message on Chrome Desktop and Android (Chrome & Edge)
Important Things To Note
After you see it the first time, to see the pop-up again you will probably need to totally clear out your browser cache and for
Edge - delete the shortcut
Chrome Desktop - uninstall the app here: chrome://apps/
Crome Android - uninstall the WebApk in your applications
Once you know the automatic A2HS popup works you can then (if desired) intercept the automatic pop-up to make it less annoying to your users. Show them a button to let them know they can A2HS when convenient for them.
As described here
https://developers.google.com/web/fundamentals/app-install-banners/
Here is my tester for A2HS.
You will see the button show instead of the automatic pop-up.