如何Develop a PWA (Progressive Web App)：Claude Code 实战指南

PWAとは

PWA（Progressive Web App）はWebの技術でネイティブ应用に近い体験を提供するアプローチです。借助 Claude Code，Service Workerやマニフェストの配置を高效地实现可以。基本的使い方はClaude Code入門指南。

Web App Manifest

{
  "name": "My PWA Application",
  "short_name": "MyPWA",
  "description": "高速で信頼性の高いWebアプリケーション",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Service Worker の实现

// sw.ts
const CACHE_NAME = "app-cache-v1";
const STATIC_ASSETS = [
  "/",
  "/offline.html",
  "/styles/main.css",
  "/scripts/app.js",
  "/icons/icon-192.png",
];

// Cache static assets on install
self.addEventListener("install", (event: ExtendableEvent) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  // Activate immediately
  (self as any).skipWaiting();
});

// Delete old caches
self.addEventListener("activate", (event: ExtendableEvent) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter((key) => key !== CACHE_NAME)
          .map((key) => caches.delete(key))
      );
    })
  );
  (self as any).clients.claim();
});

缓存戦略

// Stale While Revalidate 戦略
self.addEventListener("fetch", (event: FetchEvent) => {
  const { request } = event;
  const url = new URL(request.url);

  // API 请求: Network First
  if (url.pathname.startsWith("/api/")) {
    event.respondWith(networkFirst(request));
    return;
  }

  // 静的アセット: Cache First
  if (request.destination === "image" || url.pathname.match(/\.(css|js)$/)) {
    event.respondWith(cacheFirst(request));
    return;
  }

  // HTML页面: Stale While Revalidate
  event.respondWith(staleWhileRevalidate(request));
});

async function networkFirst(request: Request): Promise<Response> {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch {
    const cached = await caches.match(request);
    return cached || new Response('{"error": "offline"}', {
      status: 503,
      headers: { "Content-Type": "application/json" },
    });
  }
}

async function cacheFirst(request: Request): Promise<Response> {
  const cached = await caches.match(request);
  if (cached) return cached;

  const response = await fetch(request);
  const cache = await caches.open(CACHE_NAME);
  cache.put(request, response.clone());
  return response;
}

async function staleWhileRevalidate(
  request: Request
): Promise<Response> {
  const cache = await caches.open(CACHE_NAME);
  const cached = await cache.match(request);

  const fetchPromise = fetch(request).then((response) => {
    cache.put(request, response.clone());
    return response;
  });

  return cached || fetchPromise;
}

オフライン页面

// オフライン検出组件
import { useState, useEffect } from "react";

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);

  return isOnline;
}

function OfflineBanner() {
  const isOnline = useOnlineStatus();

  if (isOnline) return null;

  return (
    <div className="bg-yellow-500 text-white text-center p-2">
      オフラインです。一部の機能が制限されています。
    </div>
  );
}

Service Worker の注册

// Service Worker注册
async function registerServiceWorker() {
  if (!("serviceWorker" in navigator)) {
    console.log("Service Worker not supported");
    return;
  }

  try {
    const registration = await navigator.serviceWorker.register(
      "/sw.js",
      { scope: "/" }
    );

    // 更新チェック
    registration.addEventListener("updatefound", () => {
      const newWorker = registration.installing;
      newWorker?.addEventListener("statechange", () => {
        if (
          newWorker.state === "installed" &&
          navigator.serviceWorker.controller
        ) {
          // 新しいバージョンが利用可能
          showUpdateNotification();
        }
      });
    });

    console.log("Service Worker registered:", registration.scope);
  } catch (error) {
    console.error("Registration failed:", error);
  }
}

通过 Claude Codeの实现プロンプト

PWA开发を让 Claude Code依頼する例です。性能相关内容请参阅代码分割・懒加载も合わせて参照して请。

既存のReactアプリをPWA化して。
- Web App Manifestの作成
- Service Workerでオフライン対応
- 静的アセットはCache First、APIはNetwork First
- アプリ更新通知の実装
- Lighthouse PWAスコア100点を目指して

PWA的详细信息请参阅web.dev PWA指南。Claude Codeの最新情報は官方文档中可以查看。

总结

PWAはWebとネイティブの良いところ取りができる技術です。借助 Claude Code，Service Workerの缓存戦略からオフライン支持まで、一貫したPWA实现を高效地進められます。