service-worker - 如何使用 Workbox 实施“先缓存后网络”策略

Question

我正在尝试使用 Workbox 实施“缓存然后网络”策略。

我已将 Workbox 设置为使用staleWhileRevalidateruntimeCaching 处理程序，但我不确定如何最好地更新页面一次/如果我们从网络更新缓存。

文档说：

除了更新适当的缓存之外，它还将触发底层 RequestWrapper 中定义的任何适当的插件。

那会有用吗？是否有任何使用 Workbox 完成此策略的示例（顺便说一下，这是一个很棒的工具，所以感谢它的维护者）？

Answer 1

在https://workbox-samples.glitch.me/examples/workbox-broadcast-cache-update/BroadcastCacheUpdate有一个以“独立”方式使用该功能的示例

要通过 WorkboxSW 的路由使用它staleWhileValidate，您可以执行以下操作：

workboxSW.router.registerRoute(
  new RegExp('/some/path/prefix'),
  workboxSW.strategies.staleWhileRevalidate({
    cacheName: 'my-cache',
    broadcastUpdate: {
      channelName: 'my-update-channel'
    },
  })
);

您可以在docs中查看完整示例。