Service Worker và caching strategy trong PWA là gì?

Service Worker là JavaScript running trong background thread, intercept network requests giữa app và network — foundation của PWA.

• Lifecycle: Install (cache precache assets) → Activate (cleanup old caches) → Fetch (intercept requests).
• Caching strategies: Cache First (check cache trước, fallback network — offline-first, dùng cho static assets, icon fonts); Network First (fetch từ network, fallback cache nếu offline — dùng cho API calls cần fresh data); Stale-While-Revalidate (serve từ cache immediately, fetch từ network để update cache background — balance speed và freshness, tốt cho non-critical data); Cache Only (chỉ cache, không network — precached resources); Network Only (không cache — real-time data).
• Background Sync: queue failed requests khi offline, retry khi network available — ví dụ submit form offline.
• Push Notifications: receive push messages từ server kể cả khi app không open — cần permission từ user.
• Workbox từ Google: abstraction layer cho Service Worker strategies — workbox-strategies, workbox-routing, workbox-precaching; tránh viết Service Worker boilerplate thủ công. vite-plugin-pwa tích hợp Workbox với Vite, tự động generate service worker.

Pitfall: Service Worker cache bugs khó debug — phải explicitly update cache version khi deploy; chrome://serviceworker-internals để debug.

• HTTPS required (localhost exception).