PWACompat is a library that brings the Web App Manifest to non-compliant browsers. If you've created a manifest.webmanifest but want to have wide support everywhere else, look no further 👍

Just include this script (or bundle/serve it yourself) in your page-

<link rel="manifest" href="manifest.webmanifest" />
<script async src="https://cdn.rawgit.com/GoogleChrome/pwacompat/v2.0.2/pwacompat.min.js"
    integrity="sha384-Hed93irwedHCADsxBJAVmlSMiqpE9BIQPp1XK7tqJh5olTEJTCJnlE7wRU3IDOz9"
    crossorigin="anonymous"></script>

For more on the Web App Manifest, read 📖 how to add a Web App Manifest and mobile-proof your site or watch 📹 theming as part of The Standard.

PWACompat takes your regular manifest and enhances other browsers

Details

What does PWACompat actually do? If you provide a Web App Manifest, PWACompat will update your page and-

• Create meta icon tags for all icons in the manifest (e.g., for a favicon, older browsers)
• Create fallback meta tags for older devices (e.g., iOS, older WebKit/Chromium forks etc)

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

Demo

For a demo, try adding Emojityper or the demo site to your iOS home screen.

Support

This is supported in most modern browsers (UC Browser, Safari, Firefox, Chrome, IE9+), fails silenty when unsupported, and provides the most value for your users on Mobile Safari.

Note that v1 of PWACompat used to also provide a build-time dependency: that support has been removed in v2+.

Web App Manifest

Your Web App Manifest is:

• normally named manifest.webmanifest (although some folks name it manifest.json)
• referenced from all pages on your site like <link rel="manifest" href="path/to/manifest.webmanifest" />
• and should look a bit like this-

{
  "name": "Always Be Progressive",
  "short_name": "Progressive!",
  "display": "browser",
  "start_url": "/",
  "background_color": "#102a48",
  "icons": [
    "src": "res/icon-128.png",
    "sizes": "128x128"
  ]
}

For more information on the Web App Manifest, and how e.g., modern browsers will prompt engaged users to install your site to their home screen, check out Web Fundamentals. There's also a number of online generators.

Release

Compile code with Closure Compiler.

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @output_file_name pwacompat.min.js
// ==/ClosureCompiler==

// code here