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

Question

尝试在 Service Worker 中缓存 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'在获取注入最后使用的参数时缓存它？

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.
    );
  }
}

Answer 2

修改 service worker 配置ngsw-config.json以缓存以下资源maps.googleapi.com：

// ngsw-config.json
{
  "assetGroups": [
    "urls": [
      "https://maps.googleapis.com/js*"
    ]
  ]
  ...
}

参考：https ://angular.io/guide/service-worker-config#urls