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

一、基础概念

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

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

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

二、Service Worker 深度

4. Service Worker 的生命周期包含哪些阶段？
   解析：注册(register) → 安装(install) → 等待(waiting) → 激活(activate) → 运行(fetch/sync)。更新时新旧SW并行需处理skipWaiting。

5. 如何手动触发Service Worker更新？
   解析：1. 文件内容变更（哈希变化） 2. 修改注册路径（如?v=2）3. 调用registration.update()

6. 解释install和activate事件的差异
   解析：

   • install：首次安装时触发，适合缓存静态资源
   • activate：旧SW被替换时触发，适合清理旧缓存

7. 如何实现强制跳过Service Worker等待期？
   解析：在install事件中调用self.skipWaiting()，并在主线程用Clients.claim()接管页面。

三、缓存策略实战

8. 列举3种常见的缓存策略并说明适用场景
   解析：

   • CacheFirst：静态资源（JS/CSS）
   • NetworkFirst：频繁更新内容（如新闻列表）
   • StaleWhileRevalidate：可容忍旧数据的API请求

9. 如何实现带版本号的静态资源缓存？
   解析：在install阶段缓存版本化资源：

   const CACHE_NAME