如何使用 Service Worker 缓存 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

像一种幼稚的方法是查看页面源代码并检查什么 js，css 文件正在被 react 使用并手动缓存它们。

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

或者更好更明智的做法是使用 workbox（来自 google 的 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;
            });
          })
         
      }
    })
  );
});

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

要解决这个问题，您可以使用 workbox 的 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 时，都会删除缓存并创建新的缓存。

如何使用 Service Worker 缓存 React 应用

How to cache a React app with service workers

reactjs

service-worker

progressive-web-apps