如何在使用 Service Workers 时缓存 Google 地图等 API

Question

正在尝试在 Service Worker 中缓存 Google 地图 API 响应。

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

现在我正在使用地图 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 并采取任何您想要的任意操作 return 从缓存中获取 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

修改 ngsw-config.json 中的服务工作者配置以缓存来自 maps.googleapi.com 的资源：

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

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

如何在使用 Service Workers 时缓存 Google 地图等 API

How to cache APIs like Google Maps while using Service Workers

service-worker