What is a Progressive Web App ?

Written by ranitsanyal | Published 2018/03/16
Tech Story Tags: mobile | progressive-web-app | web-apps | whats-an-app | software-development

TLDRvia the TL;DR App

Whenever we hear the word ‘app’ the first thing that pops into our head is a native mobile app, typically an Android, iOS or Windows phone app. But if you follow the recent tech buzzwords ‘Progressive Web App’ is one of them. Native apps are in the scene for so long time and Progressive Web Apps (PWA) are relatively new in town and there is a lot discussion happening. I was asked about PWA so many times from our clients and friends, I thought to write an article which will shade some light on PWA.

What is Progressive Web App?

Progressive Web App (PWA) is a web app, built on modern web technology which behaves like a mobile app and can accomplish a lot of similar tasks and in some cases have lot more capability, but costs less to build. PWA is easy to maintain in long term.

Think your website, when accessing from mobile, is behaving like a mobile app.

If you still get confused between web apps and so called websites read about them here.

How PWA works?

PWA can run on a traditional server and back-end setup. There’s almost nothing new. Even if you want, you can convert your entire website or WordPress blog to a progressive web app in minutes but to utilize the full efficiency of a progressive web app, engagement of a developer is required to make it fully compatible with PWA standards and it takes time to accomplish.

Basically, nowadays every project runs via service/API. So, not to mention but PWA was designed in such way that it works best in service based apps. So to run a PWA, all you need is a front-end development. Because your service/APIs will be untouched.

Now at front-end part, it is basically same as doing work on JavaScript, HTML, CSS or any other front-end libraries along with that a new script has been introduced by Google which is named ServiceWorker, which runs in the background of the browser. All traditional ways to keep data locally in the browser has been replaced by this single method. So here you need to define all your files used in front-end development which you want to keep stored locally. So that, when a user opens the app without any network connection, it doesn’t show boring “No Network” message, instead, it opens the file from local storage(not localstorage in the browser, but of the device). So user experience doesn’t hamper. It behaves like an app. Even if you want you can store dynamic data on serviceworker which can be displayed without a network connection.

If you consider your web app is the skeleton, then service work is the soul of a PWA. The better it is developed, the better your PWA performs.

Do you need a PWA for your current product/service?

First, you have to understand your project well and have to understand that how much interaction it needs really with the mobile hardware components like NFC, Bluetooth, proximity sensors, wake lock, etc.

Progressive web apps have limited capabilities when it comes to offering integration with a smartphone’s hardware related features

You should opt for PWA if your app doesn’t require the hardware dependencies mentioned above. The reason is many people with slow connections and affordable smart phones can use your web app more easily with PWA. PWA is the best choice in these cases as it loads in seconds and your users can start working straight away.

If you have a full-fledged web application, high chance is PWA will work best for you.

Browser Dependency to Consider

As PWA runs in the browser, we also need to consider browser compatibility. Here are the statistics of widely mobile browsers considering their support for PWA

Native app vs Progressive Web App

As discussed above there are some hardware limitations when we talk about native mobile app vs Progressive web app.

Apart from that, an average, an app loses 20% of its users for every step between the user’s first contact with the app and when the user starts to get value from the app. A user must first find the app in an app store or will go from Google, download it, install it and then, finally, open it or it might have a tedious sign-up process. In most of the cases, the whole experience becomes lengthy.

But,

When a user finds your progressive web app, they will be able to immediately start using it, eliminating the unnecessary downloading and installation stages. And when the user again returns to the app, they will be prompted to install the app. Which will give them an app like experience and will ensure higher retention rate. This is the part I love most. After that user can open your web app just like tapping on the shortcut icon on the mobile home screen and use it like an app.

Want to know more about differences between Native apps and PWA? check this article

TL;DR

  • PWA= A web app that behaves like a native mobile app
  • There’s no need for a separate code base for mobile.
  • You don’t have to install anything from Google Play or the App Store.
  • Existing Website/blogs can be easily converted to a progressive web app.
  • It’s relatively cheaper than developing native apps for all platforms.

If you need help to develop or discuss regarding PWA, contact us, we are only a click away.

About the author

Ranit Sanyal is the co-founder of RedElegant, a design driven development studio. The post first appeared in RE Blog

If you liked the post, please hit 💚 so others can enjoy it too :)


Published by HackerNoon on 2018/03/16