Latest Updates for Progressive Web Apps
Hi! 👋
Let's get straight to the points:
🎥 Two new PWA video courses
🍎 Web Push Notifications and WebXR on iOS! 🔥
🍎 PWAs on iOS and iPadOS compatibility tables📚 Documentation: I'm writing Learn PWA!
▶️ PWA Summit 21
📈 Chromium continues the evolution of the PWA platform
In the past few months, I've continued delivering PWA workshops for companies, and in public events such as Chrome Developer Summit. I've also published new articles and video courses and sessions.
Here you have a summary of the most important updates you should know ⬇️
If you want to support my work, you can Buy Me Coffee account, or donate through PayPal
Two new Courses available
In the past few months, I've been busy creating more workshops around Progressive Web Apps. The latest additions are: Build PWAs from Scratch at Frontend Masters and Progressive Web Apps with Vue at Awwwwards Academy, in case you want to learn Vue.js from scratch.
Apple and PWAs: Web Push coming 🔥!
What's the feature most requested for Safari on iOS? Web Push. iOS 15.4 beta finally spot the API, or kind of. In a new "Safari: the missing documentation" article, I've covered what's new in this version, including:
Finally, icons from the Web App Manifest are supported, but... with a catch
PWA installation reliability has been improved
Many additions to CSS are available
<dialog> and <img loading=lazy> are available
WebXR Experiment
Web Push Notification Experiment
Read more at the iOS 15.4 beta Safari article
Hundreds of media articles published the news based on my findings in this article, such as TechRadar, ComputerWorld, and MacWorld.
New Compatibility tables to understand PWAs on iOS and iPadOS
No, Apple didn't do that. I did it :) I created an article so you can understand which parts of PWAs are available on iOS and iPadOS and from which version. I will try to keep that article as updated as possible. If you spot a bug or missing feature, let me know!
iOS PWA Compatibility
Learn PWA: free interactive course
Finding the right documentation about Progressive Web App development is not easy today. Books as a business are not easy to market these days, so I joined the Web.dev team from Google Chrome to write an original piece of content, free and with a free license: Learn PWA.
The course in the format of an interactive online ebook covers all the modern techniques to understand, create and deploy multi-platform Progressive Web Apps with interactive exercises. It's a work in progress; you can find 40% already published and the rest to come during February 2022.
PWA Summit 2021
A few months ago, the first-ever multi-vendor PWA Summit happened and all the content is available online on the YouTube channel. I've been the moderator of the panels and all the Q&As with great responses from the public.
Just watch this quick snapshot of how we talked about the Elephant in the Room (a.k.a. Apple)
Watch all the PWA Summit sessions
Chromium continues the evolution of PWAs Google Chrome and other Chromium-browsers (such as Edge and Samsung Internet) have been evolving the PWA platform a lot lately thanks to new Fugu project capabilities. This is a list of some of the most important changes that have been published in the stable channel in the past 6 months:
📼 WebCodecs
👋 ApplicationCache support is removed
🟡 Canvas color management
😴 Idle detection API
⌨ VirtualKeyboard API
📇 URLPattern, an API that standardizes routing matching for URLs
👁 EyeDropper API for selecting colors (desktop only)
📝 Note-Taking Apps Manifest metadata (note_taking member, ChromeOS only)
🛂 New id property in Web App Manifest (desktop-only), to uniquely identify a PWA by a string to avoid implementation differences that lead to problems when you change the manifest's URL or the start_url.
🤝 Protocol Handler in Web App Manifest to register a PWA automatically to protocols or URI schemes (desktop-only, with a permission dialog shown on the first usage after installation)
☯️ Prefers-contrast media query
🚌 Web Transport protocol now available from the Streams API and Datagrams API over HTTP/3
🎨 COLRv1 Color Gradient Vector Font Support
🪟 New way to define if you want to open a popup window or a new tab (browser) or window (installed PWA) with window.open
These changes are confirmed on Chrome up to version 98; Edge and other Chromium-based browsers' support may be different.
See a complete list of changes in Chrome for PWAs
If you want to support my work, you can Buy Me Coffee account, or donate through PayPal
See you next time! Stay safe 😷!