iOS 13 PWA Improvements

Read about iOS 14 PWA Improvements here.

I just installed the iOS 13 public beta on my iPhone today and wanted to see what improvements are in store for Progressive Web Apps (PWAs) running on iOS. There's still a lot to dig into, but I wanted to capture my initial findings here. I'll try and keep this post up to date as I discover new improvements in subsequent beta releases.

Improvements

There are a few subtle, welcome improvements that make PWA's feel more like native apps.

Force Quit

When iOS 12 was released it brought the welcome feature of remembering a PWAs state after you left the app. While this feature was helpful, it was not implemented the same way for PWAs as for native apps, which led to a different user experience around the app's lifecycle. The most annoying issue (in my opinion) was if you force quit a PWA and then relaunch you will see the previous state... there is no way to get a fresh app start (short of restarting your phone). This is because the OS would not actually keep the PWA in memory, but rather save its state to disk and then restore it whenever the app came back to the foreground (whether the app was in the back stack or not). You can see an example below, notice how the side drawer is open, and stays open even after I force quit and relaunch.

Now, on iOS 13 you can force quit and when you relaunch the app you will be in a fresh state 🎉

Faster Rehydration

Related to the previous point, it seems when you switch apps to a PWA it rehydrates faster. I'm not totally sure yet if the OS actually keeps the app in memory or if the restoring of state from disk is just faster. I'll see if I can find out more about this one... it might just be a classic case of seems faster 😄

Favicon Logo is Used

This isn't really specific to PWAs, but a welcome feature I noticed. Safari's Share Sheet now shows the icon for a web page. It seems this is pulled from rel=logo in the page's HTML.

<link rel="icon" type="image/png" href="logo.png" />

What Has Not Been Improved

Unfortunately, there are some web/PWA features that still don't work on iOS13. This isn't an exhaustive list, just a couple of things I've noticed so far.

Background Audio

The first thing I checked when I installed iOS 13 was background audio because some PWAs really need it. I should have known background audio would still be busted, given the lack of activity on the webkit bug. Maybe Apple will fix it by iOS 13 RTM! Holds breathe... passes out

Do me a favor and go comment on the webkit bug or retweet this to help get this on the Webkit team's radar.

It's fixed as of iOS 15.4! See this tweet.

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).