vue应用实现离线能力需落地pwa标准，核心是配置web app manifest文件和注册service worker，分层设置缓存策略，结合indexeddb和localstorage处理离线数据，并通过chrome devtools与lighthouse验证。
让 Vue 应用具备离线访问能力，核心在于落地 PWA（Progressive Web App）标准，而不是简单“打包带走”或本地打开 HTML。关键不是去掉网络依赖，而是让浏览器主动缓存资源、拦截请求、智能响应——即使断网也能加载页面、展示数据、完成基础操作。
配置 Web App Manifest 文件
这是让用户“安装”应用、获得原生感的第一步。文件必须放在 public/manifest.json，且需在 public/index.html 的 中显式引用：<link rel="manifest" href="/manifest.json">
- name 和 short_name 要简洁可读，影响添加到主屏幕时的显示名称
-
icons 至少提供 192×192 和 512×512 两种尺寸 PNG 图标，存放在
public/img/icons/下 -
start_url 建议设为
"./"或"/"，确保从主屏幕启动时跳转正确入口 -
display 推荐
"standalone"，隐藏浏览器地址栏，更像原生应用 - theme_color 和 background_color 分别控制顶部状态栏和白屏期背景色，提升首屏体验
注册并配置 Service Worker
Service Worker 是离线能力的执行引擎，它运行在独立线程，能拦截 fetch 请求、管理缓存、控制更新逻辑。
- Vue CLI 项目：运行
vue add pwa，自动生成registerServiceWorker.js并注入 main 入口 - Vite 项目：安装
vite-plugin-pwa，在vite.config.ts中启用插件，并配置globPatterns指定需预缓存的静态资源路径 - 缓存策略要分层：HTML 页面建议
StaleWhileRevalidate（先返回缓存，后台更新），图片和字体用CacheFirst，API 接口推荐NetworkFirst并设置超时兜底 - 务必在 HTTPS 环境（或 localhost）下测试，否则 Service Worker 不会激活
处理离线数据与用户交互
静态资源可缓存，但用户操作产生的数据（如表单提交、列表筛选）需要额外设计。
- 前端请求库（如 axios 或 vue-resource）可加拦截器：检测
navigator.onLine，GET 请求优先走缓存，POST/PUT 则存入 IndexedDB 待联网后同步 - 对关键业务数据（如用户登录态、常用配置），初始化时主动存入 localStorage 或 IndexedDB，离线时直接读取渲染
- 界面需明确反馈网络状态：顶部加提示条（“当前离线，部分功能受限”），禁用提交按钮，用图标或颜色区分在线/离线操作项
- 避免强依赖实时接口的路由守卫——比如登录校验若完全靠后端接口，离线时将无法进入首页，应允许缓存有效期内的 token 继续访问
验证与调试要点
离线能力是否真正生效，不能只靠“拔网线”，要用工具链确认。
- Chrome DevTools → Application → Manifest 查看清单是否解析成功；Service Workers 标签页确认已注册、正在运行
- 勾选 “Offline” 模拟断网，刷新页面，观察是否仍能加载 HTML、CSS、JS 和图标
- 在 Network 面板中查看请求是否被 Service Worker 拦截（Status 显示
from ServiceWorker） - 使用 Lighthouse 运行 PWA 审计，重点关注 “Is installable”、“Works offline”、“Has a registered Service Worker” 三项评分
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
