PWA进阶：打造离线可用的Web应用

原创 于 2025-07-14 08:49:12 发布 · 560 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

引言

在移动互联网时代，用户对Web应用的期望已不仅限于可访问性，更要求其具备类似原生应用的体验。Progressive Web App (PWA) 技术的出现，使Web应用能够提供接近原生应用的用户体验，尤其是在网络连接不稳定或完全离线的情况下仍然可以使用。本文将深入探讨如何构建真正离线可用的PWA，帮助开发者掌握这一强大技术的核心要点。

PWA核心技术回顾

在深入探讨离线功能之前，让我们简要回顾PWA的三个核心技术：

  1. Service Worker：一种运行在浏览器背后的脚本，能够拦截和处理网络请求，是实现离线功能的关键
  2. Web App Manifest：定义应用的外观和行为的JSON文件
  3. HTTPS：PWA必须通过安全连接提供服务

Service Worker生命周期

Service Worker的生命周期是理解离线功能的基础：

  1. 注册：告诉浏览器Service Worker的位置
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker注册成功，作用域为:', registration.scope);
    })
    .catch(error => {
      console.log('Service Worker注册失败:', error);
    });
}
  1. 安装：首次注册或更新时触发，通常用于缓存静态资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
        '/images/logo.png'
      ]);
    })
  );
});
  1. 激活：安装成功后触发，用于清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(cacheName => {
          return cacheName !== 'v1';
        }).map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    })
  );
});
  1. 拦截请求：激活后开始拦截网络请求
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

高级缓存策略

1. 缓存优先策略 (Cache First)

适用于不经常变化的静态资源，如图片、CSS、JavaScript文件等。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 如果在缓存中找到响应，则返回缓存的版本
        if (response) {
          return response;
        }
        
        // 否则发送网络请求并缓存结果
        return fetch(event.request).then(networkResponse => {
          // 检查我们收到的是否为有效响应
          if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
            return networkResponse;
          }
          
          // 克隆响应，因为响应是流，只能使用一次
          const responseToCache = networkResponse.clone();
          
          caches.open('v1')
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
            
          return networkResponse;
        });
      })
  );
});

2. 网络优先策略 (Network First)

适用于需要最新数据的请求，同时提供离线访问能力。

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 如果响应成功，克隆它并存储到缓存中
        if (response.status === 200) {
          const responseToCache = response.clone();
          caches.open('v1')
            .then(cache => {
              cache.put(event.request, responseToCache);
            });
        }
        return response;
      })
      .catch(() => {
        // 如果网络请求失败，尝试从缓存中获取
        return caches.match(event.request);
      })
  );
});

3. Stale-While-Revalidate

提供快速响应的同时在后台更新缓存。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('v1').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        // 立即返回缓存的响应，同时更新缓存
        return response || fetchPromise;
      });
    })
  );
});

IndexedDB实现离线数据存储

对于需要存储和操作结构化数据的应用，IndexedDB是理想的选择：

// 打开数据库
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1);
    
    request.onerror = event => {
      reject('数据库打开失败');
    };
    
    request.onsuccess = event => {
      resolve(event.target.result);
    };
    
    request.onupgradeneeded = event => {
      const db = event.target.result;
      // 创建对象仓库
      const store = db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
      store.createIndex('title', 'title', { unique: false });
      store.createIndex('completed', 'completed', { unique: false });
    };
  });
};

// 添加任务
const addTask = async (task) => {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['tasks'], 'readwrite');
    const store = transaction.objectStore('tasks');
    const request = store.add(task);
    
    request.onsuccess = () => {
      resolve(request.result);
    };
    
    request.onerror = () => {
      reject('添加任务失败');
    };
  });
};

// 获取所有任务
const getAllTasks = async () => {
  const db = await openDB();
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['tasks'], 'readonly');
    const store = transaction.objectStore('tasks');
    const request = store.getAll();
    
    request.onsuccess = () => {
      resolve(request.result);
    };
    
    request.onerror = () => {
      reject('获取任务失败');
    };
  });
};

实现离线数据同步

当网络恢复时，将本地更改同步到服务器：

// 检查网络连接并同步数据
const syncData = async () => {
  if (!navigator.onLine) return;
  
  try {
    const tasks = await getAllTasks();
    const unsynced = tasks.filter(task => !task.synced);
    
    for (const task of unsynced) {
      const response = await fetch('/api/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(task)
      });
      
      if (response.ok) {
        // 更新本地状态为已同步
        await updateTaskSyncStatus(task.id, true);
      }
    }
  } catch (error) {
    console.error('同步失败:', error);
  }
};

// 监听网络恢复事件
window.addEventListener('online', syncData);

提供离线用户体验反馈

确保用户了解应用的离线状态：

// 检测并显示网络状态
const updateNetworkStatus = () => {
  const statusEl = document.getElementById('network-status');
  
  if (navigator.onLine) {
    statusEl.textContent = '在线';
    statusEl.classList.remove('offline');
    statusEl.classList.add('online');
    // 尝试同步数据
    syncData();
  } else {
    statusEl.textContent = '离线';
    statusEl.classList.remove('online');
    statusEl.classList.add('offline');
  }
};

// 初始化时检查
updateNetworkStatus();

// 监听网络状态变化
window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);

完整示例：离线待办事项应用

下面是一个完整的离线待办事项应用示例：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>离线待办事项</title>
  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="/styles.css">
  <meta name="theme-color" content="#2196F3">
</head>
<body>
  <header>
    <h1>我的待办事项</h1>
    <div id="network-status"></div>
  </header>
  
  <main>
    <form id="task-form">
      <input type="text" id="task-input" placeholder="添加新任务..." required>
      <button type="submit">添加</button>
    </form>
    
    <ul id="tasks-list"></ul>
  </main>
  
  <script src="/app.js"></script>
  <script>
    // 注册 Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('Service Worker注册成功');
        })
        .catch(error => {
          console.error('Service Worker注册失败:', error);
        });
    }
  </script>
</body>
</html>

app.js

// IndexedDB操作
const dbPromise = idb.openDB('tasks-store', 1, {
  upgrade(db) {
    db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true });
  }
});

// DOM元素
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const tasksList = document.getElementById('tasks-list');
const networkStatus = document.getElementById('network-status');

// 更新网络状态显示
const updateNetworkStatus = () => {
  if (navigator.onLine) {
    networkStatus.textContent = '在线';
    networkStatus.className = 'online';
    syncTasks();
  } else {
    networkStatus.textContent = '离线';
    networkStatus.className = 'offline';
  }
};

// 添加任务到IndexedDB
const addTask = async (title) => {
  const db = await dbPromise;
  const tx = db.transaction('tasks', 'readwrite');
  const store = tx.objectStore('tasks');
  
  await store.add({
    title,
    completed: false,
    createdAt: new Date().toISOString(),
    synced: false
  });
  
  await tx.done;
  await loadTasks();
  
  if (navigator.onLine) {
    syncTasks();
  }
};

// 从IndexedDB加载任务
const loadTasks = async () => {
  const db = await dbPromise;
  const tasks = await db.getAll('tasks');
  
  tasksList.innerHTML = '';
  
  tasks.forEach(task => {
    const li = document.createElement('li');
    li.dataset.id = task.id;
    li.classList.toggle('completed', task.completed);
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = task.completed;
    checkbox.addEventListener('change', () => toggleTaskStatus(task.id, checkbox.checked));
    
    const span = document.createElement('span');
    span.textContent = task.title;
    
    const syncStatus = document.createElement('small');
    syncStatus.className = task.synced ? 'synced' : 'unsynced';
    syncStatus.textContent = task.synced ? '已同步' : '未同步';
    
    li.appendChild(checkbox);
    li.appendChild(span);
    li.appendChild(syncStatus);
    tasksList.appendChild(li);
  });
};

// 切换任务状态
const toggleTaskStatus = async (id, completed) => {
  const db = await dbPromise;
  const tx = db.transaction('tasks', 'readwrite');
  const store = tx.objectStore('tasks');
  
  const task = await store.get(id);
  task.completed = completed;
  task.synced = false;
  await store.put(task);
  
  await tx.done;
  await loadTasks();
  
  if (navigator.onLine) {
    syncTasks();
  }
};

// 同步任务到服务器
const syncTasks = async () => {
  const db = await dbPromise;
  const tasks = await db.getAll('tasks');
  const unsyncedTasks = tasks.filter(task => !task.synced);
  
  for (const task of unsyncedTasks) {
    try {
      // 这里使用模拟API调用
      const response = await fetch('/api/tasks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(task)
      }).catch(() => ({ ok: false }));
      
      if (response.ok) {
        const tx = db.transaction('tasks', 'readwrite');
        const store = tx.objectStore('tasks');
        task.synced = true;
        await store.put(task);
        await tx.done;
      }
    } catch (error) {
      console.error('同步失败:', error);
    }
  }
  
  await loadTasks();
};

// 事件监听器
taskForm.addEventListener('submit', event => {
  event.preventDefault();
  const title = taskInput.value.trim();
  if (title) {
    addTask(title);
    taskInput.value = '';
  }
});

window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);

// 初始化
updateNetworkStatus();
loadTasks();

sw.js

const CACHE_NAME = 'tasks-app-v1';

const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/app.js',
  '/styles.css',
  '/manifest.json',
  '/idb.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

// 安装Service Worker并缓存静态资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(ASSETS_TO_CACHE);
      })
      .then(() => self.skipWaiting())
  );
});

// 激活并清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(cacheName => {
          return cacheName !== CACHE_NAME;
        }).map(cacheName => {
          return caches.delete(cacheName);
        })
      );
    }).then(() => self.clients.claim())
  );
});

// 处理网络请求
self.addEventListener('fetch', event => {
  // 静态资源使用缓存优先策略
  if (event.request.url.match(/\.(html|css|js|json|png|jpg|jpeg|svg|gif)$/)) {
    event.respondWith(
      caches.match(event.request)
        .then(response => {
          return response || fetch(event.request).then(fetchRes => {
            return caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, fetchRes.clone());
              return fetchRes;
            });
          });
        })
    );
  } else if (event.request.url.includes('/api/')) {
    // API请求使用网络优先，失败时将请求缓存起来等待后续同步
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return new Response(JSON.stringify({
            error: 'Currently offline. Your request will sync when online.'
          }), {
            headers: { 'Content-Type': 'application/json' },
            status: 503
          });
        })
    );
  }
});

// 后台同步
self.addEventListener('sync', event => {
  if (event.tag === 'sync-tasks') {
    event.waitUntil(syncTasks());
  }
});

// 模拟同步任务
const syncTasks = async () => {
  // 这部分代码在真实应用中需要与主线程共享IndexedDB逻辑
  // 为了简化示例，这里只是展示概念
  console.log('后台同步任务执行');
};

manifest.json

{
  "name": "离线待办事项",
  "short_name": "待办事项",
  "description": "一个支持离线使用的待办事项应用",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

测试与调试

Lighthouse审计

使用Chrome DevTools中的Lighthouse进行PWA审计，确保你的应用满足PWA的要求。

模拟离线状态

  1. 在Chrome DevTools中勾选"Network"面板的"Offline"选项
  2. 使用navigator.onLine属性检测网络状态
  3. 监听online和offline事件

Service Worker调试

在Chrome DevTools中，进入"Application"面板，查看"Service Workers"部分：

  1. 查看Service Worker状态
  2. 模拟更新周期
  3. 查看缓存内容

最佳实践

  1. 渐进增强：确保基本功能在不支持Service Worker的浏览器上仍然可用

  2. 定期更新缓存：实现缓存版本管理，避免过时的资源

  3. 防止缓存污染：小心处理用户特定数据，不要将敏感信息存入缓存

  4. 适当的后备机制：当资源既不在缓存中也无法从网络获取时，提供合理的后备内容

  5. 定期清理IndexedDB：实现数据过期策略，避免无限存储

  6. 注意配额限制：浏览器对存储空间有限制，监控使用情况并处理超出配额的情况

  7. 提供明确的离线指示器：让用户知道应用当前是在线还是离线状态

结论

构建真正离线可用的PWA需要深入理解Service Worker、缓存策略和客户端存储技术。通过合理组合这些技术，我们可以打造出在各种网络条件下都能提供出色用户体验的Web应用。

随着浏览器对PWA技术的支持不断增强，离线Web应用将会变得越来越强大，为用户提供更加流畅、可靠的体验，同时为开发者提供更广阔的创新空间。

参考资源

  1. MDN Web Docs: Service Worker API
  2. Web.dev: Progressive Web Apps
  3. Google Developers: Workbox
  4. MDN Web Docs: IndexedDB API
vite-plugin-pwa 离线安装Vite应用
胖蔡叨叨叨
06-16 1915
渐进式Web应用（PWA）通过结合Web和移动应用的特点，为用户带来更加流畅和快速的体验。且PWA支持离线访问能力（访问静态资源本地缓存），极大提高了用户交互的流畅性，降低非必要的网络依赖。尤其适合在手机端创建，本文推荐基于Vite的基础上使用实现和workbox离线缓存功能。
webpack学习-PWA离线可访问技术
Celester_best的博客
01-01 1102
概念 PWA：Progressive Web App。渐进式网络开发应用程序(离线可访问) ServiceWorker PWA使用 不使用PWA 使用PWA
离线访问--PWA渐进式网络应用程序
Wjangia的博客
04-17 214
pwa渐进式网络应用程序，是一种可以提供类似于native app（原生应用程序）体验的web app（网络应用程序），可离线访问
PWA（渐进式网页应用）：打造离线也能用的web应用
偏执的小男孩儿
04-16 573
PWA（渐进式网页应用）：打造离线也能用的web应用
PWA集成和离线使用
farme_guan的博客
04-27 1648
本篇文章是关于集成项目到PWA的介绍，包括PWA离线使用，和引导用户安装应用。
PWA 中的 Service Worker：如何实现应用离线功能
最新发布
乐闻世界
03-31 1101
在当今快速发展的互联网时代，Progressive Web App (PWA) 正在逐步成为现代 Web 开发的主流选择。PWA 将 Web 应用和原生应用的最佳特性相结合，提供了丰富的用户体验。而在 PWA 的众多技术中，Service Worker 无疑是其核心组件之一。作为一种运行在浏览器后台的独立脚本，Service Worker 负责拦截网络请求、管理缓存、推送通知等功能，从而显著提升应用的性能和可靠性。
PWA离线简单示例
dgiij的博客
09-04 439
浏览器首次访问会注册service-worker，service-worker就开始工作了，把相关文件缓存到本地，并监听fetch事件。之后再访问，已经有缓存的情况下，就不会再访问目标网站， 而是直接从本地缓存加载页面脚本，渲染执行，目标网站即使离线，也不会影响了。当然了，如果该网页应用是个单机版应用，那应该没有啥问题，如果还是个网络应用的话，那么仅该网页缓存走本地，其他目标资源还得走网络，它们不可访问也会影响离线效果的。这样就齐活了，是不是很简单。这些参数值你可以自行定义。然后在页面html中引用。
Vue3项目部署后接口请求优化：打造快速响应Web应用的秘籍
[Vue3项目部署后接口请求优化：打造快速响应Web应用的秘籍](https://www.nicelydev.com/img/nginx/serveur-gzip-client.webp) # 摘要 本文针对Vue3项目接口请求及前端性能优化进行了全面的研究和实践。首先概述了...
HTML基础与进阶：从零开始构建静态网页的终极指南
[HTML基础与进阶：从零开始构建静态网页的终极指南](https://media.geeksforgeeks.org/wp-content/uploads/20230103125305/redesign-web.png) # 摘要 本文全面介绍HTML的基础知识、结构、标签使用、实践技巧、布局...
在Angular项目中，如何有效地配置service worker以实现PWA的离线缓存，并确保在不同网络条件下应用的稳定运行？
10-31
建议在构建你的PWA项目之前，先熟悉《Angular PWA实战示例：打造离线可用的Web应用》一书，其中详细介绍了Angular PWA的开发流程和最佳实践，包括如何配置和优化service worker。通过这本书，你可以掌握从基础到...
Vue项目离线应用开发实战：打造无网络也能使用的应用，提升用户体验和应用可用性
![vue项目实战]...
PWA技术与Vue.js：构建渐进式Web应用的实践技巧
首先，PWA应用具有离线访问能力，用户可以在没有网络连接的情况下继续访问应用。其次，PWA应用可以像原生应用一样被添加到主屏幕，用户可以通过点击图标直接打开应用。此外，PWA应用还具有快速加载、响应式布局、推...
【PWA学习】3. 让你的 WebApp 离线可用
小贤笔记
01-10 996
引言 PWA 其中一个令人着迷的能力就是离线(offline)可用 即使在离线状态下，依然可以访问的 PWA 离线只是它的一种功能表现而已，具体说来，它可以： 让我们的Web App在无网(offline)情况下可以访问，甚至使用部分功能，而不是展示“无网络连接”的错误页； 让我们在弱网的情况下，能使用缓存快速访问我们的应用，提升体验； 在正常的网络情况下，也可以通过各种自发...
Blazor WebAssembly 渐进式 Web 应用程序 (PWA) 离线处理数据
alex_zoucn的博客
04-12 2789
Window.localStorage 只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。 存储在 localStorage 的数据可以长期保留 localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型). 浏览器兼容性 桌面: Chrome, Edge, Firefox, Internet Explorer, Op
vue-cli3构建PWA离线应用
cream66的博客
07-16 2651
vue-cli2使用PWA 1.安装pwa依赖 npm install @vue/cli-plugin-pwa 2.vue-cli2需要手动安装register-service-worker依赖 npm install register-service-worker 3.在config/index.js中添加如下代码 pwa: { name: "3td-voice-web", themeColor: "#4DBA87", msTileColor: "#000000",
pwa要离线html么,正确使用PWA
weixin_29065791的博客
06-08 601
注：本文需要有一定的 PWA 基础1. 什么是 PWA？要知道一个东西是什么，我们通常可以从它的名字入手因此我们看下 PWA 的全称是： Progressive Web App回答 what 这种问题，重点在于名词，因此 PWA 是一个 APP，一个独立的、增强的、Web 实现的 APP要达到这样的目的，PWA 提供了一系列的技术 & 标准，如下图所示：具体每一项技术是什么就不再赘述了，感...
用PWA构建一个完全离线的网站
博文视点（北京）官方博客
08-31 2206
想象一下，你有能力去构建一个完全离线的网站，为用户提供几乎瞬间加载的体验，同时它对于不可靠的网络又是安全及富有弹性的。这听起来既不可能，又不可思议。无论你是否相信，绝大部分现代浏览器都已经内置提供了这些功能，只需要释放它们。当你利用这些强大的功能构建网站时，你便已经拥有了所谓的 PWA（Progressive Web App）。   PWA有什么优势 回溯到 1990 年的圣诞节，Tim...
PWA应用
热门推荐
点点的博客
09-30 1万+
一、什么是PWA应用 一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。 官网：https://developers.google.com/web/progressive-web-apps/ 是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。...
【PWA】用Service Worker实现离线应用
坚信万物皆可切的切图仔
10-21 754
没有离线缓存的应用，没有网络时就毛都访问不了。但是当我们利用service worker设置了离线缓存，那我们的应用就算没网也能访问，是不是很神奇，下面是其简单的用法。 想了解service worker相关知识，可以看我另一篇文章添加链接描述 1.注册service worker 调用navigator.serviceWorker.register方法即可在应用中注册需要用到的serviceWorker文件。 注意：要在页面加载完成后再进行注册，以防影响有网络情况下页面的加载速度！ // 注册 servi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天天进步2015

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值