Cache

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  font: `font-cache-v${CACHE_VERSION}`,
};

self.addEventListener("activate", (event) => {
  // Xóa mọi bộ nhớ đệm không có tên trong CURRENT_CACHES.
  // Dù ví dụ này chỉ có một bộ nhớ đệm, logic tương tự
  // sẽ xử lý trường hợp có nhiều bộ nhớ đệm được phiên bản hóa.
  const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!expectedCacheNamesSet.has(cacheName)) {
            // Nếu tên bộ nhớ đệm này không có trong tập hợp
            // tên bộ nhớ đệm "dự kiến", thì xóa nó.
            console.log("Deleting out of date cache:", cacheName);
            return caches.delete(cacheName);
          }
          return undefined;
        }),
      ),
    ),
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches
      .open(CURRENT_CACHES.font)
      .then((cache) => cache.match(event.request))
      .then((response) => {
        if (response) {
          // Nếu có một mục trong bộ nhớ đệm cho event.request,
          // thì response sẽ được định nghĩa và ta có thể trả về nó.
          // Lưu ý trong ví dụ này chỉ các tài nguyên phông chữ được lưu đệm.
          console.log(" Found response in cache:", response);

          return response;
        }

        // Ngược lại, nếu không có mục nào trong bộ nhớ đệm cho event.request,
        // response sẽ là undefined, và ta cần fetch() tài nguyên.
        console.log(
          " No response for %s found in cache. About to fetch " +
            "from network…",
          event.request.url,
        );

        // Ta gọi .clone() trên request vì có thể dùng nó
        // trong lời gọi cache.put() sau này.
        // Cả fetch() và cache.put() đều "tiêu thụ" request,
        // nên ta cần tạo một bản sao.
        // (xem https://mdn.go-mizu.dev/vi/docs/Web/API/Request/clone)
        return fetch(event.request.clone()).then((response) => {
          console.log(
            "  Response for %s from network is: %O",
            event.request.url,
            response,
          );

          if (
            response.status < 400 &&
            response.headers.has("content-type") &&
            response.headers.get("content-type").match(/^font\//i)
          ) {
            // Tránh lưu đệm các phản hồi mà ta biết là lỗi
            // (tức mã trạng thái HTTP 4xx hoặc 5xx).
            // Ta cũng chỉ muốn lưu đệm các phản hồi tương ứng
            // với phông chữ, tức có tiêu đề phản hồi Content-Type
            // bắt đầu bằng "font/".
            // Lưu ý rằng với các phản hồi đã lọc opaque
            // https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
            // ta không thể truy cập tiêu đề phản hồi, nên bước kiểm tra này sẽ
            // luôn thất bại và phông chữ sẽ không được lưu đệm.
            // Tất cả Google Web Fonts được phục vụ từ tên miền hỗ trợ CORS,
            // nên đây không phải vấn đề ở đây.
            // Đây là điều cần lưu tâm nếu bạn định
            // lưu đệm tài nguyên khác từ tên miền cross-origin
            // không hỗ trợ CORS!
            console.log("  Caching the response to", event.request.url);
            // Ta gọi .clone() trên phản hồi để lưu một bản sao
            // vào bộ nhớ đệm. Bằng cách này, ta giữ được đối tượng
            // phản hồi gốc để trả về cho trang được kiểm soát.
            // https://mdn.go-mizu.dev/vi/docs/Web/API/Request/clone
            cache.put(event.request, response.clone());
          } else {
            console.log("  Not caching the response to", event.request.url);
          }

          // Trả về đối tượng phản hồi gốc, sẽ được dùng để
          // đáp ứng yêu cầu tài nguyên.
          return response;
        });
      })
      .catch((error) => {
        // catch() này sẽ xử lý ngoại lệ phát sinh từ thao tác match()
        // hoặc fetch().
        // Lưu ý rằng một phản hồi lỗi HTTP (ví dụ 404) sẽ KHÔNG kích hoạt
        // ngoại lệ.
        // Nó sẽ trả về một đối tượng phản hồi bình thường có mã lỗi phù hợp.
        console.error("  Error in fetch handler:", error);

        throw error;
      }),
  );
});