PWA

Author: Dawid Adach


What is a Progressive Web App?

Progressive web apps seem to be the latest buzzword, but what does it mean? In this tutorial, you'll learn what a progressive web app is, why it matters, and how you can build one in all technologies like jQuery, Angular, React and Vue. In this first lesson, I'll cover the key concepts of a progressive web app and how you can get started. So let's jump in.

PWA stands for a Progressive Web App and allows you to do a bunch of great things like converting your website into a native app and pin it to your Home Screen. That allows users to quickly access your website/app without opening a web browser and typing your address every time. It also allows you to send a push notifications, access mic and camera, use your app without internet and many more:

1. Convert your website into app on iOS/Androind

Pin your app to desktop

2. Launch like any other app from home screen

Launch from home

3. Send push notification to users

Send push notifications

4. Let your app run offline

Work offline

PWA it's an extra layer that you add on top of your existing apps. It's not a new way to build apps but it just enhances them and makes them work in offline mode. As a result you can cache responses from api's so when user does go offline it will still have something to show them.

Progressive Web App dramatically enhances User Experience, all that because PWA makes your website:

  • Reliable: Fast loading and works offline. PWA gives users meaningful content regardless even when a network is down. Some app may operate completely offline, while others will preserve containers replacing content until a user will get back online.
  • Fast: Smooth Animations, lag-free scrolling and seamless navigation even on flaky networks
  • Engaging: Launched from home screen and can receive push notifications
  • Secured: Progressive Web App are secured by default. The technology behind PWA enforce users to serve apps over a secured HTTPS connection.

Native apps in retreat.

When AJAX transformed the web from static pages into dynamic interactive experiences, users' expectations transformed from clicking on the side of a map and waiting seconds for it to scroll to something like the Google Maps experience, with live panning and zooming in no time. Since then we don't have to live with that horrible click-and-wait user experience.

Unfortunately, the improvements we've seen on the desktop web haven't translated as well to the mobile web. Think of that -- if I asked you to open Google Maps on your phone, would you do it through the browser or using the native app? I bet you would go with the second option.

Mobile is the key factor driving this revolution. Since 2015 we use mobile devices more than desktop computers.

Mobile vs Desktop usage

According to the report on mobile, users spend most of their time in native apps rather than on the web. In fact, they spend 87% of their time in native apps versus only 13% of their time on the mobile web. When asked why, users often say that apps are more predictable. They're easy to find on the home screen and feature push notifications that bring them back.

So should we abandon the web and go build native apps? Of course not.

There's a flip side to native app usage. App usage is highly concentrated, and users tend to only install and use a few apps. If you're not one of those chosen apps, too bad. Users surveyed by Google admitted that they see native apps as a big commitment in space, time, and cost. According to Comscore Mobile App Report, over 50% of America’s smartphone users download zero apps per month - zero. None.

By contrast, mobile users visit over 100 websites every month. This is the power of URLs and the ephemerality of the web.

PWA - the best of both

When you tap on their icon, native apps start quickly. They tend to work offline. They can show notifications, sync in the background, and have access to sensors like camera and microphone. But the reach is somewhat limited, requiring a different version for each platform. The web is safer, and its permission model is more respectful of your privacy.

But without some of the same capabilities, it doesn't matter how many people can use it. We want to combine the capabilities and experience users are used to in native apps with the reach of the web. We want the best of both worlds. A progressive web app is simply that -- a great user experience that feels integrated and earns a place on my home screen without having to give up the reach to get it.

Who is already using PWA?

Even though Progressive Web Apps build on new technologies, they are already widely in use in the industry. Some of the larger showcases for PWA are:

Who is using PWA

Tutorials

It is said that PWA has already moved from "nice to have" to "must have". In fact, when Aliexpress built a PWA they found 82% increase in iOS inversion rate (source) and this despite that fact that Safari didn't support service worker back then. We also believe in that, therefore we have prepared 3 comprehensive tutorials for Angular, React and Vue to show you how easily you can transform your existing app into PWA and benefit from the upgrade:

Angular PWA tutorial

Second sample image

React PWA tutorial

Thrid sample image

Vue PWA tutorial

Thrid sample image

Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...