PWA 入门指南：从原理到实战，手把手教你给网页添加离线功能

文章目录

一、PWA新手灵魂三问

PWA和普通网页的区别？
- 普通网页：像图书馆的书，必须在馆内看（联网），看完就放回（关浏览器消失）。
- PWA：像借回家的书，没网也能看（离线），放在书桌上（桌面图标），还能收到新书通知（推送）。
为什么公司要用PWA？
- 省钱：不用养iOS和安卓两个开发团队，一套代码搞定。
- 留用户：用户不用下载App，点击桌面图标就能用，打开频率更高（比如校园外卖小程序）。
学PWA能做什么？
- 小任务：给实习项目加离线404页面、修改桌面图标。
- 大价值：优化首页加载速度，让用户没网也能看内容，提升团队KPI。

二、必懂的PWA核心知识

1. Service Worker：像校园快递站的「代收管家」

工作流程图解：

graph TD
A[你打开网页] --> B[Service Worker安装]
B --> C[Service Worker囤货（缓存资源）]
C --> D[你断网刷新]
D --> E[Service Worker直接给你缓存的内容]

必做实验：
1. 用Chrome打开PWA测试站
2. 按F12打开开发者工具→Network→勾选“Offline”
3. 刷新页面，发现依然能看到内容（截图保存，周报可写）。

2. Web App Manifest：网页的「学生证」

关键信息填写指南：

字段	填写示例（校园论坛PWA）	作用
`name`	“校园互助论坛”	应用全称（设置里显示）
`short_name`	“互助论坛”	桌面图标下的短名
`icons`	上传192x192和512x512的校徽图片	桌面图标和启动页图标
`display`	`standalone`	全屏显示，隐藏浏览器地址栏

操作步骤：在Vue项目中找到public/manifest.json，修改name和icons，重新运行后，手机扫码访问，截图桌面图标效果。

三、项目中的PWA实战（从0到1跟做）

1. 场景：给校园二手交易网页加离线功能

（1）初始化项目

# 1. 创建Vue项目（起名second-hand）
vue create second-hand

# 2. 进入项目
cd second-hand

# 3. 添加PWA功能（重点！）
vue add pwa

执行后，项目会自动生成：
- public/manifest.json（图标配置）
- src/service-worker.js（离线逻辑）

（2）修改图标

把校徽图片命名为icon-192x192.png和icon-512x512.png，放到public/icons/目录（没有就新建）。

修改manifest.json中的icons路径：

"icons": [
  {
    "src": "icons/icon-192x192.png",
    "sizes": "192x192"
  },
  {
    "src": "icons/icon-512x512.png",
    "sizes": "512x512"
  }
]

（3）测试离线功能

运行项目：npm run serve
手机扫码访问，点击“添加到主屏幕”→断网→打开桌面图标，截图显示离线状态下的页面（如二手书列表）。

四、常见踩坑指南

1. 问题：手机上找不到「添加到主屏幕」按钮

解决方案：在网页中加一行提示代码（放在首页显眼位置）：

<div style="text-align:center; margin:20px;">
  <button id="installBtn">📱 点击添加到手机桌面</button>
</div>

JS逻辑（放在main.js）：

// 检测浏览器是否支持PWA
window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault(); // 阻止默认提示
  const installBtn = document.getElementById('installBtn');
  installBtn.addEventListener('click', () => {
    event.prompt(); // 点击按钮后显示安装提示
  });
});

2. 问题：修改图标后没生效

三步排查法：
1. 检查图片路径是否正确（如public/icons/下）。
2. 清除浏览器缓存（按Ctrl+Shift+Delete）。
3. 在Chrome DevTools→Application→Manifest中，点击“Update manifest”。

3. 问题：项目用Nuxt.js，怎么加PWA？

Nuxt专属命令：

# 安装Nuxt PWA模块
npm install @nuxtjs/pwa

# 在nuxt.config.js中添加配置
export default {
  modules: ['@nuxtjs/pwa'],
  pwa: {
    manifest: {
      name: '公司项目PWA',
      short_name: '项目PWA'
      // 其他配置...
    }
  }
}

五、怎么写PWA成果？（模板参考）

 1. **PWA基础学习**  
   - 掌握Service Worker的离线缓存原理，完成校园二手交易网页的离线首页开发。  
   - 实践成果：断网状态下仍能显示商品列表，首屏加载速度提升40%（Lighthouse测试截图附后）。  

2. **项目应用**  
   - 给公司项目修改Manifest配置，将桌面图标替换为公司LOGO，添加“添加到桌面”引导按钮。  
   - 遇到问题：iOS设备不自动提示安装，通过添加自定义按钮解决（见代码片段）。

六、面试加分技巧（PWA相关）

简历关键词：
- 在项目经验中写：“实现PWA离线缓存功能，优化首屏加载时间XX毫秒”。
面试常见问题应答：
- 问：“PWA和普通网页的区别？”答：“PWA像App一样能离线用、放桌面，比如我实习时做的二手交易网页，用户没网也能看已加载的商品，不用重新刷新。”
加分反问：
- “贵公司的PWA项目目前用的是Workbox还是框架自带插件？”（显示你了解前沿工具）

最后：PWA没想象中难，就像从“只能在教室上课”到“可以带书回宿舍自学”，掌握了离线能力，你的前端技能就“自由”啦～ 😊