Requirements for Installability
Installable Progressive Web App requirements
The basic requirements to make a Progressive Web App installable are: serving over HTTPS, a service worker, and a web app manifest.
Served over HTTPS:
It’s 2020. All sites should be using HTTPs whether they are PWAs or not!
Service worker:
Service workers are the technology that underpins all PWA functionality, and they can do many powerful things including caching and providing offline experiences. Though browser requirements vary, it is highly recommended to have at least a working service worker with a fetch handler.
Web App Manifest:
The Manifest file is a JSON file which informs how the PWA acts when it's installed. It needs to be linked from every page, so that the user can tap to install at any time. Almost all modern browsers have some level of support for it.
The manifest should include:
- Short_name and name: The short_name is used on the user's home screen, launcher, or other places where space may be limited. Name is used in the app install prompt.
- Icons: used in places like the home screen, app launcher, app switcher, splash screen, etc. Chrome requires a 192x192px and a 512x512px icon and additional sizes, including 270x270 and 180x180 are recommended. Further sizes are optional for those that want pixel perfect icons
- Start_url: this is where the PWA should start when it is launched from the homescreen, and prevents the app from starting on whatever page the user was on when installed
- Display: It is recommended to use ‘standalone’ as the display mode. This will allow the PWA to open separately to the browser and give the look and feel of a native app
There are other items that can be included in the manifest, which you can read here. The chapter “Designing Installed Experiences” will cover some UX best practices for icons and naming.
Apple Touch Link
iOS is a little different. When iOS Safari users install, the icon that appears is called the Apple touch icon. Include a <link rel="apple-touch-icon" href="/example.webp"> tag in the <head> of the page to specify what icon the PWA should use. If this is not included, iOS generates an icon by taking a screenshot of the page content. In other words, instructing iOS to download an icon results in a more polished user experience.
iOS icons should be: 180x180 pixels or 192x192 pixels, and the background of the icon should not be transparent. This code lab shows exactly how to do this.
Audits
Use Lighthouse to run audits and check what is missing to enable Installability.
Publishing in Play with Trusted Web Activities
Using Trusted Web Activities (TWAs), Progressive Web Apps can be integrated with an Android app and published in the Play Store. TWAs must meet the Lighthouse PWA installability criteria and load fast, with a Lighthouse Performance score of 80 or better. They must also comply with Play store policy including policies for payments, in-app purchases and other digital goods.
Learn more about how to publish a PWA in Play using TWA here, and check out tools like Llama pack and PWA builder that help simplify this process.