PWA - 如何从 API 端点获取数据并将其缓存在 service-worker 中？

Question

我正在使用 service-worker.js 文件尝试从渐进式 Web 应用程序的 API 端点缓存 JSON 数据。

这会在缓存中创建一个天气文件，但内容是我的 HTML 页面。如果我 console.log(data)，我会看到我需要的对象。

我尝试过cache.add(JSON.stringify(data))和cache.addAll(data)但无济于事。

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('weather')
      .then(function(cache) {
        fetch('/api/weathercurrent')
          .then(function(response) {
            return response.json();
          })
          .then(function(data) {
            cache.add(data);
          })
      })   
  )
});

Answer 1

解决方案比我想象的更简单。我想因为数据是 JSON，所以我需要使用请求和响应处理程序。

event.waitUntil(
  caches.open('weathercurrent')
    .then(cache => cache.add('/api/weathercurrent'))
);

Answer 2

几个小时后，这是最简单的方法：

  self.addEventListener("fetch", event => {  
  event.respondWith(caches.match(event.request)  
  .then(cachedResponse => {        
    if (cachedResponse !== undefined) {
      return cachedResponse;
    } else {
      return fetch(event.request)
          .then((response) => {
            let responseClone = response.clone();
            caches.open("extraData").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(err => console.log(err));
        }
  })
  .catch(err => console.log(err))
  )
})