What are Progressive Web Applications (PWAs)?

TL;DR

Progressive Web Applications (PWAs) are web applications that use modern web capabilities to deliver an app-like experience to users. They are reliable, fast, and engaging. PWAs can work offline, send push notifications, and be installed on a user's home screen. They leverage technologies like service workers, web app manifests, and HTTPS to provide these features.

What are Progressive Web Applications (PWAs)?

Definition

Progressive Web Applications (PWAs) are web applications that combine the best of web and mobile apps. They are built using standard web technologies such as HTML, CSS, and JavaScript but offer enhanced capabilities that make them feel like native apps.

Key characteristics

Progressive: They work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
Responsive: They fit any form factor, whether it's a desktop, mobile, or tablet.
Connectivity independent: They can work offline or on low-quality networks using service workers.
App-like: They provide an app-like experience to users 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, allowing search engines to find them.
Re-engageable: They can send push notifications to re-engage users.
Installable: They allow users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable: They can be easily shared via URL and do not require complex installation.

Core technologies

Service workers

Service workers are scripts that run in the background, separate from the web page, enabling features like offline functionality, background sync, and push notifications.

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 application (name, icons, start URL, etc.) and allows it to be installed on the user's home screen.

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon/lowres.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },
    {
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    }
  ]
}

HTTPS

PWAs must be served over HTTPS to ensure security and privacy. This is a requirement for service workers and other advanced web features.

Benefits

Improved performance: PWAs load faster and provide a smoother user experience.
Increased engagement: Features like push notifications and home screen installation help keep users engaged.
Cost-effective: Developing a PWA can be more cost-effective than building separate native apps for different platforms.

What are Progressive Web Applications (PWAs)?

TL;DR