Add to Home Screen your ionic PWA

June 05, 2018 0 Comments

Add to Home Screen your ionic PWA




One of the feature of Progressive Web Apps is the ability to add to home screen your application, in a mobile phone or on a desktop computer, if using Chrome (recommended) it handles most of the heavy lifting for you, and on Android, Chrome will generate a WebAPK creating an even more integrated experience for your users.

Starting on Chrome 68 (beta in early June 2018), Chrome will not automatically show the Add to Home Screen banner, instead, you must show it by calling prompt() on the beforeinstallprompt event.

Criteria to fire the “beforeinstallprompt” event

– The web app is not already installed
– Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds) – Includes a web app manifest that includes:    shortname or name    icons must include a 192px and a 512px sized icons    starturl    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

Tag cloud