如何在服务工作线程中缓存动态urls？这和precache有什么关系吗？我使用的是ReactJS默认serviceWorker

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      // 打开名为'my-cache'的缓存对象
      // 如果缓存对象不存在，会创建一个新的缓存
      return cache;
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('my-cache').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        // 查找缓存中是否已经存在对应的响应
        // 如果存在，则直接返回缓存的响应
        // 如果不存在，则发送网络请求，并将响应缓存起来
        return response || fetch(event.request).then(function(response) {
          cache.put(event.request, response.clone()); // 将响应放入缓存中
          return response;
        });
      });
    })
  );
});

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker 注册成功：', registration.scope);
    }, function(error) {
      console.log('ServiceWorker 注册失败：', error);
    });
  });
}