Question

尝试在服务工作者中缓存Google Maps API响应。

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

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

说，

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

修改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 Maps这样的API

2 个答案: