SouravInsights
Blog

All you need to know about Progressive Web Apps

12/19/2017

By now you must have heard this buzz word called “ Progressive Web App ”. Let me give you a simple definition about PWAs.

Progressive Web Apps are Web Apps which combines the best features of Web and Native Apps. It is progressive because it is constantly progressing.

Why Progressive Web Apps?

Now let’s talk about the “WHY”. Why Frances Berriman and Alex Russell came up with a concept called Progressive Web Apps? Before that let’s understand what problems does it solve.

Problems with Native Apps?

We all have used Android or iOS apps on our smartphones. We use them for all kinds of thing. But while installing any Android/iOS apps we go through these problems :

  1. Is this app worth downloading?
  2. Do I have enough space?
  3. My available data is not sufficient.

One recent survey shows that people are turning away from Android/iOS apps, because not all app experiences are satisfying or worthwhile. Some people simply don’t want any more apps on their phone, some even hesitate to download any app.

If you take a look at the apps installed on your mobile right now there might be at least a dozen apps that you do not use regularly. Sometimes apps only works good when the phone has an active internet connection.

The irony is that most of the apps have a fully responsive website performing the same functions. So why waste your precious disk space and your internet data on your smartphone by installing the native app? The average size of apps that we install from play store/app stores would range from 30–200MB. Moreover, these app needs to updated every week! But Progressive Web Apps are within some KBs and are automatically updated. Thanks to service worker. 🙂

What if a website can do that and much more than a Native app? This is what Progressive Web Apps (PWA) are trying to accomplish.

In short, Progressive web apps combine everything that is great about a native mobile application with everything that is great about a mobile website.

Some other ways I like to describe them:

“The best of the web, plus the best of native apps” Or, in Alex’s words: “Just websites that took all the right vitamins”

Features of PWAs:

  • Progressive — The word progressive means it works for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  • Responsive — Automatically adjustable to any form: desktop, mobile, tablet etc.
  • Load Time — Progressive Web Apps are instantly available
  • App-like — Feels like a mobile app with app-style interactions since it’s built on the app shell model.
  • Fresh — Always up-to-date so you do not need to update it again and again like any other Android/iOS apps.
  • Safe — Served via HTTPS to ensure content is securely delivered
  • Engaging — Features like push notifications, etc. makes it very engaging.
  • Installable — Allows users to install the website as an app on their home screen without the taking user to an app store.
  • Linkable — Easily shared via a URL and do not require complex installation.

Benefits of making a Progressive Web App rather than building a fully functional Android App?

  • Cost Effective — For an app publisher, the biggest advantage is the cost saving in terms of app development and maintenance. Because it is assumed that making a website is lot more easier than making a Android App.
  • Cross Platform — Unlike any other apps, Progressive Web Apps are not restricted to any specific platform. That means you do not need to develop separate versions of app for different platforms.

10 REASONS PROGRESSIVE WEB APPS WILL BE THE FUTURE OF APPS

Some Popular Companies that Do Progressive Web Apps

[Introducing Flipkart Lite — The progressive mobile web app

Flipkart, India’s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application that has resulted in a 70% increase in conversions. Flipkart’s PWA takes merely 100KB to download, is 100 times smaller than the 10MB Android app and 300 times smaller than the iOS app. Repeat visits take less than 10KB to download.

How to use a Progressive Web App?

Probably, you must be wondering how to use a Progressive Web App! Well, you can just click on any links mentioned above. But provided that you must be using a smart phone in order to install it your own device.

Now let’s click open Flipkart in chrome. ( You must be using a Mobile Device ). Below are some screenshots which demonstrates the installation of a PWA.


Now Let’s create a Progressive Web App:

Here, I’ll show you how I’ve created a Progressive Web App for simple blog. You can get the codes here. Now that we have a basic website we can start turning it into a progressive web app. To do this we need to add a few things to it which I’ll go through as we need them.

Testing your PWA

To check if your site is working as a PWA you can use Lighthouse. Lighthouse is a chrome extension that will tell you if your site is a good PWA and if it isn’t how to improve it. Once installed open up your website and click on the Lighthouse icon in the top right of your browser then Generate Report.

Make an app icon

Your site is going to be on a home screen, you need some sort of icon to represent it. Here I’ve used a downloaded logo from internet.

Register Service Worker

Add service worker <script> to index.html:

A service worker is another file we add to our project, it will allow the site to work offline. It is also a requirement of a PWA, so we need one.

Cache Static Resources

Create sw.js and add index.html cache:

`var cacheName = 'pwa';
var filesToCache = [
'/',
'/index.html'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request, {ignoreSearch:true}).then(response => {
return response || fetch(event.request);
})
);
});`

Web App Manifest

To support add to homescreen feature, we need to create a manifest file.

“ The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.“

The simplest way I did this was by using this online icon generator tool. Feed it your shiny new icon and it will spit out a bunch of resized versions and some HTML code.

  • Download the file it gives you and unzip it.
  • Put the icons in a folder next to the rest of your site.
  • Add the code it gave you to the head of your index.html file
  • Make sure the path to the icons is right. I put them all in a sub folder so had to add “icons/” to each line.

Now you have a manifest that was created by the icon generator tool, but we’re going to add a little bit more to it. Head over to a web app manifest generator and start filling in the info about your site. After doing all these thibgs my manifest ended up looking like this.

{
"name": "Progressive Web App",
"short_name": "PWA",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#2196F3",
"icons": [
{
"src": "icons/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "icons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "icons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "icons/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "icons/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "icons/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}

Now Microsoft is supporting Google’s Progressive Web Apps platform and that’s

great news for everyone.

Microsoft recently announced that Progressive Web Apps (PWA) will soon be supported by the Microsoft Edge web browser. Moreover, a few apps hitting the Windows Store — like Slack and Trello — are now mixing PWA with Electron and elements of the Universal Windows Platform (UWP).

I hope this has helped to get a good understanding about Progressive Web Apps, but if not, please leave a comment or tweet me.

SouravInsightsBlogAbout
© 2020 Sourav Kumar Nanda