Progressive Web Apps with Next.js in 2025

// types/pwa.ts
interface PWAFeature {
  name: string;
  essential: boolean;
  implementation: 'service-worker' | 'web-api' | 'manifest';
  browserSupport: number; // percentage
  fallback: string;
}
 
const pwaFeatures: PWAFeature[] = [
  {
    name: 'Offline functionality',
    essential: true,
    implementation: 'service-worker',
    browserSupport: 95,
    fallback: 'Online-only with error messages'
  },
  {
    name: 'App-like installation',
    essential: true,
    implementation: 'manifest',
    browserSupport: 90,
    fallback: 'Browser bookmark'
  },
  {
    name: 'Push notifications',
    essential: false,
    implementation: 'service-worker',
    browserSupport: 85,
    fallback: 'Email notifications'
  },
  {
    name: 'Background sync',
    essential: false,
    implementation: 'service-worker',
    browserSupport: 70,
    fallback: 'Manual retry'
  }
];

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
  sw: 'service-worker.js',
  publicExcludes: ['!robots.txt', '!sitemap.xml'],
  buildExcludes: [/middleware-manifest\.json$/],
  cacheStartUrl: false,
  dynamicStartUrl: false,
  reloadOnOnline: true,
  swcMinify: true,
  workboxOptions: {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
        handler: 'CacheFirst',
        options: {
          cacheName: 'google-fonts',
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 365 * 24 * 60 * 60 // 1 year
          }
        }
      },
      {
        urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
        handler: 'CacheFirst',
        options: {
          cacheName: 'google-fonts-static',
          expiration: {
            maxEntries: 4,
            maxAgeSeconds: 365 * 24 * 60 * 60
          }
        }
      },
      {
        urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
        handler: 'StaleWhileRevalidate',
        options: {
          cacheName: 'static-images',
          expiration: {
            maxEntries: 64,
            maxAgeSeconds: 24 * 60 * 60 // 1 day
          }
        }
      },
      {
        urlPattern: /\/api\/.*$/i,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          expiration: {
            maxEntries: 32,
            maxAgeSeconds: 24 * 60 * 60
          },
          networkTimeoutSeconds: 10
        }
      }
    ]
  }
});
 
module.exports = withPWA({
  // Your Next.js config
});

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "description": "A modern PWA built with Next.js",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait-primary",
  "categories": ["productivity", "utilities"],
  "lang": "en",
  "icons": [
    {
      "src": "/icons/manifest-icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/manifest-icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "shortcuts": [
    {
      "name": "Create New",
      "short_name": "New",
      "description": "Create a new item",
      "url": "/create",
      "icons": [
        {
          "src": "/icons/shortcut-create.png",
          "sizes": "96x96"
        }
      ]
    },
    {
      "name": "Dashboard",
      "short_name": "Dashboard",
      "description": "View your dashboard",
      "url": "/dashboard",
      "icons": [
        {
          "src": "/icons/shortcut-dashboard.png",
          "sizes": "96x96"
        }
      ]
    }
  ],
  "share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "files",
          "accept": ["image/*", "text/*"]
        }
      ]
    }
  }
}

// public/service-worker.js
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';
import { BackgroundSyncPlugin } from 'workbox-background-sync';
 
declare const self: ServiceWorkerGlobalScope;
 
// Precache and route
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();
 
// Cache strategies
registerRoute(
  ({ request }) => request.destination === 'document',
  new NetworkFirst({
    cacheName: 'pages-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        maxAgeSeconds: 24 * 60 * 60 // 1 day
      })
    ]
  })
);
 
registerRoute(
  ({ request }) => 
    request.destination === 'style' ||
    request.destination === 'script' ||
    request.destination === 'worker',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      }),
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
      })
    ]
  })
);
 
// Background sync for failed requests
const bgSyncPlugin = new BackgroundSyncPlugin('form-sync', {
  maxRetentionTime: 24 * 60 // 24 hours
});
 
registerRoute(
  /\/api\/submit/,
  new NetworkFirst({
    cacheName: 'api-sync',
    plugins: [bgSyncPlugin]
  }),
  'POST'
);
 
// Push notification handling
self.addEventListener('push', (event) => {
  const options = {
    body: event.data?.text() || 'New notification',
    icon: '/icons/notification-icon.png',
    badge: '/icons/badge-icon.png',
    vibrate: [200, 100, 200],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    },
    actions: [
      {
        action: 'explore',
        title: 'View',
        icon: '/icons/action-view.png'
      },
      {
        action: 'close',
        title: 'Close',
        icon: '/icons/action-close.png'
      }
    ]
  };
 
  event.waitUntil(
    self.registration.showNotification('PWA Notification', options)
  );
});
 
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
 
  if (event.action === 'explore') {
    event.waitUntil(
      self.clients.openWindow('/')
    );
  }
});
 
// Install prompt handling
self.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  // Store the event for later use
  self.deferredPrompt = event;
});

// lib/offline-storage.ts
class OfflineStorage {
  private dbName = 'PWADatabase';
  private version = 1;
  private db: IDBDatabase | null = null;
 
  async init(): Promise<void> {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
 
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };
 
      request.onupgradeneeded = (event) => {
        const db = (event.target as IDBOpenDBRequest).result;
 
        // Create object stores
        if (!db.objectStoreNames.contains('articles')) {
          const articlesStore = db.createObjectStore('articles', { keyPath: 'id' });
          articlesStore.createIndex('timestamp', 'timestamp', { unique: false });
        }
 
        if (!db.objectStoreNames.contains('drafts')) {
          db.createObjectStore('drafts', { keyPath: 'id' });
        }
 
        if (!db.objectStoreNames.contains('queue')) {
          db.createObjectStore('queue', { keyPath: 'id', autoIncrement: true });
        }
      };
    });
  }
 
  async store(storeName: string, data: any): Promise<void> {
    if (!this.db) await this.init();
 
    return new Promise((resolve, reject) => {
      const transaction = this.db!.transaction([storeName], 'readwrite');
      const store = transaction.objectStore(storeName);
      const request = store.put(data);
 
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve();
    });
  }
 
  async retrieve(storeName: string, key?: string): Promise<any> {
    if (!this.db) await this.init();
 
    return new Promise((resolve, reject) => {
      const transaction = this.db!.transaction([storeName], 'readonly');
      const store = transaction.objectStore(storeName);
      const request = key ? store.get(key) : store.getAll();
 
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve(request.result);
    });
  }
 
  async delete(storeName: string, key: string): Promise<void> {
    if (!this.db) await this.init();
 
    return new Promise((resolve, reject) => {
      const transaction = this.db!.transaction([storeName], 'readwrite');
      const store = transaction.objectStore(storeName);
      const request = store.delete(key);
 
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve();
    });
  }
 
  async clear(storeName: string): Promise<void> {
    if (!this.db) await this.init();
 
    return new Promise((resolve, reject) => {
      const transaction = this.db!.transaction([storeName], 'readwrite');
      const store = transaction.objectStore(storeName);
      const request = store.clear();
 
      request.onerror = () => reject(request.error);
      request.onsuccess = () => resolve();
    });
  }
}
 
export const offlineStorage = new OfflineStorage();

// components/PWAInstallPrompt.tsx
import { useState, useEffect } from 'react';
 
interface BeforeInstallPromptEvent extends Event {
  prompt(): Promise<void>;
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
}
 
export function PWAInstallPrompt() {
  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
  const [showInstallPrompt, setShowInstallPrompt] = useState(false);
 
  useEffect(() => {
    const handler = (e: Event) => {
      e.preventDefault();
      setDeferredPrompt(e as BeforeInstallPromptEvent);
      setShowInstallPrompt(true);
    };
 
    window.addEventListener('beforeinstallprompt', handler);
 
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);
 
  const handleInstallClick = async () => {
    if (!deferredPrompt) return;
 
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
 
    if (outcome === 'accepted') {
      setDeferredPrompt(null);
      setShowInstallPrompt(false);
    }
  };
 
  if (!showInstallPrompt || !deferredPrompt) return null;
 
  return (
    <div className="fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg shadow-lg z-50">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold">Install App</h3>
          <p className="text-sm opacity-90">Get the full app experience</p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => setShowInstallPrompt(false)}
            className="px-3 py-1 text-sm border border-white/20 rounded"
          >
            Later
          </button>
          <button
            onClick={handleInstallClick}
            className="px-3 py-1 text-sm bg-white text-blue-600 rounded font-medium"
          >
            Install
          </button>
        </div>
      </div>
    </div>
  );
}

// components/OfflineIndicator.tsx
import { useState, useEffect } from 'react';
 
export function OfflineIndicator() {
  const [isOnline, setIsOnline] = useState(true);
 
  useEffect(() => {
    setIsOnline(navigator.onLine);
 
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
 
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
 
  if (isOnline) return null;
 
  return (
    <div className="fixed top-0 left-0 right-0 bg-orange-500 text-white text-center py-2 z-50">
      <p className="text-sm font-medium">
        You're offline. Some features may not be available.
      </p>
    </div>
  );
}

// lib/push-notifications.ts
export class PushNotificationManager {
  private vapidPublicKey = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!;
 
  async requestPermission(): Promise<boolean> {
    if (!('Notification' in window)) {
      console.log('This browser does not support notifications');
      return false;
    }
 
    const permission = await Notification.requestPermission();
    return permission === 'granted';
  }
 
  async subscribeUser(): Promise<PushSubscription | null> {
    if (!('serviceWorker' in navigator)) return null;
 
    const registration = await navigator.serviceWorker.ready;
    
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: this.urlB64ToUint8Array(this.vapidPublicKey)
    });
 
    // Send subscription to server
    await fetch('/api/push/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(subscription)
    });
 
    return subscription;
  }
 
  async unsubscribeUser(): Promise<boolean> {
    if (!('serviceWorker' in navigator)) return false;
 
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.getSubscription();
 
    if (subscription) {
      await subscription.unsubscribe();
      
      // Remove subscription from server
      await fetch('/api/push/unsubscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ endpoint: subscription.endpoint })
      });
      
      return true;
    }
 
    return false;
  }
 
  private urlB64ToUint8Array(base64String: string): Uint8Array {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
      .replace(/-/g, '+')
      .replace(/_/g, '/');
 
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
 
    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
}
 
export const pushManager = new PushNotificationManager();

// hooks/usePWAOptimizations.ts
import { useEffect, useState } from 'react';
 
export function usePWAOptimizations() {
  const [networkInfo, setNetworkInfo] = useState<any>(null);
  const [memoryInfo, setMemoryInfo] = useState<any>(null);
 
  useEffect(() => {
    // Monitor network conditions
    if ('connection' in navigator) {
      const connection = (navigator as any).connection;
      setNetworkInfo({
        effectiveType: connection.effectiveType,
        downlink: connection.downlink,
        saveData: connection.saveData
      });
 
      const updateNetworkInfo = () => {
        setNetworkInfo({
          effectiveType: connection.effectiveType,
          downlink: connection.downlink,
          saveData: connection.saveData
        });
      };
 
      connection.addEventListener('change', updateNetworkInfo);
      return () => connection.removeEventListener('change', updateNetworkInfo);
    }
  }, []);
 
  useEffect(() => {
    // Monitor memory usage
    if ('memory' in performance) {
      const updateMemoryInfo = () => {
        const memory = (performance as any).memory;
        setMemoryInfo({
          usedJSHeapSize: memory.usedJSHeapSize,
          totalJSHeapSize: memory.totalJSHeapSize,
          jsHeapSizeLimit: memory.jsHeapSizeLimit
        });
      };
 
      updateMemoryInfo();
      const interval = setInterval(updateMemoryInfo, 10000); // Every 10 seconds
      
      return () => clearInterval(interval);
    }
  }, []);
 
  return {
    networkInfo,
    memoryInfo,
    isSlowNetwork: networkInfo?.effectiveType === '2g' || networkInfo?.effectiveType === 'slow-2g',
    isSaveDataMode: networkInfo?.saveData,
    isLowMemory: memoryInfo && (memoryInfo.usedJSHeapSize / memoryInfo.jsHeapSizeLimit) > 0.8
  };
}

// pwa-metrics.ts
interface PWAMetrics {
  metric: string;
  beforePWA: number;
  afterPWA: number;
  improvement: string;
}
 
const pwaResults: PWAMetrics[] = [
  {
    metric: 'Page load time (repeat visits)',
    beforePWA: 2800, // ms
    afterPWA: 400,
    improvement: '86% faster'
  },
  {
    metric: 'Offline functionality',
    beforePWA: 0, // percentage
    afterPWA: 85,
    improvement: 'Full offline support'
  },
  {
    metric: 'User engagement',
    beforePWA: 65, // percentage
    afterPWA: 92,
    improvement: '42% increase'
  },
  {
    metric: 'App store rating',
    beforePWA: 0,
    afterPWA: 4.8,
    improvement: 'Now available as app'
  }
];