PWA on iOS. What’s New?

Introduction

Apple could care more about Progressive Web Apps, there’s no doubt about that. There’s not much documentation, the APIs are added slowly and most common things like Web App Manifest aren’t there for too long (at this point, I wonder if they will get there at all). On the other hand, PWAs are a thing. Maybe not as hyped as Machine Learning, but still, there’s a solid batch of those out there. And even Apple cannot ignore that fact forever.

iOS 13 has brought some improvements. There’s still a lot of missing features, but from version to version the support gets slightly better (in some cases a lot better!). So, how is it to develop a PWA on iOS 13 in 2020?

The App Lifecycle improved a lot

The App Lifecycle of the Progressive Web App in iOS 12.x was buggy. The implementation looked like an unfinished part of the OS. Of course, there were ways of improving the experience but, in most cases, it wasn’t good either way. The users needed to deal with blank pages in the App Switcher. The app state often cleared when the user switched it to another. Also, there was no support for the background code execution. In general, PWA was still more like a web application just stripped of Safari’s toolbar.

Now PWAs run in the background! The state of the app is reflected in the App Switcher too. Of course, the background code execution still has some restrictions when it comes to timers and the Web.app process might become suspended whenever the iOS resources management demands it, but generally, in most common cases, a PWA on iOS 13 will work like a native app. Or at least the user won’t tell the difference. A huge milestone if you ask me!

Adding to the Home Screen is different

Yes, I know this is one of the most lacking features on iOS, and no, Safari still doesn’t provide an installation prompt from within the application. You still need to inform the users about the possibility. Chances are you’ve added some info already and that’s the thing you need to give some attention to.

iOS 13 has brought a new Share Sheet. Its design differs a lot from the previous one and I strongly recommend updating the app to reflect that, especially given that the Safari browser renders the icon from apple-touch-icon meta tag now. That visual cue makes it easier to identify what the user is adding to his Home Screen.

The Dark Mode arrived

The Dark Mode itself was a solid reason to upgrade iOS for many. It is praised by all of the major tech services out there. Many developers updated their native apps with the dark theme even before the official release of 13. It even found its way to the newest Android. There’s no reason for you not to upgrade your PWA on iOS 13 with the Dark Mode support.

The good thing is that it’s easily achievable and follows the same rules as adding the Dark Mode support for desktop-class web apps. There’s a little limit here though. We can’t change the App Icon depending on the current theme.

The Motion Sensor API got safer

The support for the phone’s motion sensors like an accelerometer and a gyroscope harkens back toiOS 4.2. Initially, it was available for everyone. Due to some unfair usage of the API to create digital fingerprints of the users, it became explicitly turned on/off by every user in the Settings.

This behavior changed in iOS 13. The Motion Sensor API stopped working at all! Wait, what? The thing is, the App needs to ask the user for permission to use motion sensors. And because of that, you need to update your App to display such a request.

The iPadOS is a thing now

This year, the iOS diverged to iOS for iPhone and iPadOS for… well, for iPad. This is not just a naming change. That’s what we all hope at least. What’s important for us is Apple decided to give most of the iPads a desktop-class browser. Depending on the viewport Web Apps are rendered in desktop or mobile mode.

The desktop version is used when the browser/Progressive Web App takes the whole screen; the mobile one is rendered in the Split Mode and on iPad Minis by default. Unfortunately, PWA on iOS 13 doesn’t reflect the change of layout when the user switches to/from the Split Mode. Whenever they do, there’s a need to kill the App and run it again.

Other noteworthy aspects

Thanks to Pointer Events, now you can tell what device was used to interact with the Web App. This is especially useful on iPadOS where the user can use a finger, an Apple Pencil and even the classic, old-fashioned mouse. Also, PWAs are inspectable right now, making the development process easier.

On the other hand, there are still some things missing. Some features were removed as well. We still can’t open an external link in Safari, the Spotlight feature opens the web page instead of installed PWA. iPhone 11 lacks the 3D Touch features and the support for it in Web Apps disappeared for every iOS 13 device out there. And we still can’t use Push Notifications.

PWA on iOS 13? A slow evolution

As you can see, things are changing slowly. Even if they don’t say it out loud, Apple has moved a bit closer to Progressive Web Apps. While the development of Progressive Web Apps for iOS is still more difficult than for the Android-based phones, it gets better over time. And there’s no doubt your business can still benefit from PWAs. Even on iOS.

Our company invests time in Progressive Web Apps by developing and popularizing them. If you’re more interested in this topic, let’s stay in touch.