javascript的Service Worker是什么_如何用它构建离线应用？-js教程-PHP中文网

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

幻影之瞳

发布： 2025-12-23 21:53:02

原创

646人浏览过

Service Worker 是运行在浏览器后台的独立脚本，可拦截请求、缓存资源、实现离线访问和消息推送，是 PWA 的核心；需 HTTPS（localhost 除外）、同源注册、无 DOM 访问权限，通过 postMessage 与页面通信。

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

Service Worker 是运行在浏览器后台的独立 JavaScript 脚本，它不绑定具体页面，能拦截网络请求、缓存资源、推送消息，并让网页实现真正的离线可用。它不是传统意义上的“Web Worker”，而是一个可编程的网络代理层，是构建 PWA（渐进式 Web 应用）的核心能力之一。

Service Worker 的关键特性

它有三个硬性前提：必须通过 HTTPS（本地 localhost 除外）、以 red">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 事件。

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

Android创建和使用数据库详细指南中文WORD版

每个应用程序都要使用数据，Android应用程序也不例外，Android使用开源的、与操作系统无关的SQL数据库--SQLite，本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。数据库支持每个应用程序无论大小的生命线，除非你的应用程序只处理简单的数据，那么就需要一个数据库系统存储你的结构化数据，Android使用SQLite数据库，它是一个开源的、支持多操作系统的SQL数据库，在许多领域广泛使用，如Mozilla FireFox就是使用SQLite来存储配置数据的，iPhon

查看详情

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

在 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 会从缓存中返回内容，用户完全无感知。