PWA add to home screen not showing popup

Question

I implemented PWA for my static site. service worker register successfully and my page is also working in offline as I expected but the real problem is in add to Hom

Answer 1

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

1. The web app is NOT already installed.
2. 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/')

.

3. In manifest.json, prefer_related_applications is NOT set as true
4. 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
5. Served over HTTPS (required for service workers)

6. Has registered a service worker with a fetch event handler. e.g.

   self.addEventListener('fetch', function(event) {})

7. Currently, the user has interacted with the domain for at least 30 seconds

8. 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()

9. In html page manifest file is added

10. 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.

11. 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.