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ỗ xóa cache cũ.
js
self.addEventListener('install', (e) => {
self.skipWaiting() // take over without waiting for old tabs to close
})
self.addEventListener('activate', (e) => {
e.waitUntil(clients.claim()) // control already-open pages
})Đ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.