Progressive Web Apps on iOS are here 🚀

With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive Web Apps” (PWAs). It’s time to see how they work, what are their abilities and challenges, and what do you need to know if you already have a published PWA.

⚠️ Updated version of this article ⏩ firt.dev

Image for post
Image for post
This App is a PWA and it appears full screen -offline capable- on an iPad. It also appears in the iPad dock as any other native app from the App Store.
Image for post
Image for post
Can you tell the difference between the native Google Maps app and the PWA version?

Wasn’t Apple the creator of PWAs anyway?

Let’s be honest here; while Google with the Chrome team coined the term PWA, the idea was initially available on Safari at the original iPhone OS. In 2007, Steve Jobs announced “one more thing” in the WWDC: how to develop apps for the original iPhone and it was, surprise, web apps! The App Store was not on the original roadmap, and the native SDK wasn’t available during the first year of the device. From an Apple’s perspective PWAs even today are just “web apps from the home screen,” and the icon is something referred as a WebClip.

Jump to 10:50 to see the mention to Apple and PWAs in 2007
Image for post
Image for post
Steve Jobs presenting PWAs (with a different name) in WWDC 07 with the first iPhone

Wait there, so the app didn’t pass any App Store quality test, right? 🤔

Yes, that’s correct. However, the app will run only under the browser’s or the Web Platform security and execution model. That means you can “publish” apps that are not approved in the store, such as an internal app for your company’s employees (and yes, also adult content), but you can’t access pure native features, such as Face ID on iPhone X or ARKit for augmented reality. Or at least, you need to wait for the Web Platform to catch those new features.

Abilities of PWAs on iOS

With the Web Platform on iOS you can access:

  • Sensors (Magnetometer, Accelerometer, Gyroscope)
  • Camera
  • Audio output
  • Speech Synthesis (with headsets connected only)
  • Apple Pay
  • WebAssembly, WebRTC, WebGL as well as many other experimental features under a flag.
Image for post
Image for post
Can you detect these icons are all PWAs on an iPhone?

Limitations compared with native iOS apps

  • The app can store offline data and files only up to 50 Mb
  • If the user doesn’t use the app for a few weeks, iOS will free up the app’s files. The icon will still be there on the home screen, and when accessed the app will be downloaded again
  • No access to some features, such as Bluetooth, serial, Beacons, Touch ID, Face ID, ARKit, altimeter sensor, battery information
  • No access to execute code while in the background
  • No access to private information (contacts, background location) and also no access to native social apps
  • No access to In App Payments and many other Apple-based services
  • On iPad, no access to work with Side or Split Views sharing the screen with other apps, PWAs will always take the whole screen
  • No Push Notifications, no icon badge or Siri integration
Image for post
Image for post
Even if you have a PWA installed with an icon and the name Tinder, Siri can’t find it

What PWAs can do on Android and not on iOS

  • On Android you can store more than 50 Mb
  • Android doesn’t delete the files if you don’t use the app, but it can delete the files under storage pressure. Also, if installed or used a lot by the user the PWA can request Persistent Storage
  • Bluetooth access for BLE devices
  • Web Share for accessing native share dialog
  • Speech Recognition
  • Background Sync and Web Push Notifications
  • Web App Banner to invite the user to install the app
  • You can customize (a little bit) the splash screen and the orientations you want
  • With WebAPK and Chrome, users can’t install more than one instance of a PWA
  • With WebAPK and Chrome, the PWAs appears under Settings and you can see data usage; on iOS everything appears under Safari
  • With WebAPK and Chrome, the PWA manages intents for its URL, so if you get a link to the PWA, it will be opened in standalone mode and not within the browser’s window.

What PWAs can do on iOS and not on Android

  • Users can change icon’s name before installing it
  • They can be configured in a configuration profile, so corporate users can receive PWAs shortcuts from the company (that’s a good one!). Safari uses the term WebClip for this feature; however it doesn’t seem to be reading the Web App Manifest (according to the documentation)
Image for post
Image for post
Configuration Profiles can include WebClips, or PWA icons

But if there is no App Store, how do you install a PWA? ⚠️

That’s one of the most significant challenges on iOS as there will be no prompts or invitations from Safari (known as Web App Banners on Android). So the user has to go to your PWA URL somehow within Safari and then manually press the Share icon and then “Add to Home Screen.” There will be no indication that a website you are visiting is a PWA.

Image for post
Image for post
When you go to Tinder.com you can ignore the native app banner at the top and click Share, Add to Home Screen. If you will give user instructions to install, keep in mind the button is localized based on system’s language
Image for post
Image for post
I already have the app, right?

I already have a PWA, will it work on iOS right away?

Your PWA will be available for installation right away after your users update to iOS 11.3. You don’t need to opt-in for iOS. Every PWA is available for installation. But that doesn’t mean that everything will work as expected.

Image for post
Image for post
The Uber PWA looks really nice. But if you click on “Login” or “Continue” the authorization goes to Safari so you are out of the standalone PWA… therefore, it’s useless.
Image for post
Image for post
If you don’t do anything, your PWA might get a black over black status bar, so the user won’t see the time, battery status or any notification 😣

What won’t work

  • The display: fullscreen and display: minimal-ui won’t work on iOS; fullscreen will trigger standalone, and minimal-ui will be just a shortcut to Safari. You can get something similar to fullscreen (the status bar will exist but over your app) using the cover-fit viewport extension or a deprecated meta tag though.
  • If you rely on Background Sync you should have a backup implementation
  • No way to lock the orientation of your PWA
  • The theme-color to style the status bar won’t work; you can use the deprecated meta tag for black or white status bars, or you can use a CSS/HTML trick to emulate a theme-color.
Image for post
Image for post
Starbucks PWA doesn’t have a back button from the “Sign up” section, so no way to cancel the operation, you need to reload the PWA
  • Your Android icon might look terrible on iOS as Apple doesn’t support transparent icons, so check it out.
Image for post
Image for post
Google Keep PWA relies on Web App Manifest’s icons, so on iOS it’s just a screenshot. You must provide iOS icons through an Apple non-standard link tag
  • There is no splash screen, so most color properties from the manifest are ignored
  • No manifest events will be fired, so if you are tracking installation through these channels, it won’t work on iOS (but you can check navigator.standalone instead).

What to have in mind

  • Your PWA won’t keep state between sessions, if the user gets out of a PWA, it will be restarted when coming back, so if you need the user to validate an email, SMS or do a two-factor authentication, have that in mind to offer a proper solution.
Image for post
Image for post
All your inactive PWAs will appear as white screens not matter what. Remember they are not running and if you go back to them, they will start from scratch
Image for post
Image for post
Same white screen problem happens on iPad
  • There are bugs when your app runs in standalone mode. Don’t rely on Safari for testing.
Image for post
Image for post
Nasa’s attempt to use the notch area for the PWA is giving some UX glitches
  • Sometimes, you add to the home screen and the manifest is not used, so just a shortcut is installed ☹️.
Image for post
Image for post
A Starbucks-branded Google Maps? No, it’s just iOS after you use open PWAs in a row; it makes these weird things wherein the history, one app loads the wrong URL
  • Each pseudo-browser such as Chrome or Firefox and each app using the WebView, such as Facebook In-App browser, does not support Service Workers (it was working during the betas), so no files will be installed. My guess is that an API might be needed for WKWebView to let the app owner decide what to do with Service Workers but… who knows.
Image for post
Image for post
Using Safari TP you can debug the client and the service worker (just guess which one is which) both on Safari and “Web” (PWA on the home screen). Also, connecting via network is handy!
Image for post
Image for post
The Service Worker’s inspector is still experimental; for example, there is no support for seeing the Cache Storage contents
Image for post
Image for post
Image for post
Image for post
What is that empty app?

Written by

mobile+web developer, author, trainer, speaker | firt.mobi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store