Skip to content
OpenPWA

Getting started

Outcome: a working site that a browser recognises as installable, with an app icon on the home screen or dock. This path takes an ordinary website and adds the two things that make it a PWA — a web app manifest and a service worker — then checks it against each platform’s installability bar.

This guide is the how. For the what behind each step, follow the links into the Reference; for where it works, follow the links into Compatibility.

Before you start

Section titled “Before you start”

You need a site served over HTTPS (or localhost for development), a small icon set, and an editor. No framework or build tooling is required — a PWA is added to an existing site, not a new kind of project.

Steps

Section titled “Steps”

  1. Serve over a secure origin. Service workers and install only run on HTTPS or localhost. Confirm your dev URL is one of those before going further.

  2. Add a web app manifest. Create manifest.webmanifest with at least name, start_url, display, and a 192px and 512px icon, then link it from your HTML <head>. The fields and their effects are described in the manifest reference; the display modes decide how much browser UI remains.

  3. Register a service worker. Add a service-worker.js and register it from your page script. Even an empty fetch handler satisfies the requirement; what the worker does (caching, offline) comes later. See the service worker reference and its lifecycle for registration and update behaviour.

  4. Check installability. Open your browser’s application/PWA dev panel and confirm it reports the app as installable. The criteria — manifest, secure origin, service worker with a fetch handler, icons — are summarised in the installation reference. Support for the install prompt itself varies; see the install-prompt compatibility data.

  5. Test the install moment. Trigger install from the browser, then launch the installed app. On iOS the route is Safari’s Add to Home Screen rather than a prompt — the platform difference is covered in iOS / Safari platform notes.

You now have

Section titled “You now have”

A site the browser treats as an app: installable, launchable from the home screen, and ready for the next layers — a real offline strategy, a designed install experience, and performance tuning.

Where to go next

Section titled “Where to go next”

← Back to the Guides overview.