Series · 20 parts

Service Workers & PWA — từ Zero đến Production

Series tiếng Việt đưa bạn từ "service worker là cái gì" đến chỗ tự tin xây dựng một Progressive Web App offline-first chạy thật. Bắt đầu với mental model — service worker là một network proxy chạy nền, vòng đời (lifecycle) và vì sao nó khác Web Worker — rồi đào sâu lifecycle (install, activate, waiting, skipWaiting, clients.claim, update flow) và cách debug trong DevTools. Tiếp đó là chặn request với fetch event và respondWith, Cache API cùng các caching strategy kinh điển (cache-first, network-first, stale-while-revalidate), kiến trúc app shell offline-first và trang fallback, rồi advanced caching (versioning, cleanup, expiration, opaque/CORS). Phần sau là các năng lực nâng cao của nền tảng: Background Sync để retry request thất bại bằng hàng đợi IndexedDB, Push Notifications với Push API + VAPID, và Workbox để giảm boilerplate (precaching, routing, vite-plugin-pwa) — kết bằng capstone build một PWA hoàn chỉnh: manifest, install prompt, update UX, testing và deploy. Mỗi bài có ví dụ code chạy được và bài tập thực hành kèm hướng dẫn.

01 Service Workers · Phần 1 — Mental model & "Hello Service Worker"

Mở màn series: service worker thực sự là gì, vì sao nó tồn tại, kiến trúc network proxy chạy nền, khác biệt với Web Worker, scope, yêu cầu HTTPS, và đăng ký service worker đầu tiên của bạn.
02 Service Workers · Phần 2 — Lifecycle: install, waiting, activate & update

Mổ xẻ trọn vòng đời service worker: install, waiting, activate; vì sao SW mới bị "kẹt" ở waiting; skipWaiting và clients.claim; cơ chế update; controllerchange; và cách debug lifecycle trong DevTools.
03 Service Workers · Phần 3 — Fetch event & chặn request

Trái tim của service worker: event fetch và respondWith. Đọc Request, tạo Response, hiểu request mode/destination, xử lý lỗi mạng, khi nào nên và không nên chặn, đặt nền cho mọi caching strategy.
04 Service Workers · Phần 4 — Cache API & caching strategies

Làm chủ Cache API (open, put, match, addAll) và năm caching strategy kinh điển: cache-first, network-first, stale-while-revalidate, cache-only, network-only. Biết chọn strategy đúng cho từng loại tài nguyên.
05 Service Workers · Phần 5 — Offline-first & app shell

Ghép mọi thứ thành app mở được khi mất mạng: kiến trúc app shell, xử lý navigation request, trang offline fallback, offline cho ảnh/API, và phát hiện trạng thái online/offline cho UX.
06 Service Workers · Phần 6 — Advanced caching: versioning, cleanup & giới hạn

Cache versioning đúng cách, dọn cache cũ khi activate, giới hạn số lượng và expiration, quota & eviction, opaque response và cạm bẫy CORS, cùng cách tránh "cache độc" làm kẹt người dùng ở bản cũ.
07 Service Workers · Phần 7 — Background Sync & hàng đợi offline

Gửi lại request thất bại khi có mạng trở lại với Background Sync API, xây hàng đợi bằng IndexedDB, xử lý event sync và retry, Periodic Background Sync, cùng fallback cho trình duyệt không hỗ trợ.
08 Service Workers · Phần 8 — Push Notifications

Gửi thông báo đẩy ngay cả khi tab đóng: Push API + Notifications API, xin quyền đúng cách, VAPID keys, đăng ký PushSubscription, server gửi push, event push và notificationclick.
09 Service Workers · Phần 9 — Workbox: viết SW production trong vài dòng

Workbox của Google gói gọn mọi thứ đã học: precaching tự động, routing, strategies, expiration, background sync. Hai chế độ generateSW và injectManifest, tích hợp build qua vite-plugin-pwa.
10 Service Workers · Phần 10 — Capstone: build PWA offline-first hoàn chỉnh

Ghép cả series thành một PWA production: web app manifest, install prompt, update UX chuẩn, offline + background sync + push, checklist testing/debugging, Lighthouse và deploy. Tổng kết toàn bộ kiến thức.
11 Service Workers · Phần 11 — Web App Manifest & Install nâng cao

Mổ xẻ web app manifest đầy đủ: maskable icons, shortcuts, share_target, display_override, launch_handler, file/protocol handlers, rồi điều khiển install bằng beforeinstallprompt và xử lý đặc thù iOS.
12 Service Workers · Phần 12 — Update flows mastery

Xử lý cập nhật service worker như production: skipWaiting an toàn vs prompt, bug "double reload" của controllerchange, lệch phiên bản giữa SW và asset, deploy nguyên tử, và kill switch để gỡ SW khi sự cố.
13 Service Workers · Phần 13 — Navigation Preload

Vì sao việc khởi động service worker làm chậm navigation, và cách navigationPreload chạy request mạng song song với lúc SW thức dậy: bật preload, đọc preloadResponse, đặt header, và kết hợp với network-first.
14 Service Workers · Phần 14 — Streaming responses

Dùng ReadableStream và TransformStream trong service worker để ghép app shell từ cache với nội dung động từ mạng thành một response chảy dần — render tiến triển, cải thiện TTFB/LCP, và stream từ cache.
15 Service Workers · Phần 15 — Storage, quota & persistence

Đo và xin dung lượng bền với StorageManager (estimate, persist), hiểu chính sách eviction best-effort vs persistent, pattern dùng IndexedDB trong service worker, và dọn cache theo LRU để không vượt quota.
16 Service Workers · Phần 16 — Clients API & messaging hai chiều

Giao tiếp giữa trang và service worker: postMessage một chiều, MessageChannel để có phản hồi, BroadcastChannel cho nhiều tab, và Clients API (matchAll, openWindow, focus, navigate) để SW điều phối cửa sổ.
17 Service Workers · Phần 17 — Background Fetch & Periodic Sync nâng cao

Tải file lớn chạy nền với Background Fetch API có progress UI và sống sót khi đóng tab, cập nhật nội dung định kỳ bằng Periodic Background Sync, cùng permission, recordPayment-style UX và fallback.
18 Service Workers · Phần 18 — Bảo mật service worker

Vì sao SW cần HTTPS và scope quan trọng, những gì tuyệt đối không được cache (Authorization, PII), toàn vẹn nội dung và CSP cho SW, rủi ro chuỗi cung ứng, và cách tránh cache poisoning biến SW thành lỗ hổng.
19 Service Workers · Phần 19 — Hiệu năng & gỡ lỗi chuyên sâu

Chi phí khởi động service worker, cái bẫy fetch handler rỗng làm chậm mọi request, ngân sách precache, gộp request trùng (coalescing), tận dụng asset immutable, và bộ công cụ đo lường SW trong DevTools.
20 Service Workers · Phần 20 — Patterns nâng cao & tích hợp framework (Capstone 2)

Service worker trong Next.js/Astro/Angular, runtime caching cho API có auth & token refresh, hàng đợi analytics offline, feature flag & kill switch, và khi nào KHÔNG nên dùng service worker. Tổng kết 20 phần.