PWA 2024: Migration Guide React Web ke SPA Modern

Menjembatani Kesenjangan Web & Mobile Native

Progressive Web Apps (PWA) telah berkembang jauh dari sekadar ikon bookmark di layar beranda. Dengan standar modern Web APIs (seperti Web App Manifest, Badging API, Background Sync, dan Web Push), aplikasi web kini dapat menyamai 90% kapabilitas aplikasi native tanpa repot melalui antrean review App Store.

1. Konfigurasi Service Worker Berbasis Workbox

Service worker adalah inti dari pengalaman offline dan performa secepat kilat:

// sw.js menggunakan strategi Stale-While-Revalidate untuk aset statis
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Cache gambar dengan limit 60 hari
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache-v1',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 60 * 24 * 60 * 60,
      }),
    ],
  })
);

2. Pengalaman Offline & Background Data Sync

Ketika pengguna kehilangan sinyal saat mengisi form order, gunakan IndexedDB untuk menampung payload dan kirim otomatis saat koneksi internet pulih menggunakan SyncManager:

export async function queueOfflineAction(data: OrderPayload) {
  await saveToIndexedDB('offline-orders', data);
  if ('serviceWorker' in navigator && 'SyncManager' in window) {
    const registration = await navigator.serviceWorker.ready;
    await registration.sync.register('sync-orders');
  }
}