Introduction to Progressive Web Apps (PWA)
Do you have an idea you want to build but you don’t know which platform you should develop? Is it on the Web? Or on Native Apps like Android or iOS?
Let’s talk about the pros and cons of the two:
Native Apps
Building apps for Android is something you’ll consider as it packs a lot of features such as offline content, access to device hardware, push notifications, you name it.
But there are users who aren’t comfortable installing a lot of applications. There are few reasons why:
- Maybe some people don’t want to crowd their application drawer with icons or apps they may never use.
- Some people are not comfortable with the permissions needed for the application. For example, a game that requires SMS permission when the game itself doesn’t really need that. It could be malware or something that’s why they don’t feel secure.
- It uses more storage space. Some apps take huge amount of our storage space and some people want to use it for storing photos, videos, and other content.
In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you ~20% of users. — Gabor Cselle
Consider you talked to 1,000 people to use your Android app and for every step you make them to use your app, only 80% will do it.
1,000 — Open Play Store
800 — Search for the name of your app
640 — Click your app from the search results
512 — Click “Install”
410 — Accept Permissions
328 — Wait for the download to finish and use the app.
From 1,000, there is a possibility that only 328 people will only use your app.
That is why companies adds Download on Google Play button on their website to reduce the steps. From there, consider that there are 1,000 users who browsed your website, it will be:
1,000 — Browse your website
800 — Click on the Download on Google Play button
640 — Click Install
512 — Accept Permissions
410 — Wait for the download to finish and use the app
Great! That’s one step less but it’s not enough. Let’s head over to Web Apps
Web Apps
Our user experience on the web has evolved over time.
Especially when browsers came to smartphones, websites had to be pinched to zoom, drag to move to be able to browse the site. But then, Responsive Web Design solved the problem by creating layouts for different screen sizes: smartphones, tablets, and desktops. The experience became fluid and flexible.
This is great! If you ever have an idea, you can reach a lot of potential users considering that Chrome has more than 2,000,000,000 active users whatever device they are using!
In addition, if you want to use the web app, all you have to do is go directly to the website, and just start using the app. Compared to when starting using an Android app, it will take you 5–6 steps for you to use the app.
In summary, developing a web app has high reach and low friction.
But there is one problem…
What if we ever encounter this page?
So what if we combine web’s high reach, less friction and android app’s features and functionalities.
Progressive Web Apps (PWA)
This is where Progressive Web App comes in.
- It is part of the real and open Web
- They run in URLs
- Has an app-like environment
- Has a launcher icon, splash screen, notifications, offline mode, and more!
Let’s take a look at Flipkart.
Flipkart is India’s largest e-commerce site. They decided to migrate from using Android App to Progressive Web App and the results are amazing!
- Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.
- 3x more time spent on site
- 40% higher re-engagement rate
- 70% greater conversion rate
- 3x lower data usage
Why make a Progressive Web App?
- Progressive — it is supported on multiple major browsers including Chrome, Mozilla, Samsung Browser, Safari, Opera, and Edge.
- Responsive — it displays the website properly on different devices.
- Connectivity Independent — Even though your device has poor coverage or not internet at all, PWA will still render your website
- App-like — as it looks like an Android App rather than a browser.
- Fresh — the content updates once you went online.
- Safe — since it uses HTTPS
- Re-engageable — it has push notifications to bring back your users to your app.
- Installable — Your browser will prompt you if you want to install the app so that you can just tap it on your homescreen instead of having to type the URL.
- Linkable — since it runs in URL.
How does it work?
There are two fundamental technologies that enable Progressive Web App
Service Worker
is a network progressive enhancement as it acts as your middle man between your browser and the network.
When a browser requests for an asset like HTML, CSS, Javascript, etc, it usually goes directly to the network. But when you have a Service Worker, it can interact with the request and you can program on what to do with it.
Do you want to fetch it on the network? Do you want to fetch it from the cache? It’s all up to you. What most people do is they get the asset from the network first, save it to cache and bring it back to the browser. So that the second time a user visits the website, the service worker fetches the asset from the cache instead of fetching it from the network which will extremely enhance the loading speed of your website. Sometimes, even less than a second.
There are 5 common ways of handling a request in your service worker:
- Network-only — request and gets the response from the network only.
- Cache-only — request and gets the response from the cache only.
- Network-first-then-cache — Request and gets the response from the network. If not available, use cache.
- Cache-first-then-network — Request and gets the response from the cache. If not available, use network.
- Cache-and-network — Request from both cache and network and gets the first response from either of the two.
As mentioned earlier about Flipkart, it has 3x lower data usage. The reason for this is because they save the assets to the cache so that whenever users are trying to load their app, the app will just get the assets from the cache saving the data of their devices.
Web App Manifest
is a configuration, JSON file, that describes your web app when it is installed on your phone.
{
"short_name": "Juvar",
"name": "Juvar Abrera",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html", //
"orientation": "portrait",
"display": "standalone",
"background_color": "#005cb9"
}short_name: name of your app in your home screen
name: full name of your app
icons: icons to be used in your homescreen, splashscreen
start_url: starting url when your app is launched
orientation: [portrait|landscape]
display: type of display [standalone|browser|fullscreen]
background_color: background color of your app used in splashscreen
Interested?
Maybe with all that said, you might be interested using Progressive Web App for your next idea.