使用Service Worker实现离线应用_js PWA技术-js教程-PHP中文网

使用Service Worker实现离线应用_js PWA技术

紅蓮之龍

发布： 2025-11-01 06:57:23

原创

622人浏览过

Service Worker 是 PWA 核心，通过注册、安装、激活流程实现离线访问；首先在页面加载时注册 sw.js，检查支持性；安装阶段预缓存关键资源如 HTML、CSS、JS 和图片，确保离线可用；通过 fetch 事件拦截请求，优先返回缓存内容，实现离线浏览；更新时通过更改缓存名称并清理旧缓存，避免版本冲突，保证新资源正确加载。

使用service worker实现离线应用_js pwa技术

Service Worker 是 PWA（渐进式 Web 应用）的核心技术之一，它充当浏览器与网络之间的代理层，能够拦截网络请求、缓存资源，并实现离线访问功能。通过注册并激活 Service Worker，Web 应用可以在无网络环境下依然正常运行。

注册 Service Worker

要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或 HTML 的脚本中注册它。注册过程不会立即安装，而是告诉浏览器去哪里找 worker 文件。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker registered:', registration);
      })
      .catch(error => {
        console.log('Service Worker registration failed:', error);
      });
  });
}

登录后复制

这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后尝试注册根目录下的 sw.js 文件。

安装与缓存静态资源

Service Worker 安装阶段适合预缓存关键资源，比如 HTML、CSS、JS 和图片等。这些资源将在离线时被使用。

const CACHE_NAME = 'my-pwa-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

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

登录后复制

在 install 事件中，通过 caches.open() 创建一个命名缓存空间，并使用 addAll() 将列表中的资源全部加入缓存。只有所有资源缓存成功，Service Worker 才会进入激活状态。

拦截请求并返回缓存内容

activate 后，Service Worker 可以监听 fetch 事件，对网络请求进行拦截和处理。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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

登录后复制

上面的逻辑是：当有请求发出时，先查找缓存中是否有匹配的响应；如果有，就返回缓存内容；否则发起实际网络请求。这样即使设备处于离线状态，用户也能看到已缓存的页面。

为了提升体验，还可以实现“缓存优先”或“网络优先”的策略，根据资源类型灵活选择更新机制。

更新缓存版本避免旧内容残留

当应用更新后，需要确保 Service Worker 能正确升级缓存。可以通过更改 CACHE_NAME 来实现版本控制，并在 activate 阶段清理旧缓存。

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

登录后复制

这个步骤确保新版本生效时，旧的缓存不会干扰新资源的加载，防止出现混合内容的问题。

基本上就这些。只要配置好注册、安装、缓存和请求拦截，你的 Web 应用就能具备基本的离线能力。不复杂但容易忽略的是缓存策略的设计和版本管理，这直接影响用户体验。

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