PWACompat - the Web App Manifest for all browsers

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 meta or link tags 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" ... /> or <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 screen size.

Using PWACompat

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://unpkg.com/pwacompat" 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.

We still recommend adding at least one high-quality shortcut icon, for search indexing:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

For more information, see the best practices.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

In Depth

For supported browsers, what does PWACompat actually do? 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:

• Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
• Creates apple-touch-icon images, 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

PWACompat is live on Airhorner, v8.dev and Emojityper. Your sites' header HTML can be simple: just specify the manifest and let PWACompat handle the rest.

📢🤣🎉