javascript的service worker是什么_如何实现离线功能？_技术教程

javascript的service worker是什么_如何实现离线功能？

发布时间：2025-12-27

点击量：

Service Worker 是运行在浏览器后台的可编程代理层，支持离线访问、请求拦截与消息推送；需 HTTPS 注册、事件驱动、无法操作 DOM，通过 postMessage 与页面通信。

Service Worker 是浏览器中运行在后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源、推送消息，并实现真正的离线访问能力。它不是普通 JS 脚本，而是一个可编程的代理层。

Service Worker 的核心特点

它必须通过 HTTPS（本地 localhost 除外）注册；生命周期由浏览器控制，不依赖页面存在；不能直接操作 DOM；通过 postMessage 与页面通信；支持事件驱动（install、activate、fetch 等）。

注册并安装 Service Worker

先在主页面中注册：

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

然后在 sw.js 中处理安装逻辑，缓存关键静态资源：

const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js'
];

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

拦截请求并返回缓存

在 activate 后，fetch 事件会触发，你可以决定从缓存还是网络加载：

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

更健壮的做法是结合缓存优先 + 网络回退（cache-first），或网络优先 + 缓存兜底（network-first），甚至 stale-while-revalidate 模式。

更新缓存与清理旧版本

修改 sw.js 文件内容后，浏览器会自动下载新版本并在下次页面打开时触发 install；但旧缓存不会自动删除。需要在 activate 阶段清理：

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );

基本上就这些。Service Worker 实现离线功能不复杂但容易忽略细节：缓存策略要匹配业务场景，版本管理要主动清理，调试时记得勾选 “Update on reload” 并跳过等待（skip waiting）来快速测试新逻辑。

标签：# css # javascript # java # html # js # 浏览器 # app # ai # red

上一篇：Safari浏览器网页内容无法拖动怎么办 Safari拖动功

下一篇：zlibrarly入口网址 zlibrarly官网主页面访问