PWA Web App Manifest support for iOS!

Google just released a new library called PWACompat, which means, we are now going to have support for Web App Manifest even on iOS.

What does it means?

This means, we, as developers don’t need to worry anymore about adding compatibility tags for iOS.

But… what will this library do with my app?

• 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 webapp should open.
• Sets the theme color based on the manifest.
• 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.

Wow! How do I implement it?

Add the Web App manifest to your app:

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

Then, add the library after:

<script async   src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js"
    integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA"
    crossorigin="anonymous"></script>

Or:

npm install pwacompat

🎉 !!!

Conclusion

Google got tired of waiting for Apple to release PWA features into the latest safari, so they created their own library to polyfill the functionality.

This is good, because you can now enjoy having this features on your website and not having to worry about iOS anymore.

But, it’s also bad, because by releasing this, Apple will probably not push forward to implement those features.

Let’s see what time bring us 🙏, for now, keep enjoying PWAs!