使用Service Worker实现离线应用_javascript技巧-js教程-PHP中文网

使用Service Worker实现离线应用_javascript技巧

夜晨

发布： 2025-11-05 19:45:02

原创

562人浏览过

Service Worker通过拦截网络请求实现离线访问，首先注册sw.js脚本，安装时预缓存核心资源，fetch事件中优先返回缓存资源，更新时通过版本号清除旧缓存，确保离线可用性。

使用service worker实现离线应用_javascript技巧

Service Worker 是现代 Web 应用实现离线功能的核心技术。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源并提供离线访问能力。通过合理配置，可以让网站在无网络环境下依然正常运行。

注册并安装 Service Worker

要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或页面脚本中注册它。注册操作通常放在页面加载时执行。

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

这段代码检查浏览器是否支持 Service Worker，如果支持，则尝试注册根目录下的 sw.js 文件。这个文件就是 Service Worker 脚本本身，需单独创建。

缓存关键资源

Service Worker 安装阶段是预缓存静态资源的最佳时机。通过监听 install 事件，可以将 HTML、CSS、JS、图片等核心文件保存到 Cache Storage 中。

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

const CACHE_NAME = 'offline-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/logo.png'
];

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

caches.open() 创建一个命名缓存空间，addAll() 将列表中的资源全部加入缓存。调用 skipWaiting() 可让新 Service Worker 立即激活，避免等待旧版本退出。

拦截请求并返回缓存

当用户访问页面且网络不可用时，Service Worker 可以通过监听 fetch 事件来拦截请求，并从缓存中返回对应资源。

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

这段逻辑优先查找缓存，命中则直接返回；未命中则发起网络请求。这样既保证了离线可用性，又能在联网时获取最新内容。

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

查看详情

对于更复杂的策略（如网络优先或缓存优先），可按需调整判断逻辑。例如动态 API 请求适合网络优先，而静态资源更适合缓存优先。

更新缓存版本

当应用更新后，需要升级缓存内容。可以通过更改 CACHE_NAME 的版本号来触发新的安装流程。

const CACHE_NAME = 'offline-v2';

新版 Service Worker 安装完成后，会在下一次页面加载时激活。你也可以在 activate 事件中清理旧缓存：

self.addEventListener('activate', e => {
  e.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME)
          .map(key => caches.delete(key))
      )
    )
  );
});

这确保只有当前版本的缓存被保留，避免存储冗余数据。

基本上就这些。只要正确注册、缓存资源、响应请求并管理版本，就能构建出可靠的离线 Web 应用。不复杂但容易忽略的是路径问题和缓存策略选择，建议开发时使用 DevTools 的 Application 面板调试 Service Worker 状态和缓存内容。

以上就是使用Service Worker实现离线应用_javascript技巧的详细内容，更多请关注php中文网其它相关文章！