Workbox service worker maxAgeSeconds 查询

Question

我已经为我的网站实现了一个 service worker。但是我不确定这个的过期设置。

我目前使用 Nextjs 进行页面渲染，使用 Workbox 和 Apollo 进行数据管理。我的工作箱配置：

// File to generate the service worker.
require("dotenv").config()
const workboxBuild = require("workbox-build")
const { COUNTRY: country, NODE_ENV } = process.env
const urlPattern = new RegExp(`/${country}\/static\/.*/`)

// https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW
const buildSW = () => {
  return workboxBuild.generateSW({
    swDest: "public/workbox-worker.js",
    clientsClaim: true,
    mode: NODE_ENV,
    skipWaiting: true,
    sourcemap: false,
    runtimeCaching: [
      {
        urlPattern: urlPattern,

        // Apply a cache-first strategy.
        handler: "CacheFirst",
        options: {
          cacheName: "Static files caching",
          expiration: {
            maxEntries: 50,
            maxAgeSeconds: 3600,
          },
        },
      },
    ],
  })
}

buildSW()

我的 Service Worker 已安装并激活，并已开始缓存文件。

我唯一的问题是这里的最大年龄不应该是 3600 岁吗？还是我做错了什么？

Answer 1

我认为你混淆了 Cache-Control HTTP header with the Workbox Expiration。

由于该服务可以回复请求，因此它可以 return 一个文件，而不考虑 Cache-Control header。您配置的是让 Workbox 在 50 或 3600 秒后从其缓存中逐出内容。 Service Worker 有自己的缓存，可以在 chrome dev tool

的应用程序选项卡中找到

查看此问题，了解两者如何相互作用 - If you are using Service Workers do you still need cache-control headers?

Workbox service worker maxAgeSeconds 查询

Workbox service worker maxAgeSeconds query

caching

cache-control

http-headers

service-worker

workbox