时间戳

首页 > 解决方案 > 如何使用 workbox-build generateSW 为缓存添加过期时间？

javascript - 如何使用 workbox-build generateSW 为缓存添加过期时间？

问题描述

我使用 workbox generateSW 方法来生成服务工作者，这是我使用的配置：

const workbox = require("workbox-build");

workbox.generateSW({
  globDirectory: "./",
  globIgnores: ["node_modules/**", "**/generator.js", "**/sw.js"],
  globPatterns: ["**/*.{css,js}"],
  swDest: "./sw.js",
  sourcemap: false,
  cleanupOutdatedCaches: true,
  clientsClaim: true,
  runtimeCaching: [
    {
      urlPattern: /\.(?:html|htm|xml)$/,
      handler: "StaleWhileRevalidate",
      options: {
        cacheName: "runtimecaching name",
        expiration: {
          maxAgeSeconds: 1,
        },
      },
    },
  ],
});

我在文档中找不到删除旧缓存的过期时间，那么如何在一段时间后使用 workbox-build generateSW 清理缓存？

标签： javascriptservice-workerworkboxservice-worker-config

解决方案

maxAgeSeconds并不是要在一段时间后自动清理旧条目。从文档中：

该插件将在每次请求或缓存更新后检查并删除条目。

需要注意的一件事：

  • 因为打开 IndexedDB 很慢，所以直到请求被使用后才会过期。这意味着过期的请求可能会被使用一次，但之后就会过期。
  • 为了缓解这种情况，插件将检查缓存响应的“日期”标头，如果存在并且可以解析日期，它将基于此过期，因为它不需要 IndexedDB 查找。

maxAgeSeconds在缓存请求过时之前控制时间的选项也是如此，并且旧条目删除是由请求触发的。

要在任何请求后检查并删除旧条目，请使用maxEntries选项：

使用缓存响应或将新请求添加到缓存后，插件将查看配置的缓存并确保缓存条目的数量不超过限制。如果是这样，最旧的条目将被删除。

如果您仍然需要在任何请求后根据时间而不是条目数进行清理，则需要创建自己的插件ExpirationPlugin并更好地使用注入清单模式。

推荐阅读