在 React js 中的 service worker 中缓存图像progressive-web-app

【问题标题】：cache images in service worker in react js progressive-web-app在 React js 中的 service worker 中缓存图像progressive-web-app
【发布时间】：2021-05-04 08:30:39
【问题描述】：

我正在使用 react.js 库实现一个渐进式 Web 应用程序，我想自定义服务工作者并将资产图像缓存在服务工作者中。怎么会这样？

【问题讨论】：

标签： reactjs caching progressive-web-apps service-worker

【解决方案1】：

const cacheName = "site-static-v1";

const assets = [
  "/",
  // all files you want to cache
];

// install event
self.addEventListener("install", (evt) => {
  evt.waitUntil(
    caches.open(cacheName).then((cache) => {
      cache.addAll(assets);
    })
  );
});

// activate event
self.addEventListener("activate", (evt) => {
  evt.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.filter((key) => key !== cacheName).map((key) => caches.delete(key))
      );
    })
  );
});

// fetch event
self.addEventListener("fetch", (evt) => {
  evt.respondWith(
    caches
      .match(evt.request)
      .then(
        (cacheRes) =>
          cacheRes || fetch(evt.request).then((fetchRes) => fetchRes)
      )
  );
});

【讨论】：