Guides

Building PWA development and deployment with Service Work...

This guide provides a structured approach to building a Progressive Web App (PWA) with mobile-first optimization, focusing on core PWA features, performance, and cross-platform consistency. Follow these steps to implement a functional PWA with practical considerations for mobile web development.

2-3 hours5 steps

Initialize PWA project with Vite

Create a new project using Vite with PWA template. This sets up service worker integration, manifest files, and necessary build tools. Use the command: `npm create vite@latest my-pwa -- --template react-ts`.

setup.sh

npm create vite@latest my-pwa -- --template react-ts
cd my-pwa
npm install
npm install @vitejs/plugin-react @pwa-kit/vite

Configure Web App Manifest

Create a manifest.json file with icons, theme colors, and start URL. Ensure icons are 512x512px and include all required display modes for mobile browsers.

manifest.json

{
  "name": "My PWA",
  "short_name": "PWA",
  "icons": [
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Implement Service Worker with Workbox

Register a service worker using Workbox to handle caching strategies. Configure precache for critical assets and runtime caching for dynamic content. Use `workbox-cli` to generate routing rules.

service-worker.js

import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

const { registerRoute } = require('workbox-routing');
const { CacheFirst } = require('workbox-strategies');

registerRoute(
  ({ request }) => request.mode === 'navigate',
  new CacheFirst({
    cacheName: 'html-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 20,
        maxAgeSeconds: 7 * 24 * 60 * 60
      })
    ]
  })
);

⚠ Common Pitfalls

•iOS requires manifest file to be served over HTTPS for full PWA features
•Service worker registration must occur before DOMContentLoaded

Add Push Notification Support

Implement push notifications using the Push API. Generate VAPID keys with `web-push` and register a push subscription in the service worker. Handle notifications in the app's main thread.

push.js

navigator.serviceWorker.register('/service-worker.js');

navigator.serviceWorker.ready.then(reg => {
  reg.pushManager.subscribe({
    applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_KEY'),
    userVisibleOnly: true
  }).then(sub => {
    console.log('Subscription:', sub);
  });
});

⚠ Common Pitfalls

•iOS requires a PWA to be installed before push notifications work
•Browser push services require HTTPS origin

Optimize for Mobile Performance

Use Lighthouse to audit performance metrics. Implement critical CSS extraction, image optimization, and code splitting. Enable lazy loading for non-critical resources.

performance.sh

npx lighthouse https://your-pwa.com --view
npm install --save-dev critical

What you built

This implementation establishes a baseline PWA with offline support, performance optimizations, and cross-platform features. Validate across mobile browsers, test under simulated poor network conditions, and refine caching strategies based on user behavior analytics.