service-worker - 如何在使用 Service Worker 时缓存 Google map 等 API

Question

尝试在 Service Workers 中缓存 Google Maps API 响应。

源代码:https://github.com/boopathi/sw-demo-iss/blob/gh-pages/sw.js

现在我正在使用 Maps API 请求的所有 URL，但这似乎是一种糟糕的方式，而且我无法缓存所有内容，我可以缓存某种类型的请求并响应同类型。

说，

GET maps.googleapi.com/js?param1=value1
#and
GET maps.googleapi.com/js?param2=value2&param3=value3

是否可以将其缓存为 'maps.googleapi.com/js' 并在获取时注入(inject)最后使用的参数？

Answer 1

您可以在 fetch 中包含逻辑检查 event.request.url 的处理程序并采取任何您想返回的任意操作 Response从缓存中，甚至创建一个新的 Response即时。

类似的东西:

self.addEventListener('fetch', function(event) {
  if (event.request.url.indexOf('https://maps.googleapi.com/js') == 0) {
    event.respondWith(
      // Handle Maps API requests in a generic fashion,
      // by returning a Promise that resolves to a Response.
    );
  } else {
    event.respondWith(
      // Some default handling.
    );
  }
}