Service Worker 是否允许对静态资产简单地使用长到期时间 headers？

Question

假设我有一个服务工作者，它在激活时使用以下工作代码填充缓存：

async function install() {
    console.debug("SW: Installing ...");
    const cache = await caches.open(CACHE_VERSION);
    await cache.addAll(CACHE_ASSETS);
    console.log("SW: Installed");
}
async function handleInstall(event) {
    event.waitUntil(install());
}
self.addEventListener("install", handleInstall);

执行 cache.addAll() 时，浏览器会使用自己的内部缓存，还是会始终从站点下载内容？这很重要，因为它创建了一个新的 service worker 版本，并且有新的静态资产，旧版本可能被 service worker 缓存了。

如果没有，那么我想仍然需要做命名为 hashed/versioned 的静态资产。我希望服务人员能够使 none 适用。

Answer 1

cache.addAll() 的行为在 service worker 规范中有描述，但这里有一个更简洁的总结：

对于参数数组中的每一项，如果它是字符串而不是 Request，则使用该字符串作为输入构造一个新的 Request。
对每个请求执行 fetch() 并获得响应。
只要响应有一个ok status，调用cache.put()将响应添加到缓存中，使用请求作为键。

要回答您的问题，最相关的步骤是 1.，因为它决定了将哪种 Request 传递给 fetch()。如果你只是传入一个字符串，那么在隐式构造Request的时候就有了一个lot of defaults that will be used。如果您想更好地控制 fetch() 编辑的内容，那么您应该自己显式创建一个 Request 并将其传递给 cache.addAll() 而不是传递字符串。

例如，这就是您将所有请求的 cache mode 显式设置为 'reload' 的方式，它总是跳过浏览器的正常 HTTP 缓存并与网络进行响应：

// Define your list of URLs somewhere...
const URLS = ['/one.css', '/two.js', '/three.js', '...'];

// Later...
const requests = URLS.map((url) => new Request(url, {cache: 'reload'}));
await cache.addAll(requests);

Service Worker 是否允许对静态资产简单地使用长到期时间 headers？

Does a service worker allow one to simply use long expiration headers on static assets?

service-worker