JavaScript缓存策略_Service Worker离线存储-js教程-PHP中文网

JavaScript缓存策略_Service Worker离线存储

紅蓮之龍

发布： 2025-11-30 19:56:39

原创

368人浏览过

Service Worker 是实现离线缓存的核心技术，通过拦截网络请求并结合 Cache API 管理资源，支持缓存优先、网络优先等多种策略；需注册、安装、激活并监听 fetch 事件来控制缓存，版本更新时应清理旧缓存以确保生效。

javascript缓存策略_service worker离线存储

Service Worker 是实现 JavaScript 缓存和离线存储的核心技术之一。它是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求并管理缓存，从而实现离线访问、性能优化和资源预加载。

什么是 Service Worker

Service Worker 是一种特殊的 Web Worker，注册后可在用户设备上安装并激活，之后就能控制指定范围内的页面。它通过事件驱动机制工作，关键能力包括：网络请求拦截、缓存管理、推送通知和后台同步。

由于其运行在独立上下文中，无法直接操作 DOM，但非常适合处理资源缓存与离线逻辑。

缓存策略：Cache API 结合 Fetch 事件

Service Worker 配合 Cache API 可以灵活定义资源的缓存方式。通过监听 fetch 事件，可以决定是从网络获取、从缓存读取，还是返回备用内容。

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

常见的缓存策略有：

Logomaster.ai

Logo在线生成工具

查看详情

缓存优先（Cache First）：先尝试从缓存读取资源，未命中再请求网络。适合静态资源如 JS、CSS、图片。
网络优先（Network First）：优先请求网络，失败后再使用缓存。适合动态内容或需保持最新的数据。
仅缓存（Cache Only）：直接从缓存返回，不发起网络请求。适用于已预缓存的资源。
仅网络（Network Only）：总是发起网络请求，不使用缓存。适用于实时性要求高的接口。
Stale-While-Revalidate：先返回缓存内容（即使过期），同时后台更新缓存。用户体验快，内容逐步更新。

基本实现步骤

要启用 Service Worker 的离线缓存功能，需完成以下几步：

注册 Service Worker：在主页面 JavaScript 中调用 navigator.serviceWorker.register('/sw.js')。
安装阶段（install）：在 sw.js 中监听 install 事件，预缓存核心资源。
激活阶段（activate）：清除旧缓存，确保新版本生效。
拦截请求（fetch）：根据策略响应请求，可结合 caches.match 和 fetch 使用。

示例代码片段：

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

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

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

登录后复制