大厂前端研发岗位PWA面试题及解析

文章目录

一、基础概念
二、Service Worker 深度
三、缓存策略实战
四、高级能力
五、性能与优化
六、调试与部署
七、安全与更新
八、跨平台兼容
九、架构设计
十、综合场景
十一、前沿扩展

---

一、基础概念

什么是PWA？列举3个核心特性
解析：渐进式网页应用。核心特性：离线可用、类原生体验（安装图标/全屏）、后台同步。本质是网页+增强技术集合。

Service Worker 是什么？它为什么是PWA的核心？
解析：浏览器独立线程，可拦截网络请求。核心能力：实现离线缓存、消息推送（不依赖页面打开），是PWA的“后台服务”。

Manifest.json 文件的作用是什么？至少写出5个关键字段
解析：定义应用安装到桌面时的表现。关键字段：name, short_name, start_url, icons, display（standalone/fullscreen）, theme_color。

---

二、Service Worker 深度

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阶段缓存版本化资源：

const CACHE_NAME = 'v1-static';
caches.open(CACHE_NAME).then(cache => cache.addAll(['/app.123.css']));

用户访问新版本时，如何清理旧缓存？
解析：在activate事件中遍历所有缓存，删除非当前版本：

caches.keys().then(keys => keys.forEach(key => {
              
  if (key !== CURRENT_CACHE) caches.delete(key);
}));

---

四、高级能力

如何实现PWA的后台数据同步？
解析：使用Background Sync API：

注册sync事件：navigator.serviceWorker.ready.then(reg => reg.sync.register('sync-data'))
SW监听sync事件发起请求

描述Web Push的完整流程
解析：

用户授权通知权限
生成VAPID密钥
订阅推送（registration.pushManager.subscribe()）
服务端调用Push API发送通知
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的错误？
解析：

SW中监听error事件
主线程用navigator.serviceWorker.controller.postMessage通信上报

---

七、安全与更新

PWA为什么必须使用HTTPS？
解析：Service Worker可拦截请求，若在HTTP环境易被中间人攻击篡改。

解释Same-Origin Policy对Service Worker的影响
解析：SW脚本必须与页面同源，但可通过importScripts()加载跨域脚本（需CORS）。

如何实现无缝更新应用？
解析：

SW更新后不立即激活，提示用户刷新
使用postMessage通知页面有更新，引导用户重启

---

八、跨平台兼容

iOS对PWA的支持有哪些限制？
解析：

无后台同步/推送
50MB存储上限
7天无访问可能清除数据

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

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

---

九、架构设计

SSR（服务端渲染）如何与PWA结合？
解析：

首屏SSR保证SEO和速度
加载后注册SW接管后续路由
动态内容通过SW缓存API响应

在微前端架构中如何管理Service Worker？
解析：

主应用注册主SW
子应用按需注册自己的SW（需路径隔离）
或统一由主SW管理路由规则（importScripts子应用策略）

---

十、综合场景

设计一个离线优先的新闻阅读PWA
解析：

Shell缓存：HTML/CSS/JS
策略：首页列表NetworkFirst，文章页CacheFirst+后台更新
存储：IndexedDB存文章内容，Cache存图片

用户反馈“安装到桌面”按钮不出现，如何排查？
解析：

检查manifest是否配置正确
是否满足安装条件（至少两次访问、HTTPS）
监听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）

---