Progressive Web Apps: An Introduction
How to build your platform
You want to showcase your products or services on the internet and reach as many people as possible, what do you do?
Nowadays you basically have two choices: Building a native app (iOS and Android) or building a web app that people visit in their browser of choice. Let’s take a closer look at those options:
Native Apps
A native app is a good choice if you want full device support, offline capabilities, notifications, what have you. But you need to write a separate app for each mobile platform (an iPhone/iPad app as well as an android app) and maybe a web app anyway because of laptop and desktop users.
Also you are dependent on Apple’s and Google’s app stores and policies for discovery, distribution and updates. If they even find your app in the app store, they have to go through 4-6 steps to install them and by the way, users seem to stop downloading apps anyway
.
Web Apps
A web app is great because you just have to write it once in JavaScript; users on any platform can open it in their preferred browser of choice. Users don’t need to click through 6 steps to install the app, they just have to open the web site. Updates are a breeze, they always get the newest version when they visit your site.
But what if you want all those nice features rich native apps have? Push notifications to re-engage your users, working offline, direct hardware access, not having to download the whole app each time the visit and the nice little icon on their homescreen. Do you need a native app after all? Not necessarily.
Enter progressive web apps…
Progressive Web Apps
A PWA is the umbrella term for web technology that allows web apps to behave much more like native apps than you would think. Things that are starting to get possible are:
Serving your app even if your user is offline
This works by using a piece of technology called a Service Worker: a script that runs locally on your browser for the specific website and decides what is going to happen to each request. If the user has network connectivity we can download and store the whole app on her device. If she visits without a stable connection we can serve her the stored version, save her interactions with the site and replay them when she’s back online. Think adding items to a todo app and syncing them with the server later.
Don’t download more bytes than you have to
Even if your user is online we don’t have to send him your whole app. The same Service Worker can return the stored version of the app almost instantenously and ask only for the updated bits. No more endless waiting for your app to load. And you know the statistics: more than half of your users abandon the site if they have to wait for more than 3 seconds. Time is money.
Look and feel of a real native app
Well, mostly.. You can ask your mobile user to add the website to his homescreen for quick access, have a custom icon and splash-screen and run it in full-screen mode. You can even send push notifications! (Not yet on iOS unfortunately…).
Develop once, run everywhere
As you can see, the same application can easily be run on desktop, laptop, table and smartphone, dynamically sending the correct user interface and data to each user.
Why Now is the Time
New web technology needs support from browsers. Google can introduce some fancy new technology that works in their Chrome browser but if it doesn’t run on FireFox, Safari (desktop and mobile) and Edge you would leave a lot of users behind by using it.
The heart of Progressive Web Apps is, as you might have guessed from above, the Service Worker. And we can say that the are finally ready for prime time! Apple shipped (still quite buggy as of today) support last year as the lone holdout and now Service Worker are ready .
Where can I see a PWA in the wild?
- Check out this showcase for Twitter Lite and Twitter Mobile .
- There’s also this collection at pwa.rocks .
- Read about Pinterest’s experience launching a PWA and seeing improvements like 8x more signups and 4x longer sessions.
You can find many more if you search for it online. Try visiting them once then turning off your wifi and visit them again. If they still load you’ve seen the offline capabilities in action!
What’s Next
In the coming months I’m going to write a bit about how you can build your first PWA, the underlying technologies like Web Workers, IndexedDB and the Notifications API as well as web performance in general. Stay tuned!