Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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://cdn.jsdelivr.net/npm/pwacompat@2.0.6/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.

More details

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:

  • 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 and Emojityper. Both sites' header HTML can be simple: just specify the manifest and let PWACompat handle the rest.

📢🤣🎉

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!

Оставить отзыв о...

Текущей странице
{"cc_re__cc_re__cc_by_3_0": ["s-atom-link\">Atom</a> feed\n  and get the latest <b>updates</b> in your favorite feed reader!\n  <link rel=\"alternate\" type=\"application/rss+xml\" title=\"Web Updates RSS Feed\" href=\"https://goo.gl/siLiwf\">\n  <link rel=\"alternate\" type=\"application/atom+xml\" title=\"Web Updates Atom Feed\" href=\"https://goo.gl/oc2PGP\">\n</p>\n\n\n  </div>\n  \n\n  \n        \n  \n\n\n\n\n\n\n\n        \n<div class=\"devsite-content-footer nocontent\">\n  \n  \n    <p>Except as otherwise noted, the content of this page is licensed under the <a href=\"https://creativecommons.org/licenses/by/3.0/\">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a href=\"https://www.apache.org/licenses/LICENSE-2.0\">Apache 2.0 License</a>. For details, see our <a href=\"https://developers.google.com/terms/site-policies?hl=ru\">Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p>\n  \n\n  \n    \n    <p class=\"devsite-content-footer-date\" itemprop=\"datePublished\"\n       content=\"2019-01-14T19:34:54.475867\">\n      \n      \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u042f\u043d"]}