What is Progressive Web Apps (PWA) and how to install them for your website
Progressive Web apps (PWA) are a new way to build web apps to work just like your native apps. Let me explain more.
Let’s just say you are browsing some website that does not have an app, and you see a popup on your screen saying “Add to home screen”. When you click this button this website icon is added to your app drawer, from where you can use this website just like a native app. You just installed an app without going to the app store or play store.
Now you would say it still needs the internet or else it won’t work, that’s where this PWA comes in. You can run this app without internet on your android or iPhone. The best part is the version of your android or iPhone will not make a huge difference, sure there might be some features that won’t work but still, most of the app will run smoothly. Now let me tell you more about what is Progressive Web app and how does it work
Native apps Advantages and disadvantage
Advantages
- They start quickly
- Work offline
- Push notification
Disadvantages
- Limited reach
- Consumes disk space on your mobile
- The different version required for different platform
- Runs in the background consuming memory and data
- Separate cost for development
Web Apps Advantages and disadvantage
Advantages
- It is safer and gives privacy
- Does not run in the background and consumes data
- Does not consumes disk space on your mobile device
Disadvantages
- Limited to browser cannot be compatible as a native app
- Every time needs an internet connection to load the website
- Not accessed quickly
What is Progressive Web App?
PWA improves the end-to-end user experience. It combines the user experience of a native app and the reaches of the web apps.
It is not a new framework or technology, just a way to make your current website into an app, for delivering a better user experience. PWA turns a website into a native app so beautifully, one cannot tell the difference between a native app and PWA. PWA uses a service worker to perform the task, let me explain to you what are service workers.
What is Service Worker?
It is the platform API behind many of the new capabilities of PWA. A normal website loads everything from the server every time, and if there is a bad or no internet connection page does not load.
But service workers cache all the resources needed for your page, and it gives you full control over managing the cache so that you can show the cached page or the page from the network. It means that whenever a user visits a page on the website service worker will store that in the cache for offline access.
Service workers can also handle Push notification.
Why Progress Web App?
Nowadays people prefer native apps because of quick access, and it is difficult to search for a website on a mobile browser. So the user prefers an app on mobile for faster access. But building a full-fledged mobile app can cost you more time and money. What if you can use your current website as a native app, which user would not need to download.
The main aim for you as a business is that, your users get to use your service and not to install the app.
PWA provides the solution to this problem. The main benefit of PWA is
Fast
A user wants the app to load quickly and have smooth scrolling. But current web app does not load fast. Research shows that 53% of users would not visit a website if your website does not load in under 3 sec.
Integrated
Web apps can only be accessed using a browser, which makes it more combustible for a user. User should be able to launch the app from their home screen where other apps are located.
Reliable
Native apps work offline, but web apps don’t. You would not open a browser if you have a slow or no internet connection right? A normal web app opened from a home screen with slow or no internet would show “downasaur”. Your desktop has a broadband connection and hence you would always be online to open any website. But your mobile might not have an internet connection all the time, still, mobile apps do not show “downasaur” it just loads the cached content, whereas if there are no internet web apps will show “downasaur”.
That’s where PWA changes things for web apps.
Engaging
User engagement is very important, push notification will keep your app up to date. They offer an immersive full-screen experience with help from a web app manifest file and can even re-engage users with web push notifications.
How to get started with PWA?
If you are building your website from scratch it is good to go with PWA from scratch, so that you can use the full potential of service workers.
To convert current website to PWA
- Secure Server (HTTPS). The green lock you see in the URL bar shows that the website is secure
- Now you need to have a mobile-friendly website specific for the mobile user. You don’t have to show everything on the mobile site, try to keep it lite which will make the site load faster
- Pick one feature that will make the most for you, there is no sense in trying to go for all at once
Manifest.json file example
{
"name": "Thereviewstories",
"short_name": "TRS",
"theme_color": "#00000",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Service worker file
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/.css", "/.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/*", "/.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}Features in PWA
- Full responsiveness and browser compatibility
- Connectivity independence.
- App-like interface
- Push notifications
- Self-updates
- Safety
- Discoverability and easy installation
This current website in which you are reading the article is a PWA, if you see the notification of “add to home screen”, go ahead and add it or go to your browser option and add it. I have integrated recently on my existing website. Please share your experience of using this website as an app with a notification. I will provide some link so that you can learn to build your own PWA, or else contact me I will guide you through.
View google developer telling you about PWA
View this video to build angular app with PWA
Hire a react native developer for creating android and iOS apps
Offical Website Click here
Build your first app here
Udemy course link
A free guide to build PWA
Looking to build Career in computer science click here
