PWA 与 Service Worker

PWA

PWA = 渐进式 Web 应用（目标），想要网页像 APP 一样：快、离线可用、可安装桌面、推送通知。

Service Worker

Service Worker = 实现 PWA 这些能力的底层技术（工具）

Service Worker 是浏览器提供的一个独立线程脚本，负责：
拦截请求
管理缓存（CacheStorage）
离线运行
后台同步、消息推送

二者关系

PWA 是产品目标，Service Worker 是技术实现。

PWA 优势

# 可安装
浏览器弹出安装提示，一键添加到 手机桌面 / PC 开始菜单、任务栏、桌面
有独立应用图标，启动后 无浏览器地址栏、标签页（全屏 / 独立窗口）
可出现在系统应用列表、多任务切换器中

# 离线 / 弱网可用
Service Worker 缓存页面、样式、脚本、图片
断网时仍能打开并使用基础功能
弱网下优先读缓存，联网后自动同步

# 系统级推送通知
需用户授权，应用关闭也能收到系统通知
点击通知可直接打开 PWA

# 响应式 + 渐进增强
一套代码自动适配手机、平板、PC 屏幕
低端浏览器降级为普通网页；高端设备提供完整原生体验

# 安全与自动更新
必须运行在 HTTPS（本地开发 localhost 除外）
后台自动更新资源，用户无感知

PWA 应用在 PC 端和移动端的表现特征

PWA（渐进式 Web 应用）在移动端和 PC 端的核心特征一致（可安装、离线可用、推送通知、响应式、安全、自动更新），但在窗口形态、系统集成、交互方式、启动体验上有明显差异。

# 移动端（手机 / 平板）特有表现
用 standalone / fullscreen，隐藏所有浏览器 UI，全屏沉浸
可自定义 启动屏（Splash Screen）、图标、主题色、横竖屏锁定
从桌面图标点击启动，像原生 App 一样独立运行
支持 返回键、手势导航、分享、文件选择、相机 / 地理位置（需权限）
iOS：添加到主屏幕后，在独立容器运行，但 推送、后台同步限制较多
Android：与系统深度集成，支持 最近任务、分屏、桌面快捷方式
触摸优先：按钮、列表、滑动适配手指操作
支持 横 / 竖屏自动切换

# PC 端（Windows/macOS/Linux）特有表现
窗口与多窗口：
独立桌面窗口，可 缩放、最小化、最大化、多开窗口
支持 窗口置顶、分屏、快捷键
可固定到 任务栏、开始菜单、桌面，支持快捷菜单（Jump List）
支持 文件拖放、剪贴板、打印、右键菜单
可注册为 文件打开方式、协议处理（mailto:// 等）
后台运行能力更强，后台同步、定时同步更稳定

# 对比
特征     移动端                             PC 端
窗口形态 全屏 / 独立，无浏览器 UI             桌面窗口，可缩放、多开
启动体验 桌面图标 → 启动屏 → 全屏             桌面 / 任务栏 → 标准窗口
系统集成 分享、相机、位置、推送（iOS 有限制）    拖放、剪贴板、打印、文件关联、快捷键
交互方式 触摸、手势、横竖屏                    鼠标、键盘、精确定位、多窗口
后台能力 受系统限制（iOS 严格）               更稳定，后台同步 / 定时更强
布局特点 单列、卡片、简洁                     多列、复杂面板、工具栏

---

Service Worker 基础要点（续）

拦截请求、离线缓存、后台运行。

Service Worker 是什么？

Service Worker 是一个运行在浏览器后台、独立于页面的脚本线程，
可以长期存活、拦截网络请求、操作缓存，实现离线访问、页面加速、后台同步、消息推送等功能，是 PWA 的核心。

# 换句话说：
它不在主线程，不阻塞页面渲染
像一个浏览器和服务器之间的本地代理
能拦截所有请求：HTML、JS、CSS、图片、接口
能自由操作 Cache API
页面关了它还能在后台干活
必须 HTTPS 或 localhost 才能运行

# 话术
Service Worker 是浏览器提供的一个独立后台线程脚本，
可以拦截页面的所有网络请求，配合 Cache API 实现资源缓存和离线访问，
还支持后台同步、消息推送，是实现 PWA（渐进式 Web 应用）的核心技术。
它运行在独立线程，不阻塞主线程，需要 HTTPS 环境，生命周期与页面分离。

核心功能？

# 1. 拦截请求（最核心）
可以劫持页面的任何 fetch/XHR 请求，自己决定：
直接返回缓存
发请求拿新数据
先缓存再更新
离线时返回兜底内容

# 2. 离线访问（Offline First）
断网依然能打开页面、展示缓存内容，不像普通网页直接报错。

# 3. 静态资源缓存 & 秒开页面
把 JS/CSS/ 图片 / HTML 缓存起来，二次访问瞬间打开。

# 4. 后台同步（Background Sync）
用户断网提交表单，联网后 Service Worker 自动在后台补发请求。

# 5. 消息推送（Web Push）
即使关闭页面，也能接收服务器的推送通知（类似 App 推送）。

# 6. 缓存策略统一管理
一套逻辑控制所有资源：缓存优先、网络优先、先缓存后更新等。

工作流程

页面注册 Service Worker ->
浏览器后台安装、激活 ->
开始拦截所有请求 ->
配合 Cache API / IndexedDB 做缓存 ->
实现离线、加速、后台同步