大厂前端研发岗位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）
- Netwo