Understanding PWAs ๐Ÿš€ (Pt. 1)

Understanding PWAs ๐Ÿš€ (Pt. 1)

ยท

4 min read

PWA stands for Progressive Web Apps.

We are currently at the stage where user experience & accessibility are paramount. And PWA is one of the ways which is revolutionizing the way we interact with web applications.

Let's understand what a PWA is.

A Progressive Web App (PWA) is a type of web application that utilizes modern web technologies to provide users with an app-like experience. It combines the best features of both web and native mobile applications, offering enhanced performance, offline functionality, and the ability to be installed on a user's device.

PWAs are built using standard web technologies such as HTML, CSS, and JavaScript, but they incorporate additional capabilities that enable them to function like native apps. These capabilities include service workers, which allow the app to work offline and load quickly even in low or no network conditions, as well as the ability to send push notifications to users.

One of the key benefits of PWAs is their platform independence. They can run on any device or platform with a modern web browser, eliminating the need to develop separate applications for different operating systems. This makes them highly cost-effective and efficient for businesses, as they can reach a wider audience without investing in multiple app development projects.

PWAs are known for their ease of use and installation. Unlike traditional mobile apps, which require users to visit an app store and go through the installation process, PWAs can be added to the user's home screen directly from the browser with a single tap. This streamlined installation process enhances user convenience and reduces friction.

Now that we have understood what a PWA is, let's dive into and see some of the key problems that PWA solves.

What PWA brings to the table?

Slow load time

Ever clicked on a website link, only to wait impatiently as it takes forever to load? ๐Ÿ˜ฉ With PWA, this frustration is a thing of the past. PWAs utilize advanced caching mechanisms, allowing them to load instantly, regardless of network conditions. ๐Ÿš€โšก๏ธ No more staring at loading screens!

Poor offline functionality

Internet connectivity can be unpredictable, leaving users stranded without access to their favorite apps. But fear not! PWA comes to the rescue by enabling offline functionality. Users can continue using the app and accessing content, even when there's no internet connection.

Platform Dependency

Gone are the days of developing separate apps for iOS, Android, and other platforms. PWA works seamlessly across various operating systems and browsers, eliminating the need for platform-specific development. ๐Ÿ’ช๐ŸŒ Build once, deploy everywhere!

App Installation Hassles

Downloading and installing apps can be cumbersome, taking up valuable storage space on users' devices. With PWA, users can simply add the app to their home screens with a single tap, bypassing the need for app stores. ๐Ÿ“ฒ๐Ÿ’ก It's quick, hassle-free, and doesn't consume precious storage.

User Engagement

Engaging users and keeping them coming back is vital for any successful application. PWA leverages push notifications, providing real-time updates and re-engaging users even when they're not actively using the app. ๐Ÿ“ฉโœ‰๏ธ Stay connected and increase user retention effortlessly.

These are some of the ways in which PWA is gaining traction across the industry.

Now, let's see how can we set up a basic PWA & get started with it.

Basic PWA setup

To get started, we would need a few things in place first.

Project setup ๐Ÿ‘‡

Contents in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="shortcut icon" href="./icon-192.png" type="image/x-icon" />
    <title>My first PWA</title>

    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Welcome to my first PWA</h1>
  </body>
</html>

Contents in styles.css

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.title {
  text-align: center;
}

Contents in manifest.json

{
  "name": "My First PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#333333",
  "prefer_related_applications": true,
  "scope": ".",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Contents in script.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("./service-worker.js")
      .then((registration) => {
        console.log("Service Worker registered successfully:", registration);
      })
      .catch((error) => {
        console.log("Service Worker registration failed:", error);
      });
  });
}

Contents in service-worker.js

const CACHE_NAME = "my-pwa-cache-v1";
const urlsToCache = [
  "/",
  "/index.html",
  "/styles.css",
  "/script.js",
  "/icon-192.png",
  "/icon-512.png",
  // Add other static assets to cache here
];

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
      .then(() => self.skipWaiting())
  );
});

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((cacheName) => cacheName !== CACHE_NAME).map((cacheName) => caches.delete(cacheName))
      );
    })
  );
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

Output ๐Ÿ‘‡

Hope you learned something new today!

Thank you for reading.

Follow me on

Github

Linkedin

That's it, folks!