无需登录 数据私有 本地保存

Service Worker状态检测 - 注册/更新/缓存

11
0
0
0
浏览器支持
检测中...
已注册 SW
-
个注册作用域
缓存存储
-
个缓存桶
安全上下文
检测中...
Service Worker 管理

暂无已注册的 Service Worker

点击"刷新"或注册一个新的 SW
操作日志
[系统] 工具已就绪,正在检测环境...
Cache Storage 管理

暂无缓存数据

点击"添加测试"创建演示缓存,或点击"刷新"检测
消息通信测试
检测中...

向当前控制页面的 Service Worker 发送消息,测试 postMessage 通信。

推送通知检测

需要已注册的 Service Worker 才能检测推送订阅状态。

后台同步检测

检测 Background Sync API 支持情况。

示例 SW 脚本

将以下代码保存为 sw.js 并放置到网站根目录,即可使用本工具进行测试。

// sw.js - Service Worker 示例
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
    '/',
    '/index.html',
    '/styles.css',
    '/script.js'
];

// 安装事件
self.addEventListener('install', event => {
    console.log('[SW] 安装中...');
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
            .then(() => self.skipWaiting())
    );
});

// 激活事件
self.addEventListener('activate', event => {
    console.log('[SW] 激活中...');
    event.waitUntil(
        caches.keys().then(keys =>
            Promise.all(keys.filter(k => k !== CACHE_NAME)
                .map(k => caches.delete(k)))
        ).then(() => self.clients.claim())
    );
});

// 拦截请求
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(resp => resp || fetch(event.request))
    );
});

// 接收消息
self.addEventListener('message', event => {
    console.log('[SW] 收到消息:', event.data);
    if (event.data.action === 'ping') {
        event.ports[0]?.postMessage({ action: 'pong', time: Date.now() });
    }
    if (event.ports[0]) {
        event.ports[0].postMessage({
            echo: event.data,
            swVersion: '1.0.0',
            timestamp: Date.now()
        });
    }
});
常见问题 FAQ
Service Worker 是什么?它有什么用途?
Service Worker 是运行在浏览器后台的独立脚本,充当网页与服务器之间的代理层。它可以拦截网络请求、管理缓存、实现离线访问、推送通知和后台同步等功能。它是 PWA(渐进式 Web 应用)的核心技术之一,让 Web 应用获得类似原生应用的体验。Service Worker 独立于页面生命周期运行,即使页面关闭也能继续工作。
为什么我的 Service Worker 注册失败?
常见原因包括:① 非安全上下文:Service Worker 要求 HTTPS 或 localhost 环境;② 路径错误:SW 脚本文件不存在或路径不正确;③ 作用域限制:SW 只能控制其所在目录及子目录下的页面;④ CORS 问题:SW 脚本必须同源;⑤ MIME 类型:服务器必须返回正确的 text/javascriptapplication/javascript MIME 类型。
如何更新已安装的 Service Worker?
浏览器会自动检测 SW 脚本的变化:当用户访问 SW 控制的页面时,浏览器会重新下载 SW 脚本并与现有版本进行逐字节比对。如果发现差异,新版本会进入"等待激活"状态。你可以调用 registration.update() 手动触发更新检查,或在 SW 中使用 self.skipWaiting() 让新版本立即激活。
Cache Storage 和普通浏览器缓存有什么区别?
Cache Storage 是由开发者通过代码精确控制的缓存存储,你可以决定缓存什么、何时更新、何时删除。而浏览器 HTTP 缓存由浏览器自动管理,受 Cache-Control 等响应头控制。Cache Storage 更适合离线应用场景,可以预先缓存完整的页面和资源,确保在没有网络时也能正常访问。
Service Worker 的生命周期是怎样的?
Service Worker 有三个主要阶段:① 安装 (installing):SW 首次注册或更新时触发 install 事件,通常在此阶段预缓存关键资源;② 等待 (waiting):安装完成后,如果已有旧版本 SW 在控制页面,新版本进入等待状态,直到所有使用旧版本的页面关闭;③ 激活 (activating/active):SW 开始控制页面,可触发 activate 事件清理旧缓存。使用 skipWaiting()clients.claim() 可以加速这一过程。
如何调试 Service Worker?
在 Chrome 中打开 DevTools → Application → Service Workers 面板,可以查看所有注册的 SW、手动更新/注销、查看缓存存储。使用 chrome://serviceworker-internals/ 可以查看更详细的内部信息。在 Firefox 中,使用 about:debugging#/runtime/this-firefox 进行调试。本工具也提供了便捷的检测和管理界面。
postMessage 通信有什么注意事项?
页面可以通过 navigator.serviceWorker.controller.postMessage() 向 SW 发送消息,SW 通过 self.addEventListener('message', ...) 接收。SW 可以通过 event.ports[0].postMessage() 回复。注意:① 传递的数据必须是可序列化的(不支持函数、DOM 元素等);② 可以使用 MessageChannel 实现双向通信;③ SW 也可以使用 self.clients.matchAll() 向所有控制的页面广播消息。
Service Worker 会影响页面性能吗?
合理使用 Service Worker 可以显著提升性能:通过缓存策略减少网络请求、实现即时加载。但如果缓存策略不当(如过度缓存或缓存过时资源),可能导致用户看到旧内容。SW 本身运行在独立的线程中,不会阻塞主线程。首次安装时会有一定的资源开销,但后续访问通常会更快。建议使用"缓存优先、网络回退"或"网络优先、缓存回退"等策略。