Javascript 如何在React中脱机显示和获取数据

我有一个PWA，我已经缓存了静态文件。但我有表格（调查和申请表格），我需要离线显示，用户可以在离线时输入数据，然后在用户恢复在线时将数据发送到服务器，我如何才能做到这一点？。我的一些静态缓存代码：

const cacheName = 'site-cache-v1';
const formCache = 'site-dynamic-cache-v1';

const urlsToCache = [
  '/',
  '/index.html  ',
  '/static/css/3.80fbce78.chunk.css ',
  '/static/css/4.3f2b4d32.chunk.css ',
  '/static/js/0.41f49890.chunk.js',
  '/static/js/10.7bd027a4.chunk.js',
  '/static/js/11.b223e049.chunk.js',
  '/static/js/12.e94b28f7.chunk.js',
  '/static/js/3.8aca5e2c.chunk.js',
  '/static/js/4.f811487f.chunk.js',
  '/static/js/5.0ee780dc.chunk.js',
  '/static/js/6.e28bc305.chunk.js',
  '/static/js/7.698a37cc.chunk.js',
  '/static/js/8.89224f2e.chunk.js',
  '/static/js/9.a4ec7686.chunk.js',
  '/static/js/main.09457d23.chunk.js',
  '/static/js/runtime~main.0a8cd6c2.js',
  '/static/media/DefaultInsightsIcon.832aa63f.png',
  '/static/media/login-bg.06aad2e4.jpg',
  '/static/media/nl-logo.10d14cfb.jpg',
  '/static/media/nl-new-logo.b4f0a2da.jpg',
];
console.log(urlsToCache);

self.addEventListener('install', event => {
  console.log('Installing…');
  // OPTION: self.skipWaiting() instead of event.waitUntil()
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => {
        // Precaching was successful so service worker is installed.
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      }, error => {
        // Precaching failed so service worker is not installed. 
        console.error(`Service Worker installation failed: ${error}`);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
      caches.match(event.request)
          .then(cacheRes => {
            return cacheRes || fetch(event.request).then(fetchRes => {
              return caches.open(formCache).then(cache => {
                cache.put(event.request.url, fetchRes.clone());
                return fetchRes;
              })
            })
          })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then((keyList) => {
      return Promise.all(keyList.map((key) => {
        // Same cacheName that we defined before.
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
});

---

您可能希望使用的API是。这篇文章包括一些“普通的”JavaScript代码片段和一个示例应用程序

然而，在撰写本文时，背景同步仅在Chrome中有效

如果您想要一个跨多个浏览器的解决方案，这是一个选项。在支持后台同步的浏览器上（将使用后台同步），而在不支持后台同步的浏览器上，它将尝试通过在每次服务工作者启动时自动重试排队的请求来复制该行为

---

该库可以位于不使用该库其他部分的服务人员的内部。（或者您也可以使用Workbox的其他部分，具体取决于您。）

您是否为您的PWA应用程序实现了

IndexedDB

？如果没有，您应该尝试探索它。您的

缓存

结构在用户会话期间保持不变-当页面重新加载时，它被遗忘。因此，缓存“css”、“js”和“png”是没有意义的——这是web浏览器的任务，而不是应用程序的任务。如果要在表单中缓存用户数据，则应考虑indexedDB或localStorage。