Filter/Tag
20 entries
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.
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.
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.
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.
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ổ.
Đ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.
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.
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.
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ố.
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.
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.
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.
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.
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ợ.
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ũ.
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.
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.
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.
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.
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.