SEO 百科

Service Worker

本页目录

Service Worker

Service Worker 是一段脚本，它在页面之外运行，能拦截页面的请求并决定返回什么[1]。做 SEO 的人要了解它，因为它夹在访客、爬虫和服务器之间。缓存策略写错，爬虫可能拿到旧页面，访客可能打不开页面。

定义与作用

Service Worker 是一份 JavaScript 文件，注册在某个域名和路径下[1]。注册成功后，它能在后台拦截这个范围内的请求，按自己的逻辑返回响应，包括从缓存里取。

它不和页面脚本在一处运行。MDN 说明，Service Worker 在另一个线程上运行，无法访问 DOM，所以不会造成阻塞[1]。它也不能用同步的 XMLHttpRequest 和网页存储接口。

安全上还有一道门槛。Service Worker 只能由 HTTPS 承载，因为它能改写网络请求，走明文 HTTP 会带来中间人攻击的风险[1]。

约五分之一的网站用到了它。2025 Web Almanac 的统计显示，18.9% 的网站注册了 Service Worker[3]。

缓存策略

Service Worker 的生命周期分三步：下载、安装、激活[1]。安装阶段通常用来把离线要用的资源放进缓存。

它用 install 事件准备缓存，用 activate 事件清理旧缓存[1]。之后每个请求由 fetch 事件接住，用 respondWith 决定返回什么[1]。

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

这段代码先查缓存，查不到才回源。这种策略对静态资源合适，对 HTML 有风险。

返回旧页面给爬虫的风险

先查缓存的策略用在 HTML 上，问题就来了。缓存里的那份页面会一直返回，直到缓存被更新。访客和爬虫都可能拿到过期的正文。

更新缓存本身也要留意。Google 说明，Googlebot 会主动缓存内容以减少网络请求，网页渲染服务可能会忽略缓存标头，这可能让它使用过时的 JavaScript 或 CSS 资源[2]。规避的办法是内容指纹，把文件内容的摘要放进文件名，例如 main.2bb85551.js，内容一变文件名就变[2]。

所以 HTML 通常要换一套策略。常见做法是让页面走网络优先，取回新版本再更新缓存；静态资源才用缓存优先。

页面打不开的风险

Service Worker 拦截所有请求，它自己出错，页面就跟着出事。几种典型情况：

  • 注册脚本写错路径，作用域覆盖不到页面；
  • install 阶段缓存失败又没有处理，激活无法完成；
  • 缓存里存进了错误响应，之后一直把它返回；
  • 新版本激活时机处理不当，访客拿到半旧半新的资源。

出问题时，表现是页面白屏，或者资源加载失败。排查要在开发者工具的 Application 面板里看注册状态和缓存内容，必要时注销这个 Service Worker。

与抓取和收录的关系

Service Worker 改变的是响应从哪里来，不改变网址本身。收录看的是网址返回的内容，所以缓存策略会直接影响爬虫读到什么。

稳妥的做法有两条。一是别让 Service Worker 干预首屏 HTML，正文照常由服务器返回。二是更新页面时同步清理缓存，避免旧版本长期占位。

常见误用

  • 对 HTML 用缓存优先，站点更新后仍旧返回旧版。
  • 缓存全部请求，包括接口和错误响应。
  • 作用域写在子目录，覆盖不到全站页面。
  • 上线新版本不清理旧缓存。

附录

参见

参考资料

官方（境外）

  1. 《Service Worker API》，MDN Web 文档，2024-12-13 更新。
  2. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。

第三方

  1. 《PWA》，2025 Web Almanac，HTTP Archive，2026-01-16 发布。

外部链接

无。