Javascript 如何在动态网页中进行抓取

所以

我正在开发一个PWA，但是我正在开发一个动态应用程序（一页）。这意味着，当我尝试与我的服务人员一起执行addEventListener（获取）时，没有任何结果。我尝试手动获取，如获取本地主机等。。。它运行良好，但我无法访问fetch.request！因此，如果我无法通过获取访问缓存的数据，我真的不知道如何对我的应用程序执行脱机部分

以下是我已经尝试过的，但它没有收到任何回迁事件：

this.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).catch(function() {
      return fetch(event.request).then(function(response) {
        return caches.open('v2').then(function(cache) {
          cache.put(event.request, response.clone());
          return response;
        });
      });
    })
  );
});

---

有什么想法吗？

如果您想在

fetch

处理程序中遵循应用程序外壳/单页应用程序路由模型，最好的方法是检查

event.request.mode===='navigate'

在

fetch

处理程序内部。如果是，这意味着用户已经导航到某个URL，并且您可能已经缓存了一个“一刀切”的URL

shell.html

，可以用来满足该导航请求

this.addEventListener('fetch', function(event) {
  if (event.request.mode === 'navigate') {
    // This assumes that shell.html was already cached,
    // e.g. as part of your `install` handler.
    event.respondWith(caches.match('shell.html'));
    return;
  }

  // Your other response/caching logic goes here.
});