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

使用Service Worker实现离线应用_javascript PWA

狼影

发布： 2025-11-16 20:03:55

原创

566人浏览过

Service Worker是PWA离线核心，通过注册sw.js实现。先缓存静态资源确保离线访问，再拦截fetch请求优先返回缓存，最后更新版本时清理旧缓存，配合manifest.json和HTTPS使Web应用具备原生体验。

使用service worker实现离线应用_javascript pwa

要实现一个离线可用的PWA（渐进式Web应用），Service Worker 是核心机制。它是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、缓存资源并提供离线访问能力。

注册 Service Worker

在页面加载时注册 Service Worker，告诉浏览器启用该服务。

示例代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('Service Worker 注册成功:', registration.scope);
      })
      .catch(error => {
        console.log('Service Worker 注册失败:', error);
      });
  });
}

登录后复制

这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册 sw.js 文件作为服务工作线程。

缓存静态资源

在 sw.js 中监听 install 事件，预缓存关键资源，如 HTML、CSS、JS、图片等，确保离线时仍可访问。

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

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

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

登录后复制

当 Service Worker 安装时，会打开指定缓存并添加所有资源。若任一文件下载失败，安装将失败，保证缓存完整性。

AppMall应用商店

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

查看详情

拦截请求并返回缓存内容

通过监听 fetch 事件，判断资源是否已缓存，优先从缓存中返回，否则发起网络请求。

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

登录后复制

这个策略称为“缓存优先”，适合静态资源。对于动态内容，可采用“网络优先”或“缓存优先+后台更新”等策略。

更新缓存版本

当应用更新时，需升级缓存。通过更改 CACHE_NAME 并在 activate 事件中清理旧缓存实现。

const CACHE_NAME = 'my-pwa-cache-v2'; // 版本更新

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);
          }
        })
      );
    })
  );
});

登录后复制

activate 事件在新 Service Worker 激活时触发，清除不再需要的旧缓存，避免占用用户存储空间。

基本上就这些。配合 manifest.json 和 HTTPS 环境，你的 Web 应用就能像原生应用一样离线运行、添加到主屏幕，真正成为 PWA。关键是合理设计缓存策略，保障用户体验一致性。

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