What’s new on iOS 12.2 for Progressive Web Apps

⚠️ Updated version of this article ⏩ firt.dev

In a nutshell

“Not secure”: the new flag when you browse HTTP websites

The new Lifecycle

New PWA Lifecycle on iOS 12.2 according to my testing. focus, blur and visibility events only happen when loaded over HTTPS.

Detecting state change

When does the Web context run?

The process

PWA Browser

At the left, what happens today in iOS 12.1, the external URL opens in Safari with a small “back” button to your PWA in the status bar. At the right, two images on how it works on iOS 12.2. The URL opens in an In-App browser within the visual scope of your PWA

Sharing data with Safari

The Done button to return to the PWA only appears when you load another page after initial external site load.

Detecting PWA Browser

Going back to your app

Playing with the PWA lifecycle

Opening links using Safari is impossible

If you install the appsco.pe PWA you can launch suggested PWAs within its boundaries but you can’t install them or transfer the navigation to Safari

The PWA Browser is nice but…

Motion Sensors Disabled

Navigation Gestures

Back gesture in action in a standalone PWA

Other changes

Web Share

Web Share works only after a user gesture and lets you share a link with a text on any native app, including native behaviors such as AirDrop or Copy.

Form additions

With <input type=color> we can render a color picker. There is a bug here: on landscape mode the last row of colors is unselectable
With datalist, we can have an open input text box with suggestions on the keyboard and within a dropdown menu

Other Problems

PWAs on iOS 12.2 are still working under “Web” and “WebApp1” and not under Safari or SFViewController. The technical reason for this behavior is for another article :)

Web App Manifest support

Apple is still lying to us saying that the Web App Manifest is “In Development” and not “Partially implemented” as it actually is

Bugs

Weird keyboard problems using custom keyboards, such as: not updating layout after an orientation change or seeing no keys at all.
My PWA (without any launch image) using the Air Horner image for some reason
Ghost windows within the iOS multitask switcher

Still waiting for

mobile+web developer, author, trainer, speaker | Check firt.dev for more articles and learning experiences | PWAs, Web Performance, JavaScript, Mobile Apps