javascript的Service Worker是什么_如何用它构建离线应用？

Service Worker 是运行在浏览器后台的独立脚本，可拦截请求、缓存资源、实现离线访问和消息推送，是 PWA 的核心；需 HTTPS（localhost 除外）、同源注册、无 DOM 访问权限，通过 postMessage 与页面通信。

Service Worker 是运行在浏览器后台的独立 JavaScript 脚本，它不绑定具体页面，能拦截网络请求、缓存资源、推送消息，并让网页实现真正的离线可用。它不是传统意义上的“Web Worker”，而是一个可编程的网络代理层，是构建 PWA（渐进式 Web 应用）的核心能力之一。

Service Worker 的关键特性

它有三个硬性前提：必须通过 HTTPS（本地 localhost 除外）、以 JavaScript 文件形式注册、且作用域（scope）需在同源下。它本身没有 DOM 访问权限，不能直接操作页面元素，但可通过 postMessage 和页面通信。

• 生命周期独立：安装（install）、激活（activate）、闲置（idle）、终止（terminated）——不随页面关闭而销毁
• 请求可拦截：在 fetch 事件中决定是走网络、读缓存，还是返回兜底响应
• 支持后台同步和推送：即使浏览器关闭，也能在条件满足时执行任务（需用户授权）

注册并激活一个基础 Service Worker

注册只需在主页面 JS 中调用 navigator.serviceWorker.register()，路径指向你的 SW 脚本文件：

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg.scope))
    .catch(err => console.error('SW registration failed:', err));
}

登录后复制

注意：sw.js 必须放在网站根目录（或指定 scope），否则无法控制子路径页面。注册后，浏览器会自动触发 install 事件。

立即学习“Java免费学习笔记（深入）”；

标签： css javascript java html js go 浏览器 app ai 作用域 red