A New Day for PWA
I’ve been excited about Progressive Web Apps (PWA) for a long time. I first heard the phrase from an Addy Osmani blog article in 2015, and loved how he and others had codified a set of design principles into this new Progressive Web App idea.
But like everything else in engineering, the phrase “Progressive Web App” has been diluted to mean many things, and is now often used to describe all mobile web development. And on the other end of the spectrum, the phrase is often used to indicate using a specific browser API, such as Service Worker.
The simple definition of a Progressive Web App is: a mobile web app that feels and behaves like a native mobile app.
There are a few technical requirements for a mobile Web app to pass muster as a true PWA:
- The app should be usable very quickly on all networks and devices
- The app should be installable to the mobile device’s home screen to quickly open later
- The app should load without a network connection
- The app should be able to send notifications to users when the app is not open
For a more comprehensive checklist, see Progressive Web App Checklist on developers.google.com.
Even if an app doesn’t check all the boxes all the time, focusing on making it a PWA will make it a better experience for users anyway.
Why PWA Is Good for Business
One may look at PWA and think, “why bother making a Web app feel like a native app, instead of just making a native app?” Good question. Here’s why. The Web brings with it several serious advantages over native applications, both in user experience benefits and in team productivity.
Let’s consider an app that lets users review restaurants, and compare how a user’s first experience with the app would be if it were a native app compared to a Progressive Web App.
Native App
- Justin is on a train with a 3G connection
- Justin finds a link to a local restaurant “Victor’s Café” shared by his friend, Jeff on Facebook
- Justin clicks the link on his iPhone
- Justin is prompted with a splash screen to install their native mobile app
- Justin clicks the link and is taken to the app store
- Justin clicks “Get” to begin installing the app
- Justin is prompted to scan his finger with TouchID to authenticate the download
- The app begins downloading. It’s about 114 MB, so Justin waits about 10 minutes for the app to finish downloading.
- Justin moves on to something else while the app downloads
- An hour later, Justin is hungry and remembers he was going to check out the restaurant, so he opens up the newly installed app. He sees a list of restaurants near him, but not the one he was interested in.
- Justin goes back to Facebook
- Justin goes to Jeff’s profile to find the link again
- Justin clicks the link, which now opens the native app with the restaurant’s details, menu, and reviews.
- Justin is so frustrated by the whole experience, that he gives the restaurant a terrible review, having never even been there.
Web App
- Justin is on a train with a 3G connection
- Justin finds a link to a local restaurant “Victor’s Café” shared by his friend, Jeff on Facebook
- Justin clicks the link on his iPhone, which opens the web page with the restaurant’s details, menu, and reviews.
- Justin makes a reservation for that evening.
- The app offers Justin the option to get updates with other restaurants or offers he might like.
- Justin clicks “Enable” and will now get periodic restaurant suggestions from the application.
Ship Quickly, Ship Often
In addition to lower friction for first-time users, Progressive Web Apps provide immense productivity benefits to development teams over native apps. For one, developers can all focus on developing features in one place for desktop and mobile, and can deploy changes easily and frequently without waiting for App Store approvals, and waiting for users to manually update their installed applications.
That all sounds great, and these are benefits most teams already know about. So why hasn’t every team shifted their focus to Progressive Web Apps?
The Elephant in the Room
Most browsers have eagerly adopted (or at least expressed intent to adopt) the new APIs required to deliver push notifications and offline capabilities, namely the Service Worker API, but one big browser engine has, until recently, kept mum about their intentions or plans to adopt Service Worker. That browser engine is WebKit, which powers the Safari browser on iOS and Mac OS. Without Service Worker support in webkit, PWA on iOS have been limited in their ability to provide offline support and push notifications. Web developers have been asking for a couple of years when WebKit would implement Service Worker, without any response or hints from the WebKit team. Then finally, without much fanfare, the first changelist to introduce Service Workers landed, and the WebKit status page updated the Service Worker status from “Under Consideration” to “In Development”.
This is a game-changer for Progressive Web Apps. With Service Worker coming in Safari, the single biggest obstacle to fully adopting Progressive Web Apps is being removed.
In addition to full cross-platform browser support, the tooling for making Angular PWAs has evolved significantly recently to provide an even easier on-ramp to server-side rendering and Service Worker integration. Now is the perfect time for teams to evaluate their mobile roadmap, and think about how PWA can become the cornerstone of their mobile strategy, even if PWA isn’t the only piece of your mobile strategy.
If you want to better understand the mobile landscape, and how Progressive Web Apps should be incorporated into your strategy, my talk from Angular Connect 2016 goes into a lot of detail of what’s possible and not possible with different platforms. https://www.youtube.com/watch?v=FP1w89F5OtI. Just ignore the parts where I say we don’t know the future of Service Worker in Safari/WebKit.
PWAs at AngularConnect
If you happen to be at Angular Connect 2017, Justin Schwartzenberger and I will be giving a full workshop on building PWAs with Angular. It’s been called the “Can’t miss event of 2017*”. Join us.
And of course, if you want expert guidance in planning your team’s move toward PWA, Nrwl can help. Visit nrwl.io to learn more, or shoot us a note at hello@nrwl.io.
*I called it the “Can’t miss event of 2017”
