@@ -59,8 +59,8 @@ jobs:
       - name: Collect site files
         run: |
           mkdir _site
-          cp index.html theme.js texts.js script.js style.css _site/
-          cp -r fonts _site/
+          cp index.html theme.js texts.js script.js style.css sw.js manifest.webmanifest _site/
+          cp -r fonts icons _site/
 
       - uses: actions/upload-pages-artifact@v5
         with:
 
@@ -34,6 +34,7 @@ Open `index.html` in a browser, or serve the folder with any static file server.
 - **Challenge links**: after a run of a second or longer, Copy challenge link puts a URL on the clipboard. The URL's hash holds the run's settings, the seed of its passages, its WPM, and its keystroke timings, compressed. Opening it starts a run on the same passages with that run as the ghost, and the result dialog says who was faster. The receiver's saved settings are not changed; after the run, Play Again goes back to them. Links made before a change to the passages in `texts.js` may show different text.
 - **Stats**: a dialog, opened from the chart icon in the header, with your best WPM for every setting you have played, the average of your last ten runs, and a list of recorded runs. Export saves everything in `localStorage` to a JSON file, Import loads such a file and replaces the stored data, and Clear data (two clicks) removes history, bests, and key stats.
 - **Themes**: System (follows the OS light/dark and increased-contrast settings), Dark, Light, and High contrast, chosen in Settings. `theme.js`, loaded in `<head>`, applies the saved theme before the page paints.
+- **Offline and install**: `sw.js`, a service worker, saves the app's files on the first visit, so later visits load without a network connection. It tries the network first, so a new version is used as soon as you are online. `manifest.webmanifest` and the icons in `icons/` let browsers install the page as an app.
 - **Sound**: short tones made with the Web Audio API for keypress, mistake, and completion. Can be turned off.
 - **Keyboard**: Tab restarts while you are typing. Escape closes a dialog. Opening Settings during a run abandons the run.
 - **Focus**: if the typing input loses focus, a hint appears over the text. Pressing a letter key moves focus back to the input.
@@ -69,9 +70,9 @@ npm run format        # Prettier, write mode
 npm run check         # lint, format check, and tests
 ```
 
-`index.html`, `theme.js`, `texts.js`, `script.js`, and `style.css` are the whole app. The script runs at load and expects to be the last tag in `<body>`. Tests live in `tests/` and drive the real page with keystrokes in Chromium, Firefox, and WebKit. Each item under "What it does" has at least one test, as do recovery from corrupt `localStorage`, the contrast check, and the absence of requests to other sites.
+`index.html`, `theme.js`, `texts.js`, `script.js`, and `style.css` are the app; `sw.js`, `manifest.webmanifest`, and `icons/` add offline use and installing. The script runs at load and expects to be the last tag in `<body>`. Tests live in `tests/` and drive the real page with keystrokes in Chromium, Firefox, and WebKit. Each item under "What it does" has at least one test, as do recovery from corrupt `localStorage`, the contrast check, and the absence of requests to other sites.
 
-Each push to `main` runs lint, the format check, and the tests in GitHub Actions. If they pass, the same workflow publishes `index.html`, `theme.js`, `texts.js`, `script.js`, `style.css`, and `fonts/` to GitHub Pages; if they fail, the live site is not changed.
+Each push to `main` runs lint, the format check, and the tests in GitHub Actions. If they pass, the same workflow publishes those files and `fonts/` to GitHub Pages; if they fail, the live site is not changed.
 
 ## License
 
 
@@ -33,6 +33,14 @@ module.exports = [
         // The constants are used by script.js.
         rules: { 'no-unused-vars': 'off' },
     },
+    {
+        files: ['sw.js'],
+        languageOptions: {
+            ecmaVersion: 2022,
+            sourceType: 'script',
+            globals: { ...globals.serviceworker },
+        },
+    },
     {
         files: ['tests/**/*.js', 'playwright.config.js', 'eslint.config.js'],
         languageOptions: {
 
@@ -12,6 +12,9 @@
             content="TypeSpeed: a browser typing trainer with timed and word-count modes, a code category, and ghost replay of your best run."
         />
         <title>TypeSpeed</title>
+        <link rel="manifest" href="manifest.webmanifest" />
+        <meta name="theme-color" content="#0f172a" />
+        <link rel="apple-touch-icon" href="icons/icon-192.png" />
         <link
             rel="icon"
             href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230f172a'/%3E%3Ctext x='16' y='23' font-size='20' font-family='monospace' font-weight='700' text-anchor='middle' fill='%23818cf8'%3ET%3C/text%3E%3C/svg%3E"
 
@@ -0,0 +1,14 @@
+{
+  "name": "TypeSpeed",
+  "short_name": "TypeSpeed",
+  "description": "Browser typing trainer with time and word modes, a code category, and ghost replay.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0f172a",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
@@ -8,6 +8,9 @@ module.exports = defineConfig({
     use: {
         baseURL: 'http://127.0.0.1:8765',
         trace: 'retain-on-failure',
+        // The service worker would cache responses across tests. The offline
+        // test turns it back on for its own context.
+        serviceWorkers: 'block',
     },
     webServer: {
         command: 'node scripts/serve.mjs',
 
@@ -1669,6 +1669,17 @@ function init() {
 
     resetGame();
     loadChallengeFromHash();
+    registerServiceWorker();
+}
+
+// --- Offline ---
+// sw.js saves the app's files so the page loads offline. Service workers
+// only run over HTTPS or on localhost, so file:// and other origins skip it.
+function registerServiceWorker() {
+    if (!('serviceWorker' in navigator) || !window.isSecureContext) return;
+    // Offline use is optional: if registration fails (blocked by the
+    // browser or its settings), the page works the same without it.
+    navigator.serviceWorker.register('sw.js').catch(() => {});
 }
 
 init();
@@ -0,0 +1,50 @@
+/**
+ * TypeSpeed service worker. Saves the app's files on install so the page
+ * loads without a network connection. Requests try the network first and
+ * fall back to the saved copy, so a new deploy is picked up on the next
+ * load while online.
+ */
+const CACHE = 'typespeed';
+const FILES = [
+    './',
+    'index.html',
+    'style.css',
+    'theme.js',
+    'texts.js',
+    'script.js',
+    'manifest.webmanifest',
+    'fonts/jetbrains-mono-latin.woff2',
+    'fonts/space-grotesk-latin.woff2',
+    'icons/icon-192.png',
+    'icons/icon-512.png',
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches
+            .open(CACHE)
+            .then((cache) => cache.addAll(FILES))
+            .then(() => self.skipWaiting())
+    );
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+    const { request } = event;
+    if (request.method !== 'GET' || new URL(request.url).origin !== self.location.origin) return;
+    event.respondWith(
+        fetch(request)
+            .then((response) => {
+                if (response.ok) {
+                    const copy = response.clone();
+                    caches.open(CACHE).then((cache) => cache.put(request, copy));
+                }
+                return response;
+            })
+            // ignoreSearch: the page URL may carry a query string.
+            .catch(() => caches.match(request, { ignoreSearch: true }))
+    );
+});