构建用于缓存的动态 PWA 的最佳方法

如何解决构建用于缓存的动态 PWA 的最佳方法

我构建了一个在单个页面中动态加载的 PWA。由于 Service Worker 仅在（重新）加载页面时运行，因此不会缓存响应。关于如何解决这个问题的任何想法？

我的代码如下所示：

loadPinpad('pincode');
// button listeners here
socket.emit('authenticate',enterCode);
socket.on('unauthenticated',() => loadPinpad('pincode'));
document.getElementById("stats").addEventListener('click',function(e) {
  loadChart('app');
  sidenav.close();
  e.stopImmediatePropagation(); // prevent sidenav behavIoUr
});

到目前为止，一个可能的（不优雅的）解决方案是将动态部分作为 iframe 加载。这样页面将加载并由我的服务工作者缓存。这不是一个理想的解决方案。有什么想法吗？

服务工作者

我的工作人员动态缓存除某些文件（例如 socket.io 轮询 URL）之外的所有请求，并通过将空响应传递给 waitUntil 来抑制错误。这是我的获取拦截：

self.addEventListener('fetch',(event) => {
  event.respondWith((async () => {
    // Exclude socket.io polling requests
    const excludeCachePatterns = [self.location.origin+'/socket.io'];
    var exclude = excludeCachePatterns.some((resource) => {
      return (event.request.url.indexOf(resource) !== -1);
    });
    if (exclude) { // Resource prohibited. Returning empty response
      console.log('Skipping '+event.request.url)
      return new Response(null,{ "status" : 200,"response" : "" });
    }
  
    // opening cache
    const cache = await caches.open(cacheName);
    
    // Using cached resource
    const cached = await cache.match(event.request);
    if(cached) {
      console.log('From cache: '+event.request.url);
      return cached;
    }
    
    // Not in cache,fetching resource
    const networkResponse = await fetch(event.request)
    .catch(() => { // We're offline. Returning empty response
      console.log('Caching Failed: '+event.request.url);
      return new Response(null,"response" : "" });
    })
    
    // Add to cache
    await cache.put(event.request.url,networkResponse.clone());
    console.log('Cached: '+event.request.url);
    return networkResponse;
  })());
});