Progressive Web App (PWA) 2026: Xây app web mượt như mobile app với offline, push notification và cache

// sw.js - Service worker cơ bản
const CACHE_NAME = 'pwa-v1';
const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/offline.html'
];

// Cài đặt: precache các file tĩnh quan trọng
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting()) // Activate ngay, không chờ tab cũ đóng
  );
});

// Activate: dọn cache cũ
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames
          .filter((name) => name !== CACHE_NAME)
          .map((name) => caches.delete(name))
      );
    }).then(() => self.clients.claim()) // Claim các tab đang mở
  );
});

// Fetch: intercept request và quyết định chiến lược cache
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cached) => cached || fetch(event.request))
  );
});

npm install -D vite-plugin-pwa

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      workbox: {
        // Precache toàn bộ build output
        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
        runtimeCaching: [
          {
            // Network-first cho API calls
            urlPattern: /^https:\/\/api\.example\.com\//,
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: { maxEntries: 50, maxAgeSeconds: 300 }, // 5 phút
              networkTimeoutSeconds: 3 // Fallback về cache sau 3s
            }
          },
          {
            // Cache-first cho ảnh CDN
            urlPattern: /^https:\/\/cdn\.example\.com\//,
            handler: 'CacheFirst',
            options: {
              cacheName: 'image-cache',
              expiration: { maxEntries: 100, maxAgeSeconds: 86400 * 30 } // 30 ngày
            }
          },
          {
            // Stale-while-revalidate cho font, static assets
            urlPattern: /\.(?:woff2|woff|ttf)$/,
            handler: 'StaleWhileRevalidate',
            options: { cacheName: 'font-cache' }
          }
        ]
      },
      manifest: {
        name: 'My PWA App',
        short_name: 'MyApp',
        theme_color: '#1a1a2e',
        icons: [
          { src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' }
        ]
      }
    })
  ]
};

// Trong app code: đăng ký sync khi submit form offline
async function submitFormOffline(data) {
  // Lưu data vào IndexedDB
  await saveToIndexedDB('pending-forms', data);
  
  // Đăng ký background sync
  const registration = await navigator.serviceWorker.ready;
  await registration.sync.register('sync-forms');
}

// Trong service worker: xử lý sync event
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-forms') {
    event.waitUntil(syncPendingForms());
  }
});

async function syncPendingForms() {
  // Lấy pending data từ IndexedDB
  const pendingForms = await getFromIndexedDB('pending-forms');
  
  for (const form of pendingForms) {
    try {
      await fetch('/api/submit', {
        method: 'POST',
        body: JSON.stringify(form),
        headers: { 'Content-Type': 'application/json' }
      });
      // Xóa khỏi queue sau khi sync thành công
      await removeFromIndexedDB('pending-forms', form.id);
    } catch (err) {
      // Giữ lại trong queue, retry lần sau
      console.error('Sync thất bại, sẽ retry:', err);
    }
  }
}

// Đăng ký nhận push notification
async function subscribeToPush() {
  const registration = await navigator.serviceWorker.ready;
  
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true, // Bắt buộc true - không cho silent push
    applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY)
  });
  
  // Gửi subscription lên server để lưu
  await fetch('/api/push/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

// Service worker: nhận và hiển thị notification
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};
  
  event.waitUntil(
    self.registration.showNotification(data.title || 'Thông báo mới', {
      body: data.body,
      icon: '/icons/icon-192.png',
      badge: '/icons/badge-72.png',
      data: { url: data.url }, // URL để mở khi click
      actions: [
        { action: 'open', title: 'Xem ngay' },
        { action: 'dismiss', title: 'Bỏ qua' }
      ]
    })
  );
});

// Xử lý click vào notification
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  
  if (event.action === 'open' || !event.action) {
    event.waitUntil(
      clients.openWindow(event.notification.data.url || '/')
    );
  }
});

// Bắt sự kiện beforeinstallprompt
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault(); // Ngăn browser show ngay
  deferredPrompt = event; // Lưu lại để dùng sau
  
  // Show custom install button thay vì browser default
  showInstallButton();
});

// Khi người dùng click install button của bạn
async function handleInstallClick() {
  if (!deferredPrompt) return;
  
  deferredPrompt.prompt(); // Show native install dialog
  const { outcome } = await deferredPrompt.userChoice;
  
  if (outcome === 'accepted') {
    console.log('Người dùng đã cài app');
    trackEvent('pwa_installed'); // Analytics
  }
  
  deferredPrompt = null;
  hideInstallButton();
}

// Detect khi app đã được cài
window.addEventListener('appinstalled', () => {
  console.log('PWA installed successfully');
});

{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "description": "Mô tả app ngắn gọn",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#1a1a2e",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    }
  ]
}