javascript如何实现离线应用_Service Worker如何工作-js教程-PHP中文网

javascript如何实现离线应用_Service Worker如何工作

夢幻星辰

发布： 2025-12-18 22:35:02

原创

643人浏览过

Service Worker是实现JavaScript离线应用的核心，它作为独立于主线程的后台脚本，通过注册、安装、激活生命周期拦截fetch请求并管理缓存，从而支持无网络访问。

javascript如何实现离线应用_service worker如何工作

JavaScript 实现离线应用的核心是 Service Worker——它是一个运行在浏览器后台、独立于网页主线程的脚本，能拦截网络请求、缓存资源、控制页面加载逻辑，从而让 Web 应用在无网络时仍可正常访问。

Service Worker 的基本工作原理

Service Worker 本质是一个事件驱动的代理脚本，生命周期与页面解耦。它不会自动运行，需先注册；注册后会被安装（install），然后激活（activate），之后才能接管页面的 fetch 请求。

注册：在主页面 JS 中调用 navigator.serviceWorker.register('./sw.js')，浏览器会下载并尝试安装该脚本
安装：触发 install 事件，常在此阶段用 cache.addAll() 预缓存核心静态资源（如 HTML、CSS、JS、图标）
激活：安装成功后进入等待态，关闭所有旧 Tab 后才会激活；此时可清理旧缓存（cache.delete()）
拦截请求：激活后监听 fetch 事件，可决定返回缓存、发起网络请求，或两者结合（如缓存优先 + 后台更新）

实现一个基础离线可用的 Service Worker

以下是最简可行示例，支持首次加载后离线打开首页：

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

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

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

登录后复制

注意：caches.match() 默认只匹配 GET 请求，且需确保请求 URL 完全一致（含查询参数）。若需更灵活匹配，可用 cache.keys() 或自定义匹配逻辑。

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