Table of contents
Update: iOS 14 Beta comes with new systemic changes to the way it supports PWA. Read both of our iOS 13 Beta & iOS 14 Beta articles to see for yourself how everything is changing for the better!
—
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.
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, we’re to help you figure out exactly what PWA is. And for store owners looking for a way to enhancer your store presence and boost revenue, well, look no more as Magento PWA is proven to be the cost-effective and the current best way to drive user engagements.
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
Web Share
Form additions
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
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.
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”)
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)
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.
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.
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.
Further Reading:
12 Successful PWA Examples That Will Inspire You to Build One
