You've designed a web app, wrote its code and service worker, and finally added the
[Web App Manifest](https://developers.google.com/web/fundamentals/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](https://github.com/GoogleChromeLabs/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.
![PWACompat takes a Web App Manifest and adds standard and non-standard meta, link, etc. tags.](https://developer.chrome.com/static/blog/pwacompat/image/pwacompat-takes-web-app-6742b8a12271c.png) PWACompat takes a Web App Manifest and adds standard and non-standard meta, link, etc. tags.

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.
iOS splash screen for Emojityper, generated by PWACompat

## Using PWACompat

To use [PWACompat](https://github.com/GoogleChromeLabs/pwacompat), be sure to link to your Web App
Manifest on all your pages:

```html
<link rel="manifest" href="manifest.webmanifest" />
```

And then either include this script, or [add it](https://www.npmjs.com/package/pwacompat) to an
async loaded bundle:

```html
<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:

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

For more information, see the [best practices](https://github.com/GoogleChromeLabs/pwacompat).

> [!NOTE]
> **Note:** Alternatively, consider loading the library after your main bundle with a dynamic `import()` stement on platforms that are important to you. While it's great to have splash screens, they're not as important as the rest of your site's code!

```html
<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](https://developer.chrome.com/blog/support-for-theme-color-in-chrome-39-for-android.md.txt) based on the manifest

For Safari, PWACompat also:

- Sets `apple-mobile-web-app-capable` (opening without a browser chrome) for [display modes](https://developers.google.com/web/fundamentals/web-app-manifest/#display) `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](https://github.com/GoogleChromeLabs/pwacompat).

## Try it out

PWACompat is live on [Airhorner](https://airhorner.com), [v8.dev](https://v8.dev) and
[Emojityper](https://emojityper.com). Your sites' header HTML can be simple: just specify
[the manifest](https://emojityper.com/manifest.json) and let PWACompat handle the rest.

📢🤣🎉