Làm thế nào để xử lý việc lưu trữ các tệp tin tĩnh (static assets) trong sự kiện install của Service Worker một cách hiệu quả và tránh tình trạng treo tiến trình khi có một tệp bị lỗi?

Question

Accepted Answer

Bản chất vấn đề
Khi Service Worker cài đặt (sự kiện install), chúng ta thường dùng Cache Storage API để lưu trữ các tài nguyên tĩnh như HTML, CSS, JS, hình ảnh. Nếu một trong các tệp tin này không tồn tại hoặc đường dẫn sai, toàn bộ quá trình cài đặt Service Worker sẽ thất bại, dẫn đến PWA không thể hoạt động ngoại tuyến.
Giải pháp kỹ thuật
Sử dụng phương thức cache.addAll() sẽ trả về lỗi reject nếu có bất kỳ tệp nào không tải được. Để an toàn hơn trong môi trường Enterprise, ta nên sử dụng vòng lặp kết hợp với cache.add() cho từng tệp hoặc dùng Promise.allSettled để xử lý:
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Đang mở cache và lưu trữ tài nguyên tĩnh');
        // Sử dụng Promise.all để thêm từng tệp một cách an toàn
        return Promise.all(
          urlsToCache.map(url => {
            return cache.add(url).catch(error => {
              console.error('Không thể cache tệp: ', url, error);
            });
          })
        );
      })
      .then(() => {
        // Buộc Service Worker kích hoạt ngay lập tức sau khi cài đặt xong
        return self.skipWaiting();
      })
  );
});
Lưu ý kinh nghiệm thực chiến

Luôn sử dụng self.skipWaiting() kết hợp với clients.claim() để Service Worker mới có quyền kiểm soát các client ngay lập tức mà không cần đợi người dùng khởi động lại trình duyệt.
Cần đặt tên phiên bản cache rõ ràng (ví dụ: v1, v2) để dễ dàng xóa bỏ cache cũ trong sự kiện activate.

Làm thế nào để xử lý việc lưu trữ các tệp tin tĩnh (static assets) trong sự kiện install của Service Worker một cách hiệu quả và tránh tình trạng treo tiến trình khi có một tệp bị lỗi?

Bản chất vấn đề

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi pwa liên quan cùng chủ đề