前端研发岗位PWA相关面试题总结和解析

什么是PWA？列举3个核心特性
解析：渐进式网页应用。核心特性：离线可用、类原生体验（安装图标/全屏）、后台同步。本质是网页+增强技术集合。
Service Worker 是什么？它为什么是PWA的核心？
解析：浏览器独立线程，可拦截网络请求。核心能力：实现离线缓存、消息推送（不依赖页面打开），是PWA的"后台服务"。
Manifest.json 文件的作用是什么？至少写出5个关键字段
解析：定义应用安装到桌面时的表现。关键字段：name, short_name, start_url, icons, display（standalone/fullscreen）, theme_color。

Service Worker 的生命周期包含哪些阶段？
解析：注册(register) → 安装(install) → 等待(waiting) → 激活(activate) → 运行(fetch/sync)。更新时新旧SW并行需处理skipWaiting。
如何手动触发Service Worker更新？
解析：1. 文件内容变更（哈希变化） 2. 修改注册路径（如?v=2）3. 调用registration.update()
解释install和activate事件的差异
解析：
- install：首次安装时触发，适合缓存静态资源
- activate：旧SW被替换时触发，适合清理旧缓存
如何实现强制跳过Service Worker等待期？
解析：在install事件中调用self.skipWaiting()，并在主线程用Clients.claim()接管页面。

列举3种常见的缓存策略并说明适用场景
解析：
- CacheFirst：静态资源（JS/CSS）
- NetworkFirst：频繁更新内容（如新闻列表）
- StaleWhileRevalidate：可容忍旧数据的API请求
如何实现带版本号的静态资源缓存？
解析：在install阶段缓存版本化资源：
js 复制代码
```
const CACHE_NAME = 'v1-static';
caches.open(CACHE_NAME).then(cache => cache.addAll(['/app.123.css']));
```
用户访问新版本时，如何清理旧缓存？
解析：在activate事件中遍历所有缓存，删除非当前版本：
js 复制代码
```
caches.keys().then(keys => keys.forEach(key => {
  if (key !== CURRENT_CACHE) caches.delete(key);
}));
```

如何实现PWA的后台数据同步？
解析：使用Background Sync API：
1. 注册sync事件：navigator.serviceWorker.ready.then(reg => reg.sync.register('sync-data'))
2. SW监听sync事件发起请求
描述Web Push的完整流程
解析：
1. 用户授权通知权限
2. 生成VAPID密钥
3. 订阅推送（registration.pushManager.subscribe()）
4. 服务端调用Push API发送通知
5. SW监听push事件展示通知
PWA如何实现类原生应用的启动动画？
解析：使用manifest中的splash_screen配置 + CSS媒体查询@media (display-mode: standalone)定制启动样式。

PWA的首屏加速有哪些手段？
解析：
- App Shell模型（缓存壳资源）
- 预渲染关键路由
- 使用<link rel=preload>提前加载
如何确保缓存资源及时更新？
解析：
- 策略：对HTML使用NetworkFirst
- 版本控制：修改资源URL或查询参数
- 手动API：cache.put()动态更新

Chrome DevTools中如何模拟离线环境？
解析：
- Network面板勾选"Offline"
- Application → Service Workers → 勾选"Offline"
如何捕获Service Worker的错误？
解析：
1. SW中监听error事件
2. 主线程用navigator.serviceWorker.controller.postMessage通信上报

PWA为什么必须使用HTTPS？
解析：Service Worker可拦截请求，若在HTTP环境易被中间人攻击篡改。
解释Same-Origin Policy对Service Worker的影响
解析：SW脚本必须与页面同源，但可通过importScripts()加载跨域脚本（需CORS）。
如何实现无缝更新应用？
解析：
1. SW更新后不立即激活，提示用户刷新
2. 使用postMessage通知页面有更新，引导用户重启

如何检测当前环境是否支持PWA？
解析：

js 复制代码

if ('serviceWorker' in navigator && 'caches' in window) {
  // 支持核心PWA能力
}

SSR（服务端渲染）如何与PWA结合？
解析：
1. 首屏SSR保证SEO和速度
2. 加载后注册SW接管后续路由
3. 动态内容通过SW缓存API响应
在微前端架构中如何管理Service Worker？
解析：
- 主应用注册主SW
- 子应用按需注册自己的SW（需路径隔离）
- 或统一由主SW管理路由规则（importScripts子应用策略）

设计一个离线优先的新闻阅读PWA
解析：
- Shell缓存：HTML/CSS/JS
- 策略：首页列表NetworkFirst，文章页CacheFirst+后台更新
- 存储：IndexedDB存文章内容，Cache存图片
用户反馈"安装到桌面"按钮不出现，如何排查？
解析：
1. 检查manifest是否配置正确
2. 是否满足安装条件（至少两次访问、HTTPS）
3. 监听beforeinstallprompt事件是否被阻止
PWA的哪些特性可能导致高内存消耗？如何优化？
解析：
- 问题：大量缓存/IndexedDB数据、长期运行SW
- 优化：设置缓存上限、定期清理、用Web Workers分担计算

解释Project Fugu计划对PWA的意义
解析：谷歌主导的跨平台能力项目，使PWA可访问蓝牙、文件系统等原生API，缩小与原生应用差距。
WebAssembly如何增强PWA性能？
解析：将C++/Rust代码编译为.wasm，处理音视频编辑/3D渲染等重型任务，突破JS性能瓶颈。
预测PWA的未来技术方向
解析：
- 更深度OS集成（通知分组/快捷操作）
- 跨设备同步（通过Web Share API）
- 机器学习（WebML+TensorFlow.js）