如何使用服务人员缓存 React 应用程序

Question

我只是想知道如何处理这个问题。我想缓存我的整个应用程序。 我尝试过类似的方法，但似乎不起作用

self.addEventListener('install',(e)=>{
  console.log('installed');

})

self.addEventListener('activate',(e)=>{
  console.log('activated');
  self.skipWaiting();
})

self.addEventListener('fetch',(e)=>{
  e.respondWith(
    fetch(e.request)
      .then(res=>{
        const resClone = res.clone();
        caches.open(cacheName).then(cache=>{
          cache.put(e.request, resClone);
        })
        return res;

      }).catch(err => {
        console.log('no connection');
        caches.match(e.request).then(res => { return res })
      })
  )
})

有谁知道如何解决这个问题？

Answer 1

一种幼稚的方法是查看页面源并检查 react 正在使用哪些 js、css 文件并手动缓存它们。

这在生产中不起作用，您必须手动检查构建目录中的文件并更新 service-worker

或者更好和更明智的做法是使用workbox（来自谷歌的一个 npm 包）来处理所有这些混乱

Answer 2

这对我有用，

self.addEventListener("fetch", function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request)
          .then(function(res) {
            return caches.open(CACHE_NAME).then(function(cache) {
              cache.put(event.request.url, res.clone());
              return res;
            });
          })
         
      }
    })
  );
});

这告诉服务工作者首先从缓存中读取，然后如果没有来自缓存的响应则网络。 要记住一件事，这不会检查对文件所做的任何更新。如果您更改您的反应代码，服务工作者将加载它在缓存中的先前文件。

要解决这个问题，您可以使用工作箱的 staleWhileRevalidate，只要有网络连接，它就会更新缓存。

一个不太方便的解决方案是在服务工作者激活时删除缓存：

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys()
    .then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        return caches.delete(key);

      }));
    })
  );
  return self.clients.claim();
});

每当安装新的 service worker 时，缓存都会被移除并创建一个新的。