Progressive Web Apps

PWAs on iOS 13 beta: Here Comes Good News

pwa-ios-13-beta

This Latest Beta Version Causes Excitement

This week, a groan went through the ranks of many developers. New iOS 13 features are poised to change your iPhone software – they were announced by Apple at its WWDC 2019 keynote, and the first iOS 13 beta is available now. Well, things are a little different this year, as iOS 13 for iPad will actually be called iPadOS.

Along with much-improved performance, a new Dark Mode and a completely overhauled Maps app, there are some new improvements regarding Progressive Web Apps and it totally made my day. We’ll point out the newest changes of PWAs on iOS 13 beta compared to it on the older iOS versions.

iOS 13 beta 1

As we’ve known, one year after the first initial support for PWAs on iOS, Apple released iOS 12.2 (September 2018) for iPhone and iPads with what it seems to be the biggest step forward in the last year, addressing the two most annoying problems we’ve been dealing with PWAs: reload effect and OAuth logins. Of course, we’ll discuss more on the development of PWAs under iOS 12.2 first. Basically, the latest iOS 13 beta seems to remain all good things of the previous version and plus upgrades that can solve some bugs and problems.

The term of PWA or Progressive Web App was first introduced by Google back in 2015. If it’s quite new to you, don’t worry, this article can help: “What Is PWA? All You Need to Know About Progressive Web Apps”.

The good of PWAs on the previous version (iOS 12.2)

First, we would like to make a list of some great additions that are welcome to the PWA world on iOS 12.2:

  • Gestures now available for navigation within your PWA (aka back gesture)
  • Web Share
  • Intersection Observer
  • <datalist> support
  • <input type=color> support
  • inputmode attribute support
  • Abortable Fetch
  • CSS Conic Gradients
  • Changes in app’s lifecycle and external links management
  • New experiments available (but disabled by default): Pointer Events, CSS Custom Properties, CSSOM View Scrolling, CSS Painting, CSS Typed OM, MediaCapabilities, Media Recorder, Server Timing, Web Authentication, WebGL 2.0, changes to WebRTC
  • New experiments available and enabled by default: every <a> without a target will imply a rel=noopener, IntersectionObserver, VP8 codec and H264 simulcast for WebRTC
  • Preload, Storage Access, Service Worker and the Cache Storage APIs are not an experiment anymore and they can’t be disabled now

Let’s them in more detail:

Navigation Gestures

Back gesture in action in a standalone PWA in IOS
Back gesture in action in a standalone PWA

Web Share

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

Form additions

PWA color picker iOS
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
datalist PWA iOS
Input text box PWA iOS
With datalist, we can have an open input text box with suggestions on the keyboard and within a dropdown menu
Input text PWA iOS
Ghost windows within the iOS multitask switcher PWA
Ghost windows within the iOS multitask switcher

Bugs on PWAs under iOS 12.2

There were some things that are not working fine in the PWAs on iOS 12.2, such as:

  • PWAs running in standalone mode are not inspectable or debuggable using Safari or Safari TP anymore, only within Safari
  • Web Authentication is available as an experiment, but even when enabled I couldn’t make it work. Same for other experiments, such as MediaRecorder
  • Page Visibility events are not fired on PWAs while in standalone mode. That will be a huge problem if not solved.
  • The ghost apps after you delete PWAs from the Home Screen

So, what’s new with PWAs on iOS 13 beta?

Better user experience

With PWAs on iOS 13 beta 1: Such a glad thing to say, the user experience is much better and some annoying bugs added in 12.2 seem solved! But they did not mention these improvements in docs or at any session in The Apple Worldwide Developers Conference (WWDC) 2019, seems like a pity. Share sheet has changed, and ‘Add to Home Screen’ is below the fold which is greater than the old user experience

PWA Pinterest iOS 13 beta
Source: Twitter @firt Maximiliano Firtman

One good thing is when several PWAs opened, each of them with its own screenshot of last execution as big brother native apps! Returning to a PWA has a faster startup now without white blinks, and if you terminate an app dragging it out, it actually starts from scratch after.

PWA Twitter
Source: Twitter @firt Maximiliano Firtman

Some bugs are solved!

Bugs with the done button when the In-App browser is on screen seems gone now. The In-App browser got the new settings menu (but still no “Open in Safari”)

PWA Trivago
Source: Twitter @firt Maximiliano Firtman

Split view with PWAs on Ipad

On iPad, PWAs can be part of Split-View spaces with other native apps or other PWAs! (Only one instance is permitted)

PWA Trivago ipad view
Source: Twitter @firt Maximiliano Firtman
PWA Trivago and PWA Uber split view on ipad
Source: Twitter @firt Maximiliano Firtman
 PWA Trivago and PWA Uber ipad split view
Source: Twitter @firt Maximiliano Firtman

Inspectable PWA

And PWAs are inspectable again!

In the past, with iOS version: 11.2 (in 2017), when I add the app to home screen and try to debug, it shows ‘No Inspectable Applications’. Since the menu to open the inspector is missing when the PWA is opened like a desktop app and you need the keyboard shortcut to show it.

But PWA on iOS 13 beta, it can be inspected easily thanks to upgrades from Apple.

Inspectable PWA Uber Trivago
Source: Twitter @firt Maximiliano Firtman

Bug report app

There is a new bug report app, built with create-react-app. Apple, as many other React devs, kept the default manifest unchanged. So it’s a PWA with no iOS icon (React icon on other platforms) and React title.

Apple feedback assistant for bugs on PWA
Source: Twitter @firt Maximiliano Firtman

Still waiting for…

Many of the expected APIs and behavior compared with other browsers are still not supported, such as:

  • Web Push
  • Background Sync
  • Page Lifecycle
  • Service Workers on WebViews (so no PWAs on Chrome or Facebook)
  • Universal Links / Link Capturing

Hopefully in the near future, Apple will put more effort on improving PWAs support features.

Is Apple becoming more PWA-friendly?

The answer is probably YES. In any case, it’s a big step for Apple to have moved closer to PWA technology and opened up to it. PWAs under iOS 12.2 and iOS 13 beta: that’s what many have been waiting for. After all, competitor Google is leading the way in this respect and is always pushing the development of Progressive Web Apps. Of course, we’ll keep you posted on our blog about Apple’s next steps. Subscribe us with your email to receive the latest news on PWAs.

PWA is the future of mobile applications. There’s a possibility that they will replace native applications with time, becoming a perfect combination of native app and website. In a world where the speed to adopt new technology is a competitive edge, businesses that manage to embrace the PWA moment earlier, can significantly drive revenue, increase user engagement while staying ahead of the competition. If you prompt to build a PWA version for your app, contact us to receive a demo right away.

Recommended post: Progressive Web App (PWA) vs Native App: Which suits you better?

3 Comments

Mia

Designer and Content writer. Love food and Robert Downey Junior. Be a gardener when growing older.

    avatar
    2 Comment threads
    1 Thread replies
    0 Followers
     
    Most reacted comment
    Hottest comment thread
    3 Comment authors
    VincentDomBrandon Edley Recent comment authors
      Subscribe  
    newest oldest most voted
    Notify of
    Brandon Edley
    Guest

    Thanks for the info. Still waiting for iOS push notifications but I am pleased to see there is some level of movement from Apple.

    Dom
    Admin

    Yes we’re waiting for push notifications too. It’s such a critical function that Apple seems to forget.

    Vincent
    Guest
    Vincent

    Any progress is good progress, but I will need push notifications soon.