移动端适配：响应式设计、PWA 与跨端方案对比

/* CSS Grid 实现响应式三栏布局 */
.timeline-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100vw;
}

/* ≥768px 平板：左栏导航 + 主时间线 */
@media (min-width: 768px) {
  .timeline-layout {
    grid-template-columns: 220px 1fr;
  }
}

/* ≥1024px 桌面：左导航 + 时间线 + 右推荐栏 */
@media (min-width: 1024px) {
  .timeline-layout {
    grid-template-columns: 220px minmax(0, 600px) 300px;
    justify-content: center;
  }
}

/* 适配 iPhone 安全区与底部指示条 */
.post-input-bar {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 下拉刷新替代桌面端的刷新按钮 */
.ptr {
  touch-action: pan-x; /* 保留横向滑动 */
}

// service-worker.js
const CACHE_NAME = 'miniblog-v1';
const PRECACHE_URLS = [
  '/',
  '/app.js',
  '/styles/main.css',
  '/manifest.webmanifest'
];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME).then((cache) => {
    return cache.addAll(PRECACHE_URLS);
  }));
  self.skipWaiting();
});

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET') return;

  // 图片走 Cache-First，命中即返回
  if (request.destination === 'image') {
    event.respondWith(caches.match(request).then((hit) => {
      return hit || fetch(request).then((resp) => {
        const clone = resp.clone();
        caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
        return resp;
      });
    }));
    return;
  }

  // API 走 Network-First，失败时回退缓存
  if (request.url.includes('/api/')) {
    event.respondWith(
      fetch(request)
        .then((resp) => {
          const clone = resp.clone();
          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
          return resp;
        })
        .catch(() => caches.match(request))
    );
    return;
  }

  // 页面壳走 Stale-While-Revalidate
  event.respondWith(
    caches.match(request).then((cached) => {
      const network = fetch(request).then((resp) => {
        caches.open(CACHE_NAME).then((cache) => cache.put(request, resp.clone()));
        return resp;
      });
      return cached || network;
    })
  );
});

// Go 后端推送订阅管理
type PushSubscription struct {
	Endpoint   string `json:"endpoint"`
	Expiration int64  `json:"expirationTime"`
	Keys       struct {
		P256dh string `json:"p256dh"`
		Auth   string `json:"auth"`
	} `json:"keys"`
	UserID int64 `json:"user_id"`
}

// 当用户被 @ 或 被点赞时，异步触发推送
func (s *PushService) NotifyUser(ctx context.Context, userID int64, payload []byte) error {
	subs, err := s.repo.ListSubscriptions(ctx, userID)
	if err != nil {
		return err
	}
	for _, sub := range subs {
		msg := &webpush.Message{
			Subscription: &webpush.Subscription{
				Endpoint: sub.Endpoint,
				Keys: webpush.Keys{
					P256dh: sub.Keys.P256dh,
					Auth:   sub.Keys.Auth,
				},
			},
			TTL:    300,
			VAPIDPublicKey:  s.vapidPub,
			VAPIDPrivateKey: s.vapidPriv,
		}
		webpush.SendNotification(ctx, msg, payload)
	}
	return nil
}

// 1. 时间线虚拟滚动：只渲染视口内的卡片
import { useVirtualizer } from '@tanstack/react-virtual';

function TimelineVirtualList({ posts }) {
  const parentRef = useRef(null);
  const virtualizer = useVirtualizer({
    count: posts.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 120,
    overscan: 5, // 预渲染视口外 5 条
  });

  return (
    <div ref={parentRef} className="timeline-scroll">
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((vi) => (
          <div key={vi.key} style={{ transform: `translateY(${vi.start}px)` }}>
            <PostCard post={posts[vi.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

// 乐观更新发帖示例
async function publishPost(content) {
  const tempId = `temp-${Date.now()}`;
  posts.unshift({ id: tempId, content, status: 'pending' }); // 立即上屏
  try {
    const real = await api.createPost(content);
    replacePost(tempId, real); // 用真实数据替换
  } catch (e) {
    markFailed(tempId);        // 标记失败，允许重试
  }
}

// Flutter 时间线卡片示意
class PostCard extends StatelessWidget {
  final Post post;
  const PostCard({super.key, required this.post});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(children: [
              CircleAvatar(backgroundImage: NetworkImage(post.avatarUrl)),
              SizedBox(width: 8),
              Text(post.username, style: TextStyle(fontWeight: FontWeight.bold)),
            ]),
            SizedBox(height: 8),
            Text(post.content, maxLines: 6, overflow: TextOverflow.ellipsis),
          ],
        ),
      ),
    );
  }
}

// React Native 同一卡片
const PostCard = ({ post }: { post: Post }) => (
  <Pressable style={styles.card}>
    <View style={styles.header}>
      <Image source={{ uri: post.avatarUrl }} style={styles.avatar} />
      <Text style={styles.username}>{post.username}</Text>
    </View>
    <Text numberOfLines={6} style={styles.content}>{post.content}</Text>
  </Pressable>
);