NavigationPreloadManager的header值作用是什么？setHeaderValue用途说明

头值基础作用 #

导航预加载是Service Worker用来优化页面加载速度的能力，会在Service Worker启动的同时并行发起导航请求，这个预加载请求默认会携带Service-Worker-Navigation-Preload请求头：

• 服务端可以通过这个头识别当前请求是来自Service Worker的预加载请求，和普通用户发起的导航请求做区分，返回适配的响应内容
• 比如可以返回专门适配Service Worker缓存格式的资源，或者跳过普通请求需要执行的用户身份校验、埋点上报等非必要逻辑，降低服务端开销

为什么要调用setHeaderValue #

默认情况下这个头的值为true，调用setHeaderValue自定义值的核心作用是实现更细粒度的预加载逻辑控制，常见使用场景包括：

• 区分不同版本的Service Worker：当你的站点上线了多版本SW时，可以将头值设为当前SW的版本号，服务端可以根据版本号返回对应适配的响应，避免旧版本SW拿到不兼容的新内容，出现缓存异常
• 区分不同业务场景的预加载请求：如果你的站点对不同页面、不同用户群体设置了不同的预加载策略，可以自定义头值标记请求场景，服务端可以针对性返回对应场景的精简内容，进一步提升加载速度
• 适配服务端/CDN缓存规则：如果你的服务端或CDN会将该头的值作为缓存Key的一部分，自定义值可以实现预加载响应的粒度化缓存，避免不同业务场景的预加载响应互相覆盖，提升缓存命中率

对应代码说明 #

你提供的代码就是自定义头值的标准实现，newValue参数为你要设置的自定义头值，设置完成后所有后续的导航预加载请求都会携带你定义的该值：

navigator.serviceWorker.ready.then(registration => {
  return registration.navigationPreload.setHeaderValue(newValue);
}).then(() => {
  console.log('Done!');
});

内容的提问来源于stack exchange，提问作者a.gulcan