如何配置 Polymer 的 platinum-sw-* 不缓存一个 URL 路径？

Question

我如何配置 Polymer 的 platinum-sw-cache 或 platinum-sw-fetch 以缓存除 /_api 之外的所有 URL 路径，这是 Hoodie API 的 URL ？我已经配置了一个 platinum-sw-fetch 元素来处理 /_api 路径，然后 platinum-sw-cache 来处理其余路径，如下所示：

<platinum-sw-register auto-register
                      clients-claim
                      skip-waiting
                      on-service-worker-installed="displayInstalledToast">
  <platinum-sw-import-script href="custom-fetch-handler.js"></platinum-sw-import-script>
  <platinum-sw-fetch handler="HoodieAPIFetchHandler"
                 path="/_api(.*)"></platinum-sw-fetch>
  <platinum-sw-cache default-cache-strategy="networkFirst"
                     precache-file="precache.json"/>
  </platinum-sw-cache>
</platinum-sw-register>

custom-fetch-handler.js 包含以下内容。它的目的只是 return 请求的结果，就像浏览器在 service worker 没有处理请求时的方式一样。

var HoodieAPIFetchHandler = function(request, values, options){
  return fetch(request);
}

似乎无法正常工作的是，在用户 1 登录后，然后注销，然后用户 2 登录，然后在 Chrome Dev Tools 的网络选项卡中我可以看到 Hoodie定期继续向两个用户的 API 端点发出请求，如下所示：

http://localhost:3000/_api/?hoodieId=uw9rl3p
http://localhost:3000/_api/?hoodieId=noaothq

相反，它应该只向这些 API 端点之一发出请求。在“网络”选项卡中，每个 URL 连续出现两次，在 "Size" 列中，第一个请求表示“（来自 ServiceWorker）”，第二个请求以字节为单位表示响应大小，以防相关。

另一个似乎相关的问题是，当我以用户 2 身份登录并提交表单时，应用程序会在服务器端写入用户 1 的数据库。这让我认为问题是由于应用程序无法绕过 /_api 路由的缓存。

我不应该在一个 platinum-sw-register 元素中同时使用 platinum-sw-cache 和 platinum-sw-fetch，因为文档说明它们可以相互替代吗？

Answer 1

总的来说，您正在做的事情应该有效，而且这是一种合法的方法。

如果发出的 HTTP 请求与 <platinum-sw-fetch> 中定义的路径相匹配，则将使用该自定义处理程序，而默认处理程序（在本例中为 networkFirst 实现）不会' t运行。 HTTP 请求只能响应一次，因此不可能有多个处理程序生效。

我运行一些本地示例并确认我的 <platinum-sw-fetch> 处理程序正确拦截了请求。在本地调试时，在您的自定义处理程序中添加 console.log() 并通过 chrome://serviceworker-internals Inspect 界面检查这些日志，或者使用相同的界面在您的处理程序中设置一些断点是很有用的。

您在受控页面的“网络”选项卡中看到的是预期的 — 服务人员的网络交互记录在那里，无论它们来自您的自定义 HoodieAPIFetchHandler 还是默认的 networkFirst 处理程序.从受控页面的角度来看，网络交互也被记录下来——它们并不总是与 service worker 的 activity 一对一对应，因此有时记录两者确实派上用场。

因此，我建议您更深入地了解您的应用程序发出多个请求的原因。考虑缓存个性化资源总是很棘手，如果您最终缓存的是为不同用户个性化的资源，则有几种方法可能会遇到麻烦。查看触发第二个 /_api/ 请求的代码行，看看它是否来自需要在用户注销时清除的缓存资源。 <platinum-sw> 在您的自定义处理程序脚本中直接使用 sw-toolbox library under the hood, and you can make use of its uncache() method 来执行缓存维护。

如何配置 Polymer 的 platinum-sw-* 不缓存一个 URL 路径？

How can I configure Polymer's platinum-sw-* to NOT cache one URL path?

polymer

service-worker

hoodie