What is Progressive Web App(PWA)? Understand PWA concept in few minutes!!!
In this tutorial, we will see what is Progressive Web App(PWA), what are advantages of using PWA, why do we need PWA instead of Mobile Native Apps, should we use PWA for our Web App, can we convert our static(HTML/JavaScript) Web App or SPA Angular, React, Vue Web App or any other Web App into Progressive Web App?
What is Progressive Web App(PWA)?
You probably saw that PWA is an extremely super hot topic these days. Everyone talks about Progressive Web App. so what is PWA or Progressive Web App?
Well PWA is nothing but Progressive Web App. It is a set of technologies or techniques that allows doing one special thing which is you can progressively enhance your Web App to look and feel like Mobile Native App while still saying a Web App.
So In the end, PWA is just a term which refers to a couple of features that you can add to any web app, to any web page running on the browser to enhance it. PWA totally runs independently no matter your app is built in Single Page Application with Angular, React, Vue or Multi-Page Application with static HTML/JavaScript, Node, PHP, etc. so you can turn any Web App which runs on the Web Browser into PWA to progressively enhance it.
Progressively enhance Web Apps mean it does not just look and feel like Native Apps(Not talking about responsive designs which we already learned a few years ago). we are talking about like
- App working even when you are Offline
- It having an Icon on the Home Screen
- Things like accessing Device Camera or Location
- Synchronizing Data in the Background
These are all features that are hard to do in Web Applications in the past but now a day we get all most of browsers to support therefore we can use the PWA in our Web App easily.
It still works on older browsers too but if you have a modern browser then you will get an awesome experience.
What are the advantages of PWA? What the PWA offers?
It has some advantages to use PWA in your Web App like
- Be reliable: Load fast and provide offline functionality(At least part of the application should work if you are offline).
- Fast: Respond quickly to user actions.
- Engaging: Feel like a Native App on Mobile Devices. We can bring our users back on our app with Push Notifications even our app is closed. We can access a Device Camera, Location via PWA. so It’s like you can do things which you do in Native Apps.
PWA offers you that you can add it in your existing Web Application to turned them into Native Mobile App like experiences via using
- Install on Home Screen
- Service Worker Caching, Caching Dynamic API Data (Offline Access)
- Background Syncing
- Web Push Notifications
- Media API (Camera & Geo location)
Mobile Web Browser Apps VS Mobile Native Apps
As per the survey, Users spent most of their time in Mobile Native Apps instead of Mobile Web Browser. Users spent their 87% time in Mobile Native Apps & 13% time in Mobile Web Apps. These counting show us a large difference. Why users spent most of their time in Mobile Native Apps instead of Mobile Web Apps because Mobile Native Apps are able to provide
- Push Notifications bring users back to the Native App
- Home Screen Icons make access to easy for users
- Access Native Device features like Camera, Geo location, etc
- Possibly work Offline(At least some part of application work offline)
We can do all these things in our Web Apps also with PWA.
Why we should choose PWAs over Mobile Native Apps?
As you saw, Users spent their 87% time in Mobile Native Apps. Ya, that’s right but users spent their huge time in top 3 Apps on mobile devices probably Google, Facebook, Whats App, Instagram whatever user’s favourite, probably it won’t include your app in top 3 Apps.
so when the users get time to look at our App? Users reach to Web Pages much more compared to Native Apps. so in the Web, we have a broader audience and visitors and because of the users spent 87% time on top 3 Native Apps, the same Apps, The New App doesn’t get new visitors in Native Apps. so this is one of the reasons that we should think about PWAs and use it.
What you think about how much the average time users spent on the Play Store OR App Store to install our new App rather than use popular and favourite App? It’s probably less than 10%.
If you build a Mobile Native App, then you must learn different languages like Java, Objective-C, Ionic, React Native, Flutter, etc if you want to support both Android & IOS. so why you don’t build your App in that which you already know like HTML, CSS, JavaScript, etc.
Because of these reasons, PWA is a better option compared to Mobile Native Apps.
PWAs VS Native Apps VS “Traditional” Web Apps
PWA Core Building Blocks
Now let’s talk about core building blocks, technologies, techniques which are used while building PWAs.
- Service Workers
- Application Manifest
- Responsive Design
- Media API (Camera & Geo location)
Service Workers(SW):
This is a core feature. Service Workers are supported in modern browsers like Chrome, Firefox, Opera, etc and service workers are basically JavaScript running in the background process even if your application is closed.
SW is core building blocks because it allows us to get offline access to cache some files and serve them if we don’t have an internet connection and they give us access to other PWAs related features e.g.
- Caching/Offline Support(First browser would check on cache If it is not found then and then it will go for check in the Network)
- Background Sync(Sync user data in the background and store it in a way that even if your app close still it can send data to server when re-establish internet connection)
- Web Push(It’s a Mobile Push Notifications. We can get Push Notifications in a way that even if our app is closed)
- Enable other PWA features
Application Manifest:
This technique allows users for addition to the Home Screen. The Application Manifest makes your app installable on the Home Screen, Not installed through App Store still you will see it like normal Native App. App Manifest file is a kind of document which tells the browser about our App.
Responsive Design:
App/Layout should work and look good across Devices.
Media API (Camera & Geo location):
Access Device Camera, Microphone, User location, etc.
These features which make PWAs are well supported already. You can reach a huge audience with all these features and the cool thing is you can make PWAs in way that your Web App would still work in older browsers also.
Now it’s time to be prepared for a future where probably every Web App will be a PWA since it offers significant advantages and make your application much more enjoyable to your users.
Progressive Enhancement
What if we want to add PWA features in our older project. We can’t and don’t write our app from scratch right?
Well, you can add some PWA features in your app for making your app as PWA. It isn’t necessary to add a 100% or 0% PWA features. You can add absolutely 40% or 60% features means you can add features whichever you want of PWA in your app.
We can add PWA features step by step and you can stop it at any given point. You can stop after adding just Application Manifest and Basic Service Workers files, you can stop after adding Install on Home Screen, Basic Caching, Advanced Caching, Push Notifications, Geo location API, Media API, etc.
Some people are looking out this technology and saying that I don’t have the resources or time to rebuild my app and they need to support their app in older browsers anyway. I want to answer you that that’s not a problem. You can add whatever you want to add features that enhance your app.
Summary
so we learned that PWA is just a set of technologies or techniques. It is a platform independent therefor you can turn any Web App which runs on the Web Browser into PWA to progressively enhance it no matter it is built on Angular, React, Vue, Node, PHP, HTML/JavaScript, etc.
With one language or framework, we can make our App as Web App + almost Mobile Native App with the use of PWA. With PWA, we can get awesome features like Offline Access, Basic Caching, Advanced Caching, Install on Home Screen(Like Mobile Native App Icon on Home Screen), Background Synchronization, Access Device Camera, Geo location, etc.
We can add PWA in our existing projects as well as new projects. It is not necessary to add 100% features of PWA, We can stop after adding 20% or 40% features. We can stop after just Install on Home Screen or Basic Caching or Advanced Caching or Push Notifications or Geo location API, Media API, etc.
Now it’s time to be prepared for a future where probably every Web App will be a PWA since it offers significant advantages and make your application much more enjoyable to your users.
Thanks!!! Did you find your solution or learn something new? If so please:
- clap 👏 button below️ as many times as you can and share this post with others.
- Follow us on Medium to read more articles about Python, Angular, React, Vue, Node JS.
- You can leave your feedback/suggestions in the comments 💬 below.
Would you like to check out our other articles?
