当前位置：首页 > 文章列表 > 文章 > 前端 > ServiceWorker是什么？如何实现离线应用？

ServiceWorker是什么？如何实现离线应用？

2026-02-26 14:55:03 0浏览收藏

Service Worker 是浏览器后台运行的独立脚本，作为可编程的网络代理层，它不依赖页面生命周期，能拦截请求、智能缓存资源、支持离线访问与消息推送，是构建现代化 PWA 的核心技术；虽需 HTTPS（localhost 除外）、同源注册且无 DOM 访问权限，但通过简洁的 install/fetch 事件配合 Cache API 和 postMessage，就能轻松实现静态资源预缓存与无缝离线体验——从首次联网加载到断网即用，用户毫无感知，而掌握版本更新、缓存清理和渐进式策略升级，更能让应用真正稳定可靠。

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

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 事件。

缓存静态资源，实现离线加载

在 sw.js 中监听 install 和 fetch 事件，把 HTML/CSS/JS/图片等提前存入 Cache API：

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/logo.png'
];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

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

这样，首次联网访问后资源就被缓存；之后断网再打开页面，Service Worker 会从缓存中返回内容，用户完全无感知。