PWA: install from the web

Play this lesson

An app without a store?

Hyper Shards lives on our website. But players want more: an icon on the home screen, full-screen play, and a game that works on a plane with no internet.

A website can do all of that. A Progressive Web App (PWA) is a website that can be installed and behave like an app. No store, no store review, no store fee. It takes two extra files: a manifest and a service worker.

Part 1: the manifest

The manifest is a small JSON file, manifest.json, that introduces our game to the device: its name, icons, colours, the page to open first, and how it opens. The game's page links to it with <link rel="manifest" href="/manifest.json">.

Chrome only offers an install button when the manifest has a name, a start_url, a display mode and icons of 192 and 512 pixels, and the site uses HTTPS (the padlock that keeps the connection private).

Manifest check

manifest.json
{  "name": "Hyper Shards",  "short_name": "Shards",  "start_url": "/",  "display": "fullscreen",  "background_color": "#0b0d2a",  "theme_color": "#7d4cc6",  "icons": [    { "src": "icon-192.png", "sizes": "192x192" },    { "src": "icon-512.png", "sizes": "512x512" }  ]}

Which line makes the installed Hyper Shards open with no browser bar at all, like a real game?

  1. Line 3
  2. Line 5
  3. Line 7
Show the answer

Line 5

"display": "fullscreen" hides the browser bar and the phone's status bar. Line 3 is the short label under the home screen icon, and line 7 tints parts of the window.

Part 2: the service worker

A service worker is a script, often sw.js, that sits between the game and the internet. The page switches it on with one line: navigator.serviceWorker.register('/sw.js').

It reacts to events. On install, it downloads the game files into a cache, a saved store of files on the device. On every fetch (each time the game asks for a file), it can answer from the cache instead of the internet. That's how Hyper Shards starts instantly and works on a plane.

Quick check

Which part of a PWA lets Hyper Shards run with no internet?

  1. The manifest
  2. The domain name
  3. The service worker
Show the answer

The service worker

The service worker saves the game files in a cache on the device, then hands them over from there when there's no connection. The manifest only describes the app.

Cache first, and updates

Our service worker uses cache first: look in the cache, and only go to the internet if a file isn't there. It's fast and offline-proof.

The catch: players could keep old files forever. So the cache gets a version name, like shards-v3. When we ship a fix, we change it to shards-v4. The browser spots that sw.js changed, installs the new worker, which saves fresh files, and an activate step deletes the old cache. Players get the fix once they close and reopen the game.

Bug hunt

sw.js
const CACHE = 'shards-v3';const FILES = ['/', '/game.js', '/ship.png']; self.addEventListener('install', (e) => {  e.waitUntil(caches.open(CACHE)    .then((c) => c.addAll(FILES)));}); self.addEventListener('fetch', (e) => {  e.respondWith(caches.match(e.request)    .then((hit) => hit || fetch(e.request)));});

Kai put a fixed game.js live, but players who installed Hyper Shards still get the old, buggy one. Which line should Kai change?

  1. Line 1
  2. Line 5
  3. Line 11
Show the answer

Line 1

Changing line 1 to 'shards-v4' changes sw.js, so the browser installs the new worker and it caches fresh files. Line 11 is the cache-first rule that makes offline play work, so it stays.

Installing Hyper Shards

When we fix a bug, we commit to GitHub, Cloudflare publishes it, and the new service worker brings the files to players. No store to wait for.

Bolt says: Superintelligent Game Studios is a PWA too. Look for the install option in your browser, and the course gets its own icon, just like Hyper Shards.

Quick check

On an iPhone, you install a PWA by tapping Share, then Add to Home Screen.

Show the answer

True

iPhones don't show a big install button for web apps. Share, then Add to Home Screen, puts the game icon right next to the other apps.

The limits

A PWA is also a great first step: the same web code can be wrapped into a real store app. That's how Garden Defense gets onto phones.

Bolt says: Installable is not enough. Next: making Hyper Shards fast to load and smooth to play, even on a cheap phone.

Fact-checked 9 October 2026