sw-fetch.js

self.addEventListener("fetch", (event) => {
  // hijacking path and return a mock HTML content
  if (event.request.url.includes("/faq")) {
    event.respondWith(
      new Response("<div>Mock FAQ Page</div>", {
        headers: { "Content-Type": "text/html" },
      })
    );
  }
  // hijacking API request and return mock response in JSON format
  if (event.request.url.includes("/api/users")) {
    const data = [
      {
        id: "0001",
        name: "andrew",
      },
    ];
    const blob = new Blob(
      [JSON.stringify(data, null, 2)],
      { type: "application/json" }
    );
    const init = { status: 200, statusText: "default mock response" };
    const defaultResponse = new Response(blob, init);
    event.respondWith(defaultResponse);
  }

  // Stale-while-revalidate:
  // return the cached version if it exists. At the same time,
  // send a request to get the latest version and update the cache
  const requestUrl = new URL(event.request.url);
  if (requestUrl.pathname.startsWith("/avatars/")) {
    const response = caches.open(CACHE_NAME).then((cache) => {
      return cache.match(event.request).then((response) => {
        const networkFetch = fetch(event.request)
          .then((networkResponse) => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });

        return response || networkFetch;
      });
    });
    
    event.respondWith(response);
    return;
  }
});