Sự khác biệt giữa sự kiện fetch trong Service Worker và việc gọi mạng trực tiếp là gì và làm thế nào để intercept một request để trả về dữ liệu từ Cache?

Question

Accepted Answer

Bản chất vấn đề
Sự kiện fetch hoạt động như một proxy mạng nằm giữa ứng dụng web và internet. Mọi yêu cầu tài nguyên (HTTP requests) từ trang web đều đi qua sự kiện này. Lập trình viên có thể kiểm soát hoàn toàn việc có nên gọi mạng hay lấy dữ liệu từ Cache Storage.
Giải pháp kỹ thuật
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cachedResponse) => {
        // Nếu tìm thấy trong cache, trả về ngay lập tức
        if (cachedResponse) {
          return cachedResponse;
        }
        // Nếu không có trong cache, tiếp tục gọi mạng
        return fetch(event.request).then((networkResponse) => {
          // Kiểm tra xem response có hợp lệ hay không trước khi cache động
          if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
            return networkResponse;
          }

// Clone response vì stream chỉ đọc được một lần
          const responseToCache = networkResponse.clone();

caches.open('dynamic-cache-v1')
            .then((cache) => {
              cache.put(event.request, responseToCache);
            });

return networkResponse;
        });
      })
  );
});
Lưu ý kinh nghiệm thực chiến

Đối tượng Response trong JavaScript là một Stream chỉ có thể đọc được một lần duy nhất (body used). Do đó, khi muốn đưa response vào cache đồng thời trả về cho trình duyệt, bắt buộc phải dùng phương thức .clone().
Cần cẩn trọng khi intercept các yêu cầu API bên thứ ba (như Google Analytics hoặc Firebase) để tránh lưu trữ nhầm các dữ liệu không cần thiết.

Sự khác biệt giữa sự kiện fetch trong Service Worker và việc gọi mạng trực tiếp là gì và làm thế nào để intercept một request để trả về dữ liệu từ Cache?

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ủ đề