How Browsers Work · Part 10 — Storage & the Platform
Where the web stores data: cookie scope, Web Storage, IndexedDB, Cache API and service workers — sync/async trade-offs, quotas, partitioning and lifecycle.
Filter/Tag
#service-worker
24 entries
-
-
Web Performance · Part 11 — Network & Caching
The network layer matters: HTTP caching (Cache-Control, ETag, immutable), CDN and edge, Brotli/Zstandard/Gzip compression, HTTP/2-3, and service-worker strategies for offline cache.
-
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.
-
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.
-
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.
-
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.
-
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ổ.
-
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.
-
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.
-
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.
-
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ố.
-
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.
-
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.
-
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.
-
Build Chrome Extensions · Part 5 — The Background Service Worker
The event-driven heart of MV3: the lifecycle (install, wake, idle, terminate), why there is no persistent state, alarms vs setTimeout, and registering listeners correctly. With a live lifecycle simulator.
-
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.
-
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ợ.
-
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ũ.
-
Build Chrome Extensions · Part 3 — Architecture & the Component Model
How the popup, content script, service worker and options page relate — what each one can and cannot do, why they are isolated, and the data-flow that ties them together. With an interactive context map.
-
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.
-
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.
-
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.
-
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.
-
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.