Javascript 如何使服务工作者从API缓存数据，并在需要时更新缓存

我将React应用程序转换为PWA，它的工作部分正常

我遵循了本教程：

然而，本文只展示了如何缓存静态数据，而且我还需要存储来自服务器的数据，我可以按照本文第一个答案的说明执行此操作：并在数据存储到数组

urlsToCache

的位置插入firebase地址，由应存储到缓存中的文件填充

不过，到目前为止还不错，在数据存储到缓存中之后，应用程序停止从服务器获取数据，并仅使用缓存中的数据加载页面，即使服务器已更新。这就是我需要解决的问题

简而言之，我需要从服务器获取数据，将其存储到缓存中，以便在应用程序脱机时使用它，并在每次到达服务器时更新缓存

我试图遵循此指南，但没有成功：

这是我的worker.js文件：

var CACHE_NAME = 'pwa-task-manager';
var urlsToCache = [
  '/',
  '/completed',
  '/index.html',
  '/static/js/main.chunk.js',
  '/static/js/0.chunk.js',
  '/static/js/1.chunk.js',
  '/static/js/bundle.js',
  '/calculadora',
  'https://calc-marmo.firebaseio.com/clientes.json',
  'https://calc-marmo.firebaseio.com/adm.json',
];

// Install a service worker
self.addEventListener('install', event => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// Cache and return requests
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

// Update a service worker
self.addEventListener('activate', event => {
  var cacheWhitelist = ['pwa-task-manager'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

---

任何帮助都将不胜感激。

这听起来像是你需要一个网络优先战略，这在烹饪书中没有提到。此策略类似于网络回退到缓存，但另外将响应始终存储在缓存中

说明：

---

代码示例（如果您不使用workbox）：

我一直在挖掘，我可以看到，我首先将透视图更改为网络，它在本地主机上工作得很好，但是在真实主机上，我只获取静态数据，Firebase的数据没有被缓存，可能问题是我如何配置它，我不知道。我也尝试了你发布的这个例子，但我遇到了同样的问题。作为一个选项，我将静态数据存储到缓存中，并使用

indexedDB

将动态数据存储到缓存中。如果你知道我为什么会遇到这个问题，我很想听听，因为在这种情况下，我宁愿使用缓存而不是IDB，如果没有，谢谢你的时间。Firebase的实时数据库使用WebSocket与客户端通信。据我所知，WebSocket在服务工作者中不受支持。因此，您必须将Firebase数据存储在IndexedDB中，如您所述。（我就是这样做的）