You've designed a web app, wrote its code and service worker, and finally added the Web App Manifest to describe how it should behave when 'installed' on a user's device. This includes things like high-resolution icons to use for e.g. a mobile phone's launcher or app switcher, or how your web app should start when opened from the user's home screen.
And while many browsers will respect the Web App Manifest, not every browser will load or respect
every value you specify. Enter PWACompat, a
library that takes your Web App Manifest and automatically inserts relevant
for icons of different sizes, the favicon, startup mode, colors etc.
This means you no longer have to add innumerable, standard and non-standard tags (like
<link rel="icon" ... />
<meta name="orientation" ... />) to your pages. And for iOS home screen applications, PWACompat
will even dynamically create splash screens so you don't have to generate one for every different
To use PWACompat, be sure to link to your Web App Manifest on all your pages:
<link rel="manifest" href="manifest.webmanifest" />
And then either include this script, or add it to an async loaded bundle:
<link rel="manifest" href="manifest.webmanifest" /> <!-- include PWACompat _after_ your manifest --> <script async src="https://firstname.lastname@example.org/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous"></script>
PWACompat will fetch your manifest file and do the work needed for your user's browser, regardless of whether they're on a mobile device or desktop.
For supported browsers, what does PWACompat actually do? As of July 2018, PWACompat will load your Web App Manifest and:
- Create meta icon tags for all icons in the manifest (e.g. for a favicon, older browsers)
- Create fallback meta tags for various browsers (e.g. iOS, WebKit/Chromium forks, etc.) describing how a web app should open
- Sets the theme color based on the manifest
For Safari, PWACompat also:
apple-mobile-web-app-capable(opening without a browser chrome) for display modes
apple-touch-iconimages, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
- Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers
If you'd like to contribute more or help with additional browser support, PWACompat is on GitHub.
Try it out