视图过渡让 PWA 比原生页面重载更流畅

为什么这对已安装的 PWA 很重要

用户安装 Web 应用，是因为期望获得原生级别的体验。每次生硬的页面加载都在提醒他们"这还是浏览器"。View Transitions API 通过提供流畅、硬件加速的视图间动画，消除了这种摩擦——这正是原生应用多年来的标准体验。

根据 MDN 的视图过渡入门指南，该 API 现已在主流浏览器中得到支持，使其成为任何关心感知性能的 PWA 的实用升级。

原生化体验检查清单

实施前，先确认这些基础条件：

• ✅ 你的 PWA 采用客户端路由（React、Vue、Svelte 或自定义 SPA）
• ✅ 你没有为每次路由变更使用服务端导航
• ✅ 用户已满足安装资格（Service Worker、Manifest、HTTPS）
• ✅ 你可以为旧浏览器提供 polyfill（可选但推荐）

按组件类型实施

简单 SPA 路由

document.startViewTransition(() => {
  router.navigate('/new-route');
});

框架适配器

大多数框架现在都有视图过渡集成：

• Vue Router: 内置视图过渡模式
• React: 使用 react-view-transitions 或包装 Navigation API
• SvelteKit: 内置 Svelte 过渡 + View Transitions API
• Angular: 与 Angular Router 集成

自定义 Service Worker 处理离线边缘场景

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      (async () => {
        const url = new URL(event.request.url);
        // SPA 回退或离线页面
        return caches.match(url) || fetch(event.request);
      })()
    );
  }
});

这如何影响安装转化

流畅的过渡不只是装饰——它是信任信号：

1. 感知加载时间下降: 用户认为 200ms 的动画过渡比 300ms 的白屏更快
2. 跳出率降低: 更少用户在"正在加载"状态下退出——即使实际上并没有在加载
3. 回访率提升: 当导航不会感觉像惩罚时，应用更值得再次打开

什么时候应该跳过视图过渡

并非每个过渡都需要动画：

• 提交敏感数据的表单（保持目的明确）
• 错误页面（生硬在这里是合适的）
• 非常快速的标签页切换（视图间间隔 <300ms）
• 宣称偏好已禁用的辅助功能场景

测量和验证

使用 Chrome DevTools 测试：

1. 打开 Performance 面板
2. 记录路由间的过渡
3. 在火焰图中查找 "ViewTransition"
4. 确认没有布局抖动或重复绘制

下一步

在启用过渡前添加跨浏览器检测：

if ('startViewTransition' in document) {
  // 启用视图过渡
} else {
  // 回退到标准路由
}

然后测量你实际的安装到回访率——实施前后对比。