April 10, 2018
And so it happened. Progressive Web Apps are no longer limited to Android users, but can be now accessed by iPhone and iPad owners with the 11.3 iOS update. On March 30, Apple has quietly added support for technologies that make PWAs work (although you will not find any mention of this in their official press release), thus allowing you to install apps without any approval from the App Store. The PWAs on iOS are still far from being as smooth as they is on Chrome, Opera, or Firefox, but still it’s a big step for Apple.
Community-approved Progressive Web App logo
iOS 11.3 consults the Web App Manifest when adding apps to the home screen. The Manifest carries important metadata like names and icons, which are key to creating a native-like experience. Thanks to the Manifest an app can be pinned to the home screen, can be adjusted to fit different screens and devices, and render elements for them. Some key features are still missing (hey, it’s only the first beta!), so you will not be able to change the orientation, get full screen view, or add a splash screen.
Those two technologies creates PWA providing experience of an app at the same time not abandoning web. It’s basically a website, built with modern technologies and providing a whole new experience for the user. If you already have your PWA developed for Android, every user with up-to-date iOS on board will be able to access it using their Safari browser.
Adding a PWA to your iPhone is not as easy as it is on Android. Obviously, one of the most important things about PWAs is abandoning the App Store and allowing users to enter the app from the browser. So how does that happen exactly?
Once you enter a website, you won’t be greeted with the Web App Banner and you will need to use “Add to Home Screen” option in the share sheet. As you can in the screenshots below, there’s no sign that you’re adding a PWA rather than a website.
This is what adding a PWA looks like. The process is identical to adding a website shortcut to the Home screen.
You can name the app whatever you like when adding it to your device and it will look like any other app on your Home screen.
The app opens in full screen and looks pretty great. That black status bar though...
Note that you can install PWA only using Safari. No other browsers on iOS, like Chrome and Firefox, are capable of using Service Workers.
Running on iOS, PWAs can access geolocation data, camera, Apple Pay, sensors, audio output, speech synthesis, and more.
As support for PWAs on iOS is only in beta, many important features are still missing, so it’s not all that surprising that Apple decided against making a big deal out of adding PWA support in the latest iOS release. As of right now, it comes nothing close to Android and the native iOS experience. What are some key features still missing from the current version?
There are a few great cross-platform solutions, but none of them has a chance as big as PWAs to become a standard for the app world. With PWA, you get a highly performative Web-mobile hybrid—adjusted to all kinds of devices, fast, and installable. It definitely is a part of the future.
PWA and native apps are not mutually exclusive. Relying exclusively on PWA when the implementation on Apple’s side is still less-than-ideal, however, may not be the best idea. As you could see in the example above, once I entered the Emirates website, it suggested downloading its native app from the App Store anyway, and I believe Apple will continue to encourage users to install verified apps from the store.
If you already have a PWA that works on Android, it will work for iOS users as well. It does not mean that they will have the same, great experience as Android though... Not yet, at least!