What are Progressive Web Apps?
The term Progressive Web App was coined by Alex Russell and Frances Berriman. In Alex’s words

Progressive Web Apps are just websites that took all the right vitamins

In the simplest terms, Progressive Web Apps (PWAs) are web applications that use modern web technologies to provide a user experience similar to native mobile apps.

They are designed to work offline, be fast, and provide native-like navigation, among other features.

PWAs can be installed on a user's device and can run independently of a web browser, making them accessible like a native app.

They offer an alternative to native app development and are compatible with multiple platforms including desktop and mobile.

PWAs are seen as a promising solution to bridge the gap between web and native apps, offering a more cost-effective and efficient option for businesses and developers.

They combine the look and feel of an app with the ease of programming of a website. These cutting-edge apps make it easy for your users to access your content, and happy users, engaged users, and engaged users increase your revenue.

Why do we need a Progressive Web App?

Before we understand why we need a progressive web app as an alternative to native apps, let’s talk about some of the challenges we are facing today with native and web apps.

Internet speed

you may not realize this depending on where you live, but 60% of the world’s population is still using 2G internet. Even in the US, some people have to use dialup to access the internet.

Slow website load

Do you know how long a user waits to click the “Close X” button if a website is too slow? Three seconds! 53% of users abandon a website if it is too slow.

High friction

People don’t want to install native apps. An average user installs 0 applications in a month.

User engagement

Users spend most of their time in native apps, but mobile web reach is almost three times that of native apps. Hence, most of the users are not actively engaged. However, users are spending 80% of their time on only their top three native apps.

Well, you may ask why they are an alternative to native apps

• Fast and secure
  

• Integrated user experience: PWAs feel and behave like native apps. They sit on a user’s home screen, send push notifications like native apps, and have access to a device’s functionalities like native apps. The experience feels seamless and integrated.

• Reliable experience
  With the help of service workers, we can reliably paint a picture on a user’s screen even when network has failed.

• Engaging: Because we can send notifications to a user, we can really drive the engagement up by keeping the user notified and engaged with the app.

• Future Proof
  They adapt easily as technology improves
  

• Access Anywhere
  They can be operated on any operating system
  

How to build a Progressive Web App

Google has published a checklist of items for Progressive Web apps. I will go over four minimum requirements for an application to be a PWA:

Web App Manifest

{
  "short_name": "PWA Name",
  "name": "Longer Name of PWA",
  "start_url": "/index.html",
  "background_color": "#FFFFFF",
  "theme_color": "#FFFFFF",
  "display": "standalone",
  "icons": [
    {
      "src": "/icons/icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This is just a json file that gives meta information about the web app. It has information like the icon of the app (which a user sees after installing it in their app drawer), background color of the app, name of the app, short name, and so on. We can write this manifest file ourselves or we can use tools to generate one for us.

Service Workers

Service Workers are event-driven workers that run in the background of an application and act as a proxy between the network and application. They are able to intercept network requests and cache information for us in the background. This can be used to load data for offline use. They are a javascript script that listens to events like fetch and install, and they perform tasks.

Here is a sample serviceworker.js

// Javascript 
// Register the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// The service worker JavaScript file
var cacheName = 'my-site-cache-v1';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  '/js/app.js'
];

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', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

self.addEventListener('fetch', function(e) {
  console.log('[ServiceWorker] Fetch', e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

Icon

This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.

Served over HTTPS

In order to be a PWA, the web application must be served over a secure network. With services like Cloudfare and LetsEncrypt, it is really easy to get an SSL certificate. Being a secure site is not only a best practice, but it also establishes your web application as a trusted site for users demonstrating trust and reliability and avoiding middleman attacks.

Now Let's talk about the current state and future of Progressive web apps (PWAs)

The current state of PWAs is one of growth and widespread adoption. Major companies such as Twitter, Uber, and Alibaba have already implemented PWAs and are seeing positive results. PWAs provide a high-quality user experience, offline functionality, and increased engagement, which has led to increased conversions and engagement for many companies.

The future of PWAs is promising as well. As web technologies continue to improve, PWAs will become increasingly capable and feature-rich. For example, advancements in areas such as web assembly, web VR/AR, and web GPU will further enhance the capabilities of PWAs. In addition, browser vendors and standards organizations are investing heavily in PWAs, which will result in improved support and easier development.

In Conclusion, the future of PWAs looks bright and they will likely play an increasingly important role in the web development landscape in the coming years

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development and share my journey as a Software Developer. Join me on Twitter for more. 🚀🎒