Understanding Progressive Web Apps

What is Progressive Enhancement Principle?

What is a Progressive Web App?

• Progressive - They work for every user, regardless of browser choice, using progressive enhancement principles.

• Responsive - They fit any form factor: desktop, mobile, tablet, or forms yet to emerge.

• Connectivity independent - They’re enhanced with service workers to work offline or on low-quality networks.

• App-like - They feel like an app to the user with app-style interactions and navigation.

• Fresh - They are always up-to-date thanks to the service worker update process.

• Safe - They are served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

• Discoverable - They are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

• Re-engageable - They make re-engagement easy through features like push notifications.

• Installable - They allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

• Linkable - They can be easily shared via a URL and do not require complex installation.

Code Examples

• Service Worker registration: These are at the heart of the PWA architecture. Service workers are scripts that run in the background, separate from the main browser thread, and enable features such as push notifications, background data sync, and most importantly, offline experiences. They act as a proxy between the network and the device, allowing developers to manage how their applications handle network requests and data caching.

// Check if the browser supports service workers
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

• Web App Manifest: The web app manifest is a JSON file that provides metadata about the web app in a machine-readable format. This includes information like the name, icons, start URL, display mode, and orientation, which browsers use to treat web applications like native apps. This metadata allows the app to be added to the home screen, receive a full-screen experience, and integrate more seamlessly with the device’s OS. Below defines the name, start URL, display mode, background color, description, and icons of your PWA.

{
  "name": "Example PWA",
  "short_name": "ExPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "description": "An example Progressive Web App.",
  "icons": [
    {
      "src": "images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

<link rel="manifest" href="/manifest.json">

• Service Worker with Basic Caching: This design concept involves loading the minimal necessary HTML, CSS, and JavaScript to power the user interface when the app first loads, which is known as the "shell." This shell is cached offline and dynamically filled with content using JavaScript. This approach allows for rapid loading and can dynamically update the content without needing to reload the shell.

const cacheName = 'v1';
const staticAssets = [
  './',
  './styles.css',
  './script.js',
  './images/icon-192x192.png'
];

self.addEventListener('install', async event => {
  const cache = await caches.open(cacheName);
  await cache.addAll(staticAssets);
});

self.addEventListener('fetch', event => {
  const req = event.request;
  const url = new URL(req.url);

  if (url.origin === location.origin) {
    event.respondWith(cacheFirst(req));
  } else {
    event.respondWith(networkAndCache(req));
  }
});

async function cacheFirst(req) {
  const cache = await caches.match(req);
  return cache || fetch(req);
}

async function networkAndCache(req) {
  const cache = await caches.open(cacheName);
  try {
    const fresh = await fetch(req);
    await cache.put(req, fresh.clone());
    return fresh;
  } catch (e) {
    const cached = await cache.match(req);
    return cached;
  }
}

API Integration

The Evolution of Progressive Web Apps

Why Do Progressive Web Apps Matter?

How Are Progressive Web Apps Changing the Digital Landscape?

The Future of Progressive Web Apps

Conclusion