Why Build Progressive Web Apps: PWAs for iOS

ago, I wrote an article on the PWA experience of
beta versions of iOS 12.2, and in this video, I want
to share some of my findings with you. My name is Tom,
and today’s episode of “Why Build
Progressive Web Apps” is focused on why
now is a good time to start building
progressive web apps for iOS. [MUSIC PLAYING] While PWAs work on
iOS, they require the user and the developer to
jump through a few extra hoops to get that installed
full-screen experience. Luckily, with the latest
betas of iOS 12.2, the situation has
improved a fair bit. In this episode, I
want to highlight some of the improvements
that have been implemented and talk about
still-existing limitations. You can also read all the
details in the linked article. Unfortunately, iOS
doesn’t support the “beforeinstallprompt”
event and doesn’t have an Add To Home Screen prompt
or banner like Android. However, iOS users
have been able to use the Add To Home Screen button in
Safari’s share sheet for ages. Web app manifest support is
under development and only partially supported in
Safari, which means for icons and splash screen, you still
have to rely on the old-school Apple web app link
relations “apple-touch-icon” and “apple-touch-startup-image”
for app icons and splash screen. Or just use PWACompat,
a small library that reads the web app manifest,
and on iOS, adds the right set of meta tags, creates the icons,
and generates a splash screen image for you. In-scope and out-of-scope
navigation work properly now, which means PWAs remember their
previous state when restarted. Now, when you open
an out-of-scope link, like the office page in
the AffiliCats sample app, it opens the page and a
full-screen in-app browser rather than kicking you
out of the app completely, and you’re right back in the
app where you were before. When you multitask
away from a PWA, the state will be
preserved when you return. Before, Safari
would reload the PWA and lose the state entirely. It’s not perfect yet,
and there’s currently a short delay, but it is way
better than it used to be. Apple has also introduced
navigation swipe gestures, so now you can
swipe back and forth from the left and
right of the screen just like in native
applications. These gestures are still new and
may not be obvious to everyone, so it definitely makes sense
to show an in-app Back button. You can detect if your app is
running in standalone mode– without a URL bar at the
top and without a button bar at the bottom– by checking the proprietary
“navigator.standalone” property. The standard display
mode meta query that you would use usually
is not supported yet, but you can combine the
two approaches in one call. Personally, I’m really excited
about the new Web Share API, which makes it
easy for PWAs to share content with other installed
apps using the iOS share sheet. Twitter added this to their
PWA, and I use it a lot. If there’s a tweet I want
to follow up with later, I share it with myself
via email and can then respond to it later. In this episode, I focused on
new PWA capabilities in iOS. And while there’s still
room for improvement, I’m extremely excited
about the progress Apple has made in the latest betas. You can help Apple
prioritize the features they work on by detailing
your use cases in comments on the PWA-specific bugs that
I’ve collected in my article. I hope to see you again in
the next episode of “Why Build Progressive Web
Apps,” where I will talk about offline
analytics with Workbox. [MUSIC PLAYING]

Be the first to comment

Leave a Reply

Your email address will not be published.