Service Workers on iOS
[originally posted at infinite imaginations]
For every release of a new device is a release of an OS update or upgrade. Apple fanboys and developers were excited to see if anything from Safari Technology Preview will land in the update. On March 27, Apple held an event with rumours floating around about the most anticipated iOS 11.3 packed with features. One of the biggest rumours is the arrival of service workers.
What is so important about iOS 11.3?
There is a lot of updates that have been brought to the users. Most of them are bringing better experiences to the user like the new AR experiences, Animoji and the battery fix that has been plaguing iPhone users with the 11.2 version. There is, however, one feature that has made frontend developers all hyped up that is not mentioned in Apple news and blogs — the arrival of service workers.
On December 20, 2017, WebKit tweeted the release notes for the Safari Technology Preview and Service Workers were enabled by default.
What did this mean? Progressive Web Apps (PWA) are coming to iOS devices! Service Workers are the heart of every PWA. To know more about PWAs, have a read of the previous article I wrote. For months, developers have patiently waited for the service workers to arrive officially in iOS devices. We all hoped for the release during the March event, but wasn’t even mentioned.
I gave up hope when Twitter-verse was still complaining about the battery issue and shouting out at Apple to drop the update already. A few days later, they did drop the update without any big news. I grabbed an updated iPhone to see what features are available and visited whatwebcando.today to check the features and this is what I saw:
- ✔️ Offline Storage
- ✔️ Offline Mode
- ❌ Local Notifications
- ❌ Push Messages
- ❌ Home Screen Installation
These are the most important features that can give a seamless experience for both Android and iOS. These features are already enabled by default in Android to give that “app-like” experience. We are now just waiting for iOS to play catch-up.
The core pillars of a PWA are Reliable, Fast and Engaging. These pillars enhance the user experience on both mobile and desktop sites.
Being reliable means that when it is launched from the user’s home screen, it will load instantly regardless of the network state. There will be no “down time” and will never see the downasaur. The PWAs will install on the user’s home screen (Home Screen Installation) and cache (Offline Storage/Mode) — the necessary assets to bring an optimal experience without searching through the seas of apps in the app store.
Engaging means that the PWAs feel like a natural app on the device and is installable on the user’s home screen (Home Screen Installation) without the need of an app store. On top of that, push notifications (Local Notifications and Push Messages) help users re-engage with the site. These push notifications were once exclusive to apps, now it has arrived to the mobile web.
So, what can a PWA do and not do in iOS?
There is only little that you can do for now with only Offline Caching available for iOS. I have managed to tinker around with some of the PWAs that I have developed on iOS. Here are my findings:
✔️ Offline Caching
Hurray! The first step of a PWA has landed on iOS. With this feature, the service worker will cache the necessary assets for offline usage or when the network is not reliable. This will launch the PWA (once installed) quicker than usual keeping the users engaged and not drop off. This is helpful for any static or brochure type apps where a network connection could be crappy. Once installed, the user can browse through the app without relying too much on the network.
❌Home Screen Installation
This one is a deal-breaker for me. One of the features that I like about PWA is letting the users know that they can “install” the PWA on their home screen with a tap of a button. This is not yet implemented on iOS devices and hopefully we will see this in the future. A work-around for this is to create “Add to home screen banner” for iOS devices. It will give simple instructions on how to add the PWA to the home screen.
Once the user has added the PWA to the home screen, the device spins up another instance of the PWA. This means that if the user has launched the PWA from the home screen when offline or in a crappy network, it will load the PWA again from scratch and cache it again. Not only is it troublesome — it’s not a good user experience for iOS users.
❌Local Notifications / Push Messages
If this feature manages to land in iOS devices, it might be the death of native apps. This enables users to receive notifications on their mobile devices without the need of installing an app and let the users engage quickly.
Apple needs to play catch-up
Since the launch of the iPhone 3Gs, we have always held high expectations from Apple. With Apple lagging behind in web technologies, they must catch-up with the latest trends. We developers will have to be a little bit more patient in waiting for more service worker features. It will get there, we didn’t actually think that service workers would land in iOS because it might be the cause of death of their App Store.
It’s a start. The rest will eventually follow.