I recently installed the iOS 14 Beta 2 looking to see what improvements are in store for PWAs. Unfortunately, there aren't really any PWA-specific improvements (ie: features related to service workers or the experience of standalone web apps pinned to the home screen).
The good news is there are some important standards/features being implemented in Safari that a PWA (or any website/webapp) can use.
Improvements
Face ID and Touch ID for the Web
Safari's implementation of the webauthn API will support Face ID and Touch ID, so now a PWA can have that same seemless authentication experience that native apps have.
Resize Observer
Useful for building responsive elements, ResizeObserver can now be used on iOS without any polyfill, resulting in a smaller PWA bundle size. 🎉
CSS Shadow Parts
I use web components in my PWAs so this improvement is exciting to me. This standard helps with styling web components. Now that this standard is implemented in all major evergreen browsers (Chrome, Edge, Firefox, Safari) I hope to see more web components leveraging shadow parts for style customization.
CSS Shadow Parts are actually already implemented in iOS 13.1
HTML enterkeyhint attribute
Native apps have been able to set the enter key label on the virtual keyboard for a while, but now PWAs can do the same using the enterkeyhint attribute.
WebP Image Format Support
WebP is a modern image format that supports both lossless and lossy compression. WebP images are smaller than PNGs and JPEGs, resulting in a smaller PWA bundle size. 🎉
PWA-Specific Features Still Not Implemented
Unfortunately, there are some PWA features that still don't work on iOS 14. This isn't an exhaustive list, just a couple of things I've noticed so far.
Background Audio
Like last year, the first thing I checked when I installed iOS 14 was background audio because some PWAs really need it. This time around I was hopeful because there was some activity earlier this year on the webkit bug. Unfortunately, background audio still stops as soon as you leave the PWA.
Do me a favor and go comment on the webkit bug or retweet this to help get this bug prioritized by the Webkit team.
Manifest.json Icon Ignored
The standard way to define icons for a PWA is to set the icons object in manifest.json. Unfortunately iOS ignores that so if you want your PWA icon to show up properly on the user's home screen you will still need to add the following to your HTML:
<link rel="apple-touch-icon" sizes="192x192" href="./logo.png" />
That's easy enough, but it would be nice if you only had to declare your icons in one place and it just works for Android and iOS (and Windows and Linux, etc, etc).
Push Notifications
It's hard for a PWA to rival a native app in terms of user experience without something as basic a push notifications, so it's disappointing to see this still isn't implemented on iOS 14.
BeforeInstallPromptEvent API
This API allows web apps to programmatically pin the web app to the user's home screen as a PWA. This is a non-standard API so it's unlikely for Apple to implement it, but it would be nice if there were a programmatic way to add to homescreen. Having a button the user can tap to install the current site as a PWA is a lot nicer experience than asking the user to dig into the share menu in Safari. Also, "Add to Home Screen" is only available in Safari, not in 3rd party browsers.
PWAs in App Library
iOS 14 introduces the concept of App Libraries to automatically group apps together. What I've noticed so far is any PWAs I add to my home screen don't show up in the "Recently Added" or "Suggestions" app libraries. In fact, all I've used so far since installing iOS 14 are the Twitter and Background Noise PWAs and yet they don't show up anywhere in my App Library.
It would be nice if PWAs got the same treatment as native apps for such a visible OS feature.
Wrapup
There are still some major roadblocks on iOS that prevent PWAs from having parity with native apps when it comes to user experience and OS integration. Developing PWAs for iOS can feel pretty frustrating when compared to Android and Windows. However, I appreciate that Safari is steadily implementing more web standards. I'll try and keep this post updated with my findings as new iOS 14 betas get released.
Follow me on Twitter for more writings about PWAs, web components, mobile development, and adventures in product development.
Top comments (2)
Some progress since this was authored. iOS 16 supports push notifications for web apps added to the home screen. developer.apple.com/documentation/...
ah yes was hoping that there would have been more improvements for IOS out by now, but let's hope for more pwa updates soon