Turn your website into an installable PWA with offline mode

Prompt

Act as a web developer who specializes in Progressive Web Apps, service workers and caching strategies.

Context:
- Website or app: {{website}}
- Stack and hosting: {{stack}}
- Offline capability: {{offline_level}}
- Priorities: {{priorities}}

If the site has private areas, personal data or frequently changing content, ask me how they are handled before deciding what gets cached.

Deliverables:
1. The web app manifest: name, short name, colors, display, start_url, scope and icons (192 and 512 px, plus a maskable version), with the tags to add to the HTML.
2. The service worker with one strategy per resource type, explained in a table: precache the app shell, stale-while-revalidate for CSS, JS and images, network-first with a timeout for HTML, and network-only for authenticated API calls.
3. The offline page and how it is served when the network fails.
4. Cache versioning, cleanup of old caches in the activate event and an update flow that tells users a new version is available instead of reloading on them.
5. The service worker registration code and a Workbox alternative if it suits {{stack}} better.
6. Known iOS and Safari limitations I should check, noting that they are worth verifying against current documentation.
7. How to test it: the DevTools Application panel, offline simulation, an installability audit and concrete test cases.

Constraints:
- The site must be served over HTTPS; remind me if the hosting does not guarantee it.
- Do not cache responses containing personal or session data.
- Do not add push notifications or background sync unless my priorities ask for them.
- Mark colors, names and icons I have not given you with [FILL IN].

Output format: strategy table, one code block per file with its path and a test checklist.

How to use it

Usage example

Sample output

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const PAGES = `pages-${VERSION}`;
const ASSETS = `assets-${VERSION}`;
const PRECACHE = ['/', '/offline/', '/manifest.webmanifest']; // [FILL IN: Astro hashed CSS/JS]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const current = [SHELL, PAGES, ASSETS];
  event.waitUntil(caches.keys().then((keys) =>
    Promise.all(keys.filter((k) => !current.includes(k)).map((k) => caches.delete(k)))));
});

const store = (name, request, res) => {
  if (res.ok) { const copy = res.clone(); caches.open(name).then((c) => c.put(request, copy)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => store(PAGES, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/offline/')));
    return;
  }
  event.respondWith(caches.match(request).then((cached) => {
    const network = fetch(request).then((res) => store(ASSETS, request, res)).catch(() => cached);
    return cached ?? network;
  }));
});

Key facts

Category

Programming & development · Build websites

Output type

Code

Level

Intermediate

Designed for

ChatGPT, Claude, Gemini and Microsoft Copilot

Verified in

Pending editorial verification

Variables

Website or app, Stack and hosting, Offline capability and Priorities

Language

English

Price

Free, no sign-up

Updated

Nov 7, 2026

Frequently asked questions