Weather Dashboard

概述

一个天气 PWA：装上后离线也能看上一次的缓存数据，弱网下先给骨架屏再渐进填充。

优雅降级

export function Weather({ data, loading }) {
  if (loading && !data) return <Skeleton />;
  if (!data) return <EmptyState />;
  return <Forecast {...data} />;
}

骨架屏不是「假装在加载」，而是给用户一个稳定的布局预期，避免内容跳动。

离线策略

• 首屏壳：Cache-First（秒开）。
• 天气数据：Stale-While-Revalidate（先给旧的，后台更新）。
• 图标 / 字体：长期缓存。

这套策略让 LCP 稳定在 1.2s 以内。