Making Sense of Progressive Web Apps

Vince Llauderes
4 min readNov 12, 2018

--

A lot of Companies and Popular web application are starting to adapt and work on PWA. PWA is taking more advantage of desktop and native application development. By doing PWA it allows you to give your user’s an amazing user experience by combining all the modern Web capabilities such as push notifications, service workers and access to device functionality and a lot more. Google is working to support more than that.

If you’ve never heard PWA before or wanted to dive deeper to undestand the concept, this article will be right for you. I will explain here about PWA’s and the basic of it.

Progressive Web Applications or Progressive Web Apps a.k.a PWA

PWA was coined by Alex Russell who is a Google Software Engineer working on Chrome Browser. He coined this in 2015 and wrote an article to outlined the requirements of PWA. Since then the whole Internet industry are starting to work on PWA to support it in their existing Web Applications. In that time PWA supports only Chrome and Safari. But I think today Microsoft are working on it to support in their Microsoft Edge browser.

What is Exactly is Progressive Web Apps?

From the word itself this is just a Website but Better…

Alex Russell had a great explanation about this. He said.

It’s just a Website that took all the right vitamins.

Why do we build Progressive Web Apps?

“It’s a myth that users happily download the app of every website they visit frequently”.

According to study conducted by Google,

“Mobile web reach is a way higher than Native app reach. It was 11.4 million unique visitors per month but in Native app is 4 million visitors.”

Mobile web reach Survey.

How about the Mobile Engagement.

“User engagement shows that users tend to spend their time using native app rather in mobile web. It was an average of 188.6 minutes in native app however in mobile web it was 9.3 minutes.”

Mobile web engagement survey.

The idea here is pretty clear what if we provide to our user’s an app like experience by using our existing Web Application. With that it’s a win-win in most Companies and businesses. Because we all know that developing and maintaining native apps is costly. Not only that if your app is supporting two platform it’s cumbersome to the developers by maintaining to codebases at a time.

Core ideas of Progressive Web Apps

Did you know that.

“53% of users in the Internet is abandon the Website if it’s takes more than 3 seconds to load.”

Inorder to solve this PWA must be fast.

Fast — When users starts interacting in your application your app must respond quickly. With silky smooth animations and junky scrolling.

Reliable — PWA is a well known about this. Because regardless of the network state your app must workingly fine. The dinosaur in chrome is not be shown in your browser when you have no internet connection. With that your app must display the UI that you displayed when you have an Internet connection. With the help of Service Workers it allows you to cache your data and works offline even you have an unstable internet connection.

Engaging — When users starts using your app it feels like a natural app in their device. It must be offer an immersive fullscreen in their device and can have push notification functionality and other stuff that user’s may not be distinguish that they’re using is just a web application.

We all wondering where do we get PWA in App Store or Google Play Store?

No more AppStore and PlayStore.

Well you’re wrong! Because PWA is installable via clicking Add to Home screen in your browser once you did that you may now starts using it.

PWA is now available via clicking Add to home screen.

Characteristics of Progressive Web Apps.

  • Progressive
  • Responsive
  • Connectivity Independent
  • App like
  • Easily Accessible
  • Fast

App Manifest — is a simple json format that will help the device to distinguish your app is supports Progressive Web Apps.

Example of Google Maps manifest.json

Lighthouse — is a open source tool develop by Google that will help you to validate if you met the requirements of PWA. It’s available in your chrome developers tool by running the Audit it will generate the report in your Web Applications.

Lighthouse by Google Chrome.

So we’re almost done here we covered a lot in Progressive Web Apps.

PWA is the Future of Native Apps development.

If you enjoy reading this article give a clapped for me…

If you do have further questions let me know, just comment below..

Thank you.

Follow me on twitter https://twitter.com/llaudevc/

--

--