A Comprehensive Guide to Progressive Web Apps

This guide provides a complete overview of Progressive Web Apps (PWAs), from the core concepts to advanced capabilities and future trends.

What is a PWA?

A Progressive Web App (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

PWAs are an evolution of websites, offering an app-like experience to users without the need for them to visit an app store. The "progressive" in PWA means they are built with progressive enhancement as a core tenet, working for every user, regardless of browser choice.

Key Characteristics

✓Reliable & Fast
✓Engaging & App-like
✓Installable & Linkable
✓Network Independent
✓Discoverable & Safe
✓Re-engageable

Getting Started: Build a Basic PWA

Let's build a simple PWA from scratch. This example will be a basic "Hello World" application that can be installed and will work offline.

Step 1: HTML Structure (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First PWA</title>
    <link rel="stylesheet" href="style.css">
    <link rel="manifest" href="manifest.json">
</head>
<body>
    <h1>Hello, PWA!</h1>
    <script src="app.js"></script>
</body>
</html>

Step 2: Register Service Worker (`app.js`)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').then(registration => {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

Step 3: Web App Manifest (`manifest.json`)

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

Step 4: Create the Service Worker (`sw.js`)

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

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

Core PWA APIs

PWAs are powered by a set of modern web APIs. Explore the most important ones below.

Service Worker API

The Service Worker is the heart of a PWA. It's a script that runs in the background, separate from the main browser thread, acting as a proxy between the web app, the browser, and the network. This enables offline functionality, push notifications, and more.

Example: Network-First Caching Strategy

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request);
    })
  );
});

Push & Notifications APIs

These two APIs work together to enable re-engagement. The Push API allows a service worker to receive messages from a server, and the Notifications API allows it to display system notifications to the user, even when the app isn't active.

Example: Showing a Push Notification

self.addEventListener('push', event => {
  const title = 'New Message';
  const options = {
    body: 'You have a new message!',
    icon: 'icon-192x192.png'
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

Cache API

The Cache API provides a storage mechanism for Request/Response object pairs. It's controlled by your service worker and is the key to creating robust offline experiences by letting you store and serve assets directly from the user's device.

Example: Clearing Old Caches on Activation

self.addEventListener('activate', event => {
  const cacheWhitelist = ['my-pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Background Sync API

This API lets you defer actions until the user has a stable internet connection. If a user performs an action while offline (like sending a message), the service worker can register a 'sync' event that the browser will fire once connectivity is restored, ensuring the action is completed.

Example: Registering a Sync Event

// In your app.js
navigator.serviceWorker.ready.then(swRegistration => {
  return swRegistration.sync.register('my-sync-event');
});

// In your sw.js
self.addEventListener('sync', event => {
  if (event.tag === 'my-sync-event') {
    event.waitUntil(doSomeStuff());
  }
});

Platform Landscape

PWA support varies across browsers and platforms. Here's an overview of compatibility and specific enhancements.

Browser Compatibility

API	Chrome	Firefox	Safari	Edge
Service Worker	Yes	Yes	Yes	Yes
Web App Manifest	Yes	Yes	Yes	Yes
Push API	Yes	Yes	Partial	Yes
Background Sync	Yes	No	No	Yes
File System Access	Yes	No	No	Yes

Limitations of PWAs

While powerful, PWAs have limitations compared to native applications that are important to understand.

First Load Performance

The performance benefits of a PWA, such as instant loading, are only realized on the second visit. On the first visit, the service worker must be installed and assets cached, making the initial load time similar to a traditional website.

iOS/Safari Limitations

Apple's support for PWAs on iOS still lags behind other platforms. Key limitations include no standard web push notifications (it doesn't support the Web Push API), more limited storage, and lack of support for advanced APIs like Background Sync.

Hardware & OS Integration

PWAs have more restricted access to device hardware and OS features compared to native apps. Access to contacts, calendars, or advanced sensors is often limited. While they can be "installed," their integration with the OS (e.g., share menus) is not as deep.

The Future: Upcoming APIs

The web platform is constantly evolving, with a major focus on closing the capability gap between web and native applications. This effort is largely driven by Project Fugu 🐡.

Window Management API

Gives PWAs more control over managing multiple windows and displays, enabling powerful, multi-screen experiences.

Learn more →

Local Font Access API

Allows a web application to access a user's locally installed fonts, a game-changer for design and creative tools.