移动端适配与 PWA

2025 年全球移动端流量占比超过 60%，但很多 Web 应用仍然是"桌面优先、移动凑合"。移动端适配不仅仅是"屏幕变小"——触摸交互、网络环境、性能预算、离线能力都与桌面端截然不同。PWA（Progressive Web App）更进一步，让 Web 应用具备原生 App 的体验——安装到主屏幕、离线访问、推送通知。本章系统讲解 Next.js 的移动端适配策略和 PWA 实现。

1. 移动端适配基础

1.1 移动端与桌面端的核心差异

1.2 Viewport 配置

Next.js App Router 中配置 viewport：

// app/layout.tsx
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,        // 禁止用户缩放（表单场景避免 iOS 自动缩放）
  userScalable: false,
  themeColor: '#ffffff',
}

1.3 触摸交互设计

1.4 安全区域适配

现代手机有刘海、挖孔、圆角等异形屏幕，需要使用 env() 函数适配：

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.header {
  padding-top: env(safe-area-inset-top, 0px);
}

Tailwind v4 中可以用 pb-[env(safe-area-inset-bottom)] 内联使用。

2. 移动端性能优化

2.1 移动端性能预算

2.2 响应式图片

不同设备应该加载不同尺寸的图片：

Next.js <Image> 组件自动处理：

• 根据设备 DPR 生成 srcset
• 懒加载视口外的图片
• 自动转换为 WebP/AVIF
• 根据容器宽度选择最优尺寸

2.3 移动端特有的性能优化

3. PWA 基础

3.1 什么是 PWA

PWA 是一种让 Web 应用具备原生 App 体验的技术集合：

3.2 PWA 的三大要素

3.3 PWA 在 2025 年的现状

iOS 的限制：

• Storage 限制（50MB 缓存）
• 后台执行受限
• 推送通知需要用户从主屏幕打开
• 没有完整的 Web App Manifest 支持

4. Web App Manifest

4.1 Manifest 配置

Next.js App Router 中可以通过 app/manifest.ts 生成：

4.2 显示模式

推荐 standalone——用户感觉不到是在浏览器中运行。

4.3 图标要求

5. Service Worker

5.1 Service Worker 的作用

Service Worker 是运行在浏览器后台的 JavaScript 线程——它拦截网络请求，实现离线缓存、后台同步、推送通知。

用户请求 → Service Worker 拦截
├── 缓存命中 → 直接返回缓存（离线可用）
├── 缓存未命中 + 在线 → 请求网络 → 缓存结果 → 返回
└── 缓存未命中 + 离线 → 返回离线页面

5.2 缓存策略

5.3 Next.js 的 Service Worker 方案

推荐 @serwist/next——它是 next-pwa 的现代继任者，与 App Router 兼容性最好。

5.4 预缓存 vs 运行时缓存

6. 离线体验设计

6.1 离线策略

6.2 离线数据同步

用户离线操作（创建/修改/删除）
    ↓
操作存入 IndexedDB 队列
    ↓
网络恢复
    ↓
Background Sync API 触发
    ↓
逐个提交离线操作到服务器
    ↓
处理冲突（Last Write Wins / 合并）

6.3 离线 UI 反馈

7. 推送通知

7.1 Web Push 架构

服务端发送推送请求
    ↓
Push Service（Google FCM / Apple APNs）
    ↓
用户设备接收
    ↓
Service Worker 触发 push 事件
    ↓
显示系统通知

7.2 推送通知的最佳实践

7.3 权限请求时机

8. PWA 适用性评估

8.1 何时选择 PWA

✅ 适合 PWA 的场景：

• 内容消费型应用（新闻、博客、文档）
• 轻量工具型应用（待办、记账、翻译）
• 电商（浏览 + 收藏 + 推送）
• 需要跨平台但预算有限

❌ 不适合 PWA 的场景：

• 需要深度系统集成（相机高级功能、蓝牙）
• 高性能图形（3D 游戏）
• 必须在应用商店分发
• iOS 用户为主（PWA 限制较多）

8.2 PWA vs 原生 App vs 混合 App

本章小结

• 移动优先：触摸交互 ≥ 44px 点击区域、安全区域适配、移动端性能预算更严格
• 响应式图片：Next.js <Image> 自动处理 srcset、格式转换、懒加载
• PWA 三要素：HTTPS + Web App Manifest + Service Worker
• 缓存策略：静态资源 Cache First，API 数据 Network First，非关键数据 Stale While Revalidate
• Service Worker：推荐 @serwist/next（next-pwa 继任者）
• 离线设计：操作存入 IndexedDB → 网络恢复后 Background Sync 同步
• 推送通知：延迟请求权限、说明价值、控制频率
• 选型：内容/工具类应用适合 PWA，需要深度系统集成的选择原生/RN/Flutter