Service worker đi qua: register → install → (waiting) → activate → idle/terminated.
- install: chạy một lần cho mỗi phiên bản script, thường dùng để precache asset.
- waiting: nếu đã có service worker cũ đang điều khiển trang, bản mới đứng chờ — đây chính là lý do người dùng vẫn thấy bản cũ sau khi deploy.
- activate: khi tất cả tab dùng bản cũ đã đóng, bản mới kích hoạt. Đây là chỗ xoá cache cũ.
js
self.addEventListener('install', (e) => {
self.skipWaiting() // tiếp quản luôn, không chờ tab cũ đóng
})
self.addEventListener('activate', (e) => {
e.waitUntil(clients.claim()) // kiểm soát cả trang đang mở sẵn
})Điểm cần nói rõ khi phỏng vấn: skipWaiting() + clients.claim() giúp cập nhật ngay, nhưng đổi lại trang đang mở có thể bị phục vụ trộn asset cũ và mới. Cách an toàn hơn là phát hiện worker mới rồi hiện thông báo "Có bản cập nhật — tải lại" để người dùng tự reload.
Hai ràng buộc khác: service worker chỉ chạy trên HTTPS (trừ localhost), và scope giới hạn theo đường dẫn của file script — đặt ở /sw.js mới điều khiển được toàn site.