service-worker - Service Worker：如何缓存远程 Web 服务的调用，以便当我再次调用它时，它将从缓存中加载以使我的网站加载更快？

Question

如何缓存远程 Web 服务的调用，以便当我再次调用它时，它将从缓存中加载？

const CACHE_NAME = "v1";
const cacheAssests = [
  "https://127.0.0.1:7008/ADAASecureapi/rest/v0/strgLookupEntities?limit=10000&onlyData=true&fields=EntId",
  "https://127.0.0.1:7008/ADAASecureapi/rest/v0/userAccessMap?onlyData=true&limit=10000",
];
self.addEventListener("install", (e) => {
  console.log("Serice Worker is Installed");
  e.waitUntil(
    caches
      .open(CACHE_NAME)
      .then((cache) => {
        cache.addAll(cacheAssests);
      })
      .then(() => self.skipWaiting())
  );
});

self.addEventListener("activate", () => {
  console.log("Serice Worker is activated");

  caches.keys().then((cachNames) => {
    return Promise.all(
      cachNames.map((cname) => {
        if (cname !== CACHE_NAME) {
          return caches.delete(cname);
        }
      })
    );
  });
});

self.addEventListener("fetch", (e) => {
  console.log("Servivce Worker is Fetching...");
  e.respondWith(
    fetch(e.request).catch(() => {
      console.log("Now Fetching from CACHE");
      return caches.match(e.request);
    })
  );
});

这是我上面的代码，我使用 install 、 activate 和 fetch 事件侦听器来缓存我的网站

标签： service-worker