Progressive Web Apps on iOS!

In recent years many new web standards like the Service Worker and Web Notifications evolved, which ultimately enabled Progressive Web Apps. Since then, Progressive Web Apps could only show their true strengths on Android. With the latest news coming from Apple to support Service Workers and the Web App Manifest standard on the Safari browser, Progressive Web Apps on iOS are becoming reality.

Introduction

In this blog article I want to demonstrate how Progressive Web Apps work on the newly released iOS 11.3.0 beta 3. I’ll also look at the differences of PWAs on Apple’s iOS compared to Google’s Android.

Before we dig too deep into the topic I would like to briefly recall what Progressive Web Apps are. In short, Progressive Web Apps are experiences that combine the best properties of native and web, without the restrictions that native applications bring along. PWAs do not require to be installed, work on the first browser visit, and are the next evolution of simple web apps, since they enable new features such as push notifications, offline capabilities, and background synchronization by solely relying on modern web standards.

One thing to keep in mind is that Progressive Web Apps will gain more features over time, as applications progressively adapt to the available platform features (e.g. the Service Workers or Push API). As for iOS 11.3.0 beta 3, only the Service Worker and Web App Manifest spec have been added.

Other modern standards like Push Notifications and Background Synchronization are not available on Safari 11.0, but the beauty of Progressive Web Apps is, that they still work and deliver a good user experience, just with fewer features; progressive enhancement is the key here. However, the most anticipated feature by far is the Service Worker, which enables offline capabilities by intercepting and caching network requests. The Service Worker in combination with the Web App Manifest enable Progressive Web Apps to be installed on the user’s iOS Home Screen.

How to experience Progressive Web Apps on iOS

Since PWAs are relatively new to the iOS world, I would like to demonstrate in the following enumeration (illustrated by the screenshots below) how a simple PWA can be installed on any iPhone with iOS 11.3.0 or higher. Because iOS 11.3.0 is still a beta version up to this date, I’ll also explain how to obtain and install Apple’s newest beta version on your device first.

1. Open the Safari browser and head over to https://developer.apple.com.
2. On Apple’s developer site, you can create a free Apple Developer account.
3. Head over to Apple’s developer download page https://developer.apple.com/download/ and hit download on the iOS 11.3 beta 3 Configuration Profile — This configuration profile allows you to receive the newest iOS beta updates over the air (OTA).
4. Install the downloaded profile. After installing the profile you should be able to find it under Settings > General > Profiles > iOS beta Software Profile.
5. Reboot your iOS Device.
6. Navigate to the Settings > General > Software Update.
7. You should be able to install the latest iOS beta update. In my case it was iOS 11.3.0 beta 3 (build 9Q117m).
8. After installing the newest iOS beta version, open the Safari browser and open your favorite Progressive Web App (e.g. 2048, Shrink Me, Copy2Me, Flipkart).
9. Now you can add the PWA to your iOS Home Screen by pressing the center icon on the bottom bar (see screenshot 9 for more information).
10. Next, a modal dialog should appear from the bottom of your screen. Select the button ‘Add to Home Screen’.
11. Enter any name you like for the new app you are about to install, and press ‘Add’.
12. Eventually you should be able to find the newly installed Progressive Web App on your iOS Home Screen.
13. Last but not least, press the newly installed app icon and the application should launch in full screen (without the browser bar).

Observations

These are the observations I made while testing the iOS 11.3.0 Developer beta 3, build 9Q117m (Released on February 20th) on my iPhone 7 Plus.

Multiple Service Worker instances

The first thing I noticed right away when testing the Copy2me Progressive Web App on my iPhone was that there appeared to exist multiple Service Worker instances.

When I opened the Copy2me app in the iOS Safari browser, I was greeted with the sign-in screen. I followed the instructions to sign-in. After the sign-in process, the app redirected me to my user data (see screenshot 1). As everything worked as expected, I added the app to my Home Screen. From there I pressed the new app icon in order to launch Copy2me.

The app launched in full screen mode (see screenshot 2), but the result wasn’t what I hoped to see, since the sign-in screen reappeared. I expected to see my user data, because I already signed in from the Safari browser. This meant that there were two different Service Worker instances active — one on the Safari browser and the other on the installed Copy2me application.

This behavior is totally different compared to Android, where each PWA shares the same Service Worker and cache, no matter if the app is launched from the Home Screen or the browser. I for sure hope that Apple changes this behavior, as multiple Service Worker instances with their own cache might confuse users.

Safari quits Service Worker instances

One thing that is completely different from other browser implementations is how the Safari browser manages Service Worker instances. Taken from Apple WebKit Blog:

“To keep only the stored information that is useful to the user, WebKit will remove unused service worker registrations after a period of a few weeks. Caches that do not get opened after a few weeks will also be removed.“

In other words, if a user installs a PWA and decides to only use the installed app multiple weeks later with no stable internet connection available, the user might just see a blank screen. This can be a huge deal breaker for some users.

Imagine you install a note taking Progressive Web Application on your device, where you keep track of all your important notes, and thus you rely on the application to always work. You expect the app to always work no matter how often you use it or in what environment (e.g. no stable network). This restriction also limits future Service Worker APIs such as Background Synchronization, which requires a Service Worker instance to stay active all the time.

Airplane Mode issue

I also noticed an issue where the user receives a pop up telling that they are in Airplane Mode (see screenshot 1), even though the launched PWA works totally fine without a stable network connection.

To be fair, native iOS applications also display this warning, but only when the app tries to fetch data from the network. However, I tested multiple PWAs (e.g. the 2048 game) which don’t fetch data on application startup, and still the iOS message appeared.

On the upside, this issue is just a minor one and shouldn’t bother too much, since users typically rarely have airplane mode active on a daily basis.

No option to debug Service Workers on iOS (yet)

Up to this date it is still not possible to debug Service Workers on your iOS device. While the Safari Technical Preview shows you which files were loaded from a Service Worker (see ‘Transfer Size’ on screenshot 1), it is missing the ability to fully debug Service Workers on your iPhone for instance.

Still, it is possible to debug Service Workers on your macOS device, as the following screenshot shows. On the upside, it can be expected that Apple will sooner or later provide the ability to also debug Service Workers your iOS device.

Conclusion

While Apples Service Worker implementation on iOS 11.3.0 beta 3 may not be perfect (yet), it is great news for the whole web developer community and for Progressive Web Apps in general.

IMHO, adding Service Worker support to the iOS platform is the last milestone in order for Progressive Web Apps to become a huge success, as many companies are only willing to create sophisticated web applications if they work offline on any mobile platform.