当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScriptServiceWorkers入门指南

JavaScriptServiceWorkers入门指南

2026-02-02 12:00:39 0浏览收藏

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript Service Workers 是一种在浏览器后台运行的脚本，用于管理网络请求和缓存资源，从而实现应用的离线功能。它们通过拦截网络请求，使用预缓存的资源来响应用户，即使在没有网络连接的情况下也能提供基本功能。》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

Service Worker 是运行在浏览器后台、独立于主线程的 JavaScript 脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作 DOM），也不是服务器端 Node.js 服务。

什么是javascript的service workers_它们如何实现离线功能

Service Worker 是一段运行在浏览器后台的 JavaScript 脚本，独立于网页主线程，能拦截和处理网络请求、管理缓存、推送通知，并实现真正的离线体验。

Service Worker 是什么？不是什么？

它不是普通页面脚本，不能直接操作 DOM；也不是 Node.js 服务，不运行在服务器上。它是一个受控的、事件驱动的代理层，生命周期由浏览器管理——注册后需等待安装（install）、激活（activate），之后才能监听 fetch 事件。

必须通过 HTTPS（localhost 除外）才能注册，否则 navigator.serviceWorker.register() 会静默失败
作用域默认为注册脚本所在路径，想控制整个站点？注册时传入 {scope: '/'}
每次页面加载不会重新执行 SW 全局代码，而是复用已激活的实例——所以 console.log 在 SW 文件里可能只出现一次

如何用 fetch + Cache API 实现离线访问

核心逻辑是：在 install 阶段预缓存关键资源，在 fetch 阶段优先从缓存读取，回退到网络。不是“一键离线”，而是你明确决定哪些资源可离线使用。

cache.addAll() 只接受 URL 字符串数组，不支持 glob 或正则；路径必须精确匹配后续 fetch 请求的 request.url
缓存名建议带版本号（如 'static-v1'），避免旧缓存污染；升级 SW 时，旧缓存不会自动删除，得在 activate 里手动清理
对 HTML 文件，通常不建议全量缓存（因内容易变），更稳妥的做法是用 Stale-While-Revalidate 策略：先返回缓存，再后台更新

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js'
      ])
    )
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response =>
      response || fetch(event.request)
    )
  );
});

常见离线失败原因

用户点开页面显示 “You are offline” 并不等于 Service Worker 没生效——很可能只是缓存没命中或策略写错了。

打开 DevTools → Application → Service Workers，确认状态是 activated and is running；若显示 waiting，说明有新版本未激活，可点击 Skip Waiting
检查 caches.keys() 是否真有缓存项（在 Console 里执行）；如果 caches.match() 返回 undefined，八成是 URL 不一致（比如带了 query 参数、大小写差异、末尾斜杠缺失）
导航请求（即地址栏输入或链接跳转）默认触发 fetch 事件，但某些资源（如的 src）也可能被拦截——别忘了处理 404 场景，否则离线时图片直接挂掉