登录
首页 >  文章 >  前端

JavaScriptServiceWorkers入门指南

时间:2026-02-02 12:00:39 369浏览 收藏

积累知识,胜过积蓄金银!毕竟在文章开发的过程中,会遇到各种各样的问题,往往都是一些细节知识点还没有掌握好而导致的,因此基础知识点的积累是很重要的。下面本文《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 场景,否则离线时图片直接挂掉

它不能解决所有离线问题

Service Worker 本身不存储结构化数据,也不持久保存用户生成内容。需要本地数据库?得配合 IndexedDB;要同步表单草稿?得自己设计冲突解决逻辑;想让 PWA 安装后首次启动就离线可用?注册时机必须早于任何资源加载(通常放在 最顶部)。

最常被忽略的一点:缓存策略和激活时机强耦合。一个没处理好 activate 清理逻辑的 SW,可能让新旧缓存并存数月,导致用户始终看不到更新——这不是 bug,是你没写清楚“换代规则”。

今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>