PWA 缓存验证指南

祝你鸿运齐天
39 阅读4分钟

📋 验证步骤

第一步：构建项目（生成 Service Worker）

  • vue项目：npm run build
  • uniapp项目使用 HBuilderX 直接打包即可

第二步：启动本地 HTTPS 服务器

Service Worker 需要 HTTPS 或 localhost 才能工作。

方法 1：使用 serve（最简单）

# 安装 serve
npm install -g serve

# 进入构建产物目录
cd unpackage/dist/build/h5

# 启动本地服务器（默认 localhost:3000）
serve -s .

方法 2：使用 http-server（支持 HTTPS）

# 安装 http-server
npm install -g http-server

# 进入构建产物目录
cd unpackage/dist/build/h5

# 启动服务器（localhost:8080）
http-server -p 8080

第三步：在浏览器中验证

  1. 打开网站

    • 访问 http://localhost:8080（或你设置的端口）
    • 首次访问会注册 Service Worker

  2. 检查 Service Worker 是否注册

    • 打开 Chrome DevTools（F12）
    • 进入 Application 标签页
    • 左侧菜单找到 Service Workers
    • 应该看到状态为 activated and is running

  3. 查看缓存内容

    • 在 Application 标签页
    • 左侧菜单找到 Cache Storage
    • 展开后应该看到：
      • workbox-precache-v2-...（预缓存的应用文件）
      • img-cache-oss（图片缓存，首次访问图片后才会出现）
      • video-cache-oss（视频缓存，首次访问视频后才会出现）

  4. 验证图片缓存

    • 在网站中访问一张来自 oss.xxx.com 的图片
    • 打开 Network 标签页，刷新页面
    • 找到该图片请求，查看 Size 列
    • 应该显示 (disk cache) 或 (ServiceWorker)，而不是文件大小
    • 在 Cache Storage → img-cache-oss 中应该能看到该图片

  5. 验证视频缓存

    • 在网站中播放一个来自 oss.xxx.com 的视频
    • 等待视频加载完成
    • 在 Network 标签页，找到该视频请求
    • 应该显示 (disk cache) 或 (ServiceWorker)
    • 在 Cache Storage → video-cache-oss 中应该能看到该视频

  6. 验证离线功能

    • 在 Network 标签页，勾选 Offline（模拟断网）
    • 刷新页面
    • 页面应该能正常打开（因为 HTML/JS/CSS 已预缓存）
    • 已缓存的图片/视频应该能正常显示/播放

  7. 验证二次刷新速度

    • 关闭 Offline 模式
    • 刷新页面（F5）
    • 在 Network 标签页，查看加载时间
    • 已缓存的资源应该显示 0ms 或极短时间
    • 页面应该几乎瞬间加载完成

🔍 详细检查点

检查 Service Worker 文件

  • 在浏览器地址栏输入：http://localhost:8080/sw.js
  • 应该能看到 Service Worker 的 JavaScript 代码（不是 404）

检查 Manifest 文件

  • 在浏览器地址栏输入：http://localhost:8080/manifest.webmanifest
  • 应该能看到 JSON 格式的 manifest 配置

控制台日志

  • 打开 Console 标签页
  • 应该能看到 Service Worker 注册成功的日志（如果有配置日志输出）

⚠️ 常见问题

1. Service Worker 没有注册

  • 检查：确保使用 localhost 或 127.0.0.1 访问（不能用 file:// 协议）
  • 检查：确保构建时 PWA 插件正常工作（查看构建日志）
  • 解决：清除浏览器缓存，重新构建并访问

2. 图片/视频没有缓存

  • 检查：确保图片/视频 URL 的域名是 oss.xxx.com
  • 检查：确保文件扩展名匹配（图片：png/jpg/webp/gif/svg，视频：mp4/webm/mov/m4v）
  • 检查：在 Network 标签页查看请求，确认响应状态码是 200
  • 检查：确保 CDN 允许跨域（CORS 头）

3. 缓存数量限制

  • 图片缓存最多 2000 个
  • 视频缓存最多 20 个
  • 超过限制后，旧的缓存会被自动清理（LRU 策略）

4. 开发环境看不到缓存

  • 重要：npm run dev 开发模式通常不会生成 Service Worker
  • 必须：需要构建后（npm run build 或 HBuilderX 构建）才能看到缓存效果

📊 性能对比

首次访问（无缓存）

  • 所有资源从 CDN 加载
  • 加载时间：正常网络速度

二次访问（有缓存）

  • HTML/JS/CSS：从 Service Worker 缓存加载（几乎瞬间）
  • 图片/视频：从 Service Worker 缓存加载（几乎瞬间）
  • 加载时间：显著减少，页面几乎秒开

离线访问（断网）

  • 已缓存的资源：正常显示/播放
  • 未缓存的资源：无法加载（但页面框架可用）

🎯 验证清单

  • Service Worker 已注册并激活
  • Cache Storage 中有 workbox-precache-v2-... 缓存
  • 访问图片后，img-cache-oss 缓存中有该图片
  • 访问视频后，video-cache-oss 缓存中有该视频
  • 断网后页面能正常打开
  • 断网后已缓存的图片/视频能正常显示/播放
  • 二次刷新时，资源显示 (disk cache) 或 (ServiceWorker)
  • 二次刷新时，页面加载速度明显加快
avatar
文章
阅读
粉丝