The Why, What and How of Progressive Web Apps
--
Progressive Web Apps (PWAs) have been around for a while and all major browsers and mobile operating systems support them (or at least a basic feature set). Furthermore, there are movements toward listing PWAs within App Stores like native apps.
“A new way to deliver amazing user experiences on the web.” — Google about PWAs
So far so good, but why are PWAs so popular? What makes a web app a PWA? And how can you make use of it?
Why are Progressive Web Apps such a Big Deal?
Have you ever been on the go and remembered an awesome gadget you wanted to order the day before? You grab your smartphone and google for it. Voilà the first result is a shop you trust. After you open the page, they tell you that they have an app…
Wait… Why should you go to the app store to install their app when you’re using a (web) app already? Even so you open the app store and download it. Remember you’re on the go. The network is shaky and you loose the connection sometimes… Apps are big and getting bigger so it takes a while to download it. So you wait…
Finally the download finished. Now you can use the app − not so fast, the app needs you to give it permission to retrieve your location, so it can give you location based coupons… Actually you wanted to order a new gadget but wind up waiting for an app to get operative…
There are more problems with native apps, but with this example we already discovered some interesting ones:
Friction − First, you need to know there is an app for what you want to do. Second, most of the time you are googling for things you look for and end up on a web app which already provides you with what you need − so why should you go to the app store in the first place or even worse afterwards?
App Size − Native apps are by default big because they deliver lots of stuff most people do not need. Which makes it often troublesome to download them especially when you’re on the go.
Developers − From a retailer’s standpoint developing for multiple platforms such as iOS, Android and web can be expensive and time consuming. Even with cross platform frameworks such as React Native, you have to build the user interface at least twice (web and native) as long as the business logic is shared between the two, otherwise you have a lot more work to do.
App Updates − If you have ever released an app on either Apples App Store or Googles Play Store, you most likely have experienced, that it is not fast and easy to get your users running with the newest version of your app.
So what is the solution to these problems?
Progressive Web Apps 🎉
Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern browsers to provide benefits of a rich mobile experience.
— Wikipedia
Before we get too excited there are some iOS drawbacks which I’m not going to cover. But if you want to know more Maximiliano Firtman wrote an extensive blogpost. Beside that Netguru wrote an excellent article on how to improve the PWA experience on iOS.
Twitter was one of the first companies to decide to build their new mobile site as an offline first PWA. They wrote a comprehensive blogpost on how they built their PWA with a lot of insights about their technical approach. Aside from that, Google wrote a case study about how Twitter improved their conversion rates and overall user flows after launching their PWA. One impressive take away of the case study is that their users sent 75% more Tweets after releasing their PWA.
Another great example of what is possible is Pinterest’s mobile page. Beside other improvements they could outperform their native app sizes (iOS 56MB and Android 9.6MB) with their new PWA (150KB). And there are many more companies who already have built PWAs.
What makes a Web App a Progressive Web App?
A PWA consists of three main components.
The Web App Manifest
The web app manifest is the first part and it provides information about the app in a JSON formatted file. It contains data such as name, author, icon and description. MDN web docs provides you a good manifest example.
The Service Worker
A service worker is a method to run JavaScript in the background as a proxy between the server and your web app. It can use features that don’t need user interaction. This includes caching data, pushing notifications or syncing data in the background.
The Transport Layer Security (TLS)
Transport Layer Security (TLS) is a cryptographic protocol designed to provide communication security over a computer network. PWAs require you to serve your web app via HTTPS.
How Does a Web App Become a Progressive Web App?
To keep this article as short as possible I’m going to give you some hints on how to turn your web app into a PWA. A good starting point is the compelling post by Meggin about how to get started with PWAs. Along that you have a superb post by Pete LePage about your first PWA.
If you already started a project and are using webpack, you can use the plugin Workbox from Google. It provides you with all the things you need to build a PWA without a lot of effort.
And last but not least, one of the easiest ways (if you start from scratch and work with React) is using create-react-app:
“[create-react-app provides you with an] offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.” — create-react-app “What’s included?”
Get in touch
Do you have any question? Drop me or someone at smartive a line and we will cover you. Or you want to know more about sharing code between React and React Native? Head over to the follow-up blogpost with a lot of findings from my colleague Robert Vogt.
