Next.js PWA 开发指南

Progressive Web App (PWA) 结合了 Web 和原生应用的优势，为用户提供接近原生应用的体验。本文将详细介绍如何使用 Next.js 和 Serwist 构建现代化的 PWA 应用。

什么是 PWA？

PWA 是一种使用现代 Web 技术构建的应用程序，具有以下特性：

可靠性: 即使在网络不稳定的情况下也能快速加载
快速: 响应用户交互，提供流畅的体验
参与性: 感觉像原生应用，支持推送通知等功能

技术选型

Serwist vs Workbox

在选择 Service Worker 管理库时，我们选择了 Serwist 而不是传统的 Workbox：

现代化: 基于 ES6+ 语法，更好的 TypeScript 支持
简化配置: 更直观的 API 设计
Next.js 优化: 专门为 Next.js 优化的集成方案

核心配置

// next.config.ts
import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  swSrc: "app/sw.ts",
  swDest: "public/sw.js",
  cacheOnNavigation: true,
  reloadOnOnline: true,
  disable: process.env.NODE_ENV === "development",
});

export default withSerwist(config);

Service Worker 优化策略

缓存策略

我们采用了分层的缓存策略：

文档内容: NetworkFirst - 优先获取最新内容，离线时使用缓存
静态资源: CacheFirst - 长期缓存 JS、CSS、字体文件
图片资源: CacheFirst - 智能压缩和缓存管理
API 响应: NetworkFirst - 短期缓存，确保数据新鲜度

// app/sw.ts
const optimizedCache = [
  {
    matcher: ({ url }: { url: URL }) => /\.(html|json)$/.test(url.pathname),
    handler: new NetworkFirst({
      cacheName: "documents-cache",
      networkTimeoutSeconds: 3,
      plugins: [
        new ExpirationPlugin({
          maxEntries: 100,
          maxAgeSeconds: 24 * 60 * 60, // 1天
        }),
      ],
    }),
  },
  // ... 更多策略
];

离线体验

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: optimizedCache,
  fallbacks: {
    entries: [
      {
        url: "/offline",
        matcher: ({ request }) => request.destination === "document",
      },
    ],
  },
});

性能优化

构建优化

代码分割: 智能的 chunk 分割策略
预取优化: 关键资源预加载
Bundle 分析: 使用 @next/bundle-analyzer 监控包大小

运行时优化

预缓存: 关键页面和资源的预缓存
智能更新: 后台更新机制
资源压缩: Gzip/Brotli 压缩

最佳实践

渐进增强

从基础的 Web 应用开始，逐步添加 PWA 功能：

// 检测 PWA 支持
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

用户体验

提供安装提示
离线状态指示
更新通知

测试策略

Chrome DevTools Lighthouse 审计
离线功能测试
不同设备和网络条件测试

部署建议

静态部署

推荐使用 Vercel 或 Netlify：

# 构建静态文件
npm run build

# 部署到 Vercel
vercel --prod

服务器配置

# nginx 配置
location /sw.js {
  add_header Cache-Control "no-cache";
  proxy_cache_bypass $http_pragma;
  proxy_cache_revalidate on;
}

总结

通过 Next.js 和 Serwist 的结合，我们可以轻松构建出功能强大、性能优异的 PWA 应用。关键在于：

选择合适的缓存策略
优化构建和运行时性能
提供良好的用户体验
持续监控和优化

希望这个指南对您的 PWA 开发有所帮助！