✦ StealThis .dev
Boilerplates Medium

PWA Starter (Vite + Workbox)

Progressive Web App starter with Vite PWA plugin, Workbox service worker, web manifest, offline support, and install prompts.

Open in Lab
vite typescript
Targets: HTML

Code

Everything you need to turn a Vite app into a Progressive Web App: service worker, web manifest, offline caching, and install prompts.

Core Concepts

A PWA requires three things:

  1. Web App Manifest (manifest.webmanifest) — tells the browser your app’s name, icons, theme color, and display mode.
  2. Service Worker — a background script that intercepts network requests and enables offline caching.
  3. HTTPS — required for service worker registration (localhost is exempt during development).

Setup with vite-plugin-pwa

npm i -D vite-plugin-pwa
// vite.config.ts
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: ["favicon.svg", "robots.txt"],
      manifest: {
        name: "My PWA App",
        short_name: "MyPWA",
        theme_color: "#0a0a0f",
        icons: [
          { src: "/icons/192.png", sizes: "192x192", type: "image/png" },
          { src: "/icons/512.png", sizes: "512x512", type: "image/png" },
        ],
      },
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\./,
            handler: "NetworkFirst",
            options: { cacheName: "api-cache" },
          },
        ],
      },
    }),
  ],
});

Caching Strategies (Workbox)

StrategyBehaviorBest For
CacheFirstServe from cache, fall back to networkStatic assets, fonts, icons
NetworkFirstTry network first, fall back to cacheAPI responses, dynamic data
StaleWhileRevalidateServe from cache, update in backgroundSemi-static content, avatars

Project Structure

public/
  icons/
    192.png
    512.png
  robots.txt
src/
  main.ts
  sw.ts                # Custom service worker (optional)
vite.config.ts         # VitePWA() plugin config

PWA Checklist

  • Manifest with name, icons, and theme color
  • Service worker registered and active
  • Offline mode functional
  • App is installable (Add to Home Screen)
  • Served over HTTPS

Community Alternative

pwa-builder/pwa-starter (1.3k stars) — a more opinionated starter from Microsoft’s PWA team with Lit components and Shoelace UI.

References