如何将API中的数据缓存到React PWA中的cache Storage？

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        return response; // 如果缓存中存在数据，则直接返回缓存的响应
      }
      return fetch(event.request).then(response => {
        if (response && response.status === 200) {
          const clonedResponse = response.clone();
          caches.open('api-cache').then(cache => {
            cache.put(event.request, clonedResponse); // 将响应数据存储到Cache Storage中
          });
        }
        return response;
      });
    })
  );
});

class MyComponent extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    if ('caches' in window) {
      caches.open('api-cache').then(cache => {
        cache.match(apiUrl).then(response => {
          if (response) {
            response.json().then(data => {
              this.setState({ data }); // 将缓存的数据设置到组件的state中
            });
          }
        });
      });
    }
  }

  render() {
    // 使用this.state.data渲染UI
    return (
      <div>
        {this.state.data ? (
          <p>{this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}