{
  endpoint: "https://fcm.googleapis.com/fcm/send/eqXAp...",
  keys: {
    p256dh: "BLN...=",   // 客户端公钥,用于加密 payload
    auth: "xR..."          // 认证密钥
  }
}

// lib/web-push.ts —— 浏览器侧工具函数

/** VAPID 公钥(注意:公钥可以、也应该暴露给前端) */
const VAPID_PUBLIC_KEY = process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!;

/** 把 base64url 字符串转成 subscribe 需要的 Uint8Array */
function urlBase64ToUint8Array(base64String: string): Uint8Array {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const raw = atob(base64);
  const output = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; ++i) output[i] = raw.charCodeAt(i);
  return output;
}

/** 入口:请求权限 + 订阅 + 上报后端 */
export async function subscribeToPush(): Promise<PushSubscription | null> {
  // 1. 能力检测:iOS Safari、老浏览器直接拒绝
  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    console.warn('[push] 当前浏览器不支持 Web Push');
    return null;
  }

  // 2. 请求权限——注意:这一步应该由用户手势触发,不要页面一加载就调
  const permission = await Notification.requestPermission();
  if (permission !== 'granted') {
    console.info('[push] 用户未授权通知');
    return null;
  }

  // 3. 注册 Service Worker(用 ready 等待它激活)
  const reg = await navigator.serviceWorker.register('/sw.js');
  await navigator.serviceWorker.ready;

  // 4. 如果已经订阅过,直接复用,避免重复创建
  const existing = await reg.pushManager.getSubscription();
  const subscription =
    existing ??
    (await reg.pushManager.subscribe({
      userVisibleOnly: true, // 规范要求:必须显示通知
      applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY),
    }));

  // 5. 把订阅对象发回服务端持久化(每个用户/每台设备一条)
  await fetch('/api/push/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription),
  });

  return subscription;
}

// app/api/push/send/route.ts —— Next.js Route Handler
import webPush from 'web-push';
import { NextRequest, NextResponse } from 'next/server';
import { getSubscriptionsByUser } from '@/lib/push-store';

// 一次性配置:告诉 web-push 你的 VAPID 身份
webPush.setVapidDetails(
  'mailto:[email protected]', // 联系邮箱,推送服务出问题时会用到
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!,
);

export async function POST(req: NextRequest) {
  const { userId, title, body, url } = await req.json();
  const subscriptions = await getSubscriptionsByUser(userId);
  if (subscriptions.length === 0) {
    return NextResponse.json({ sent: 0, reason: 'no-subscription' });
  }

  const payload = JSON.stringify({ title, body, url });

  // 并发推送,逐条 catch——单条失败不能拖垮整批
  const results = await Promise.allSettled(
    subscriptions.map((sub) =>
      webPush.sendNotification(
        {
          endpoint: sub.endpoint,
          keys: { p256dh: sub.p256dh, auth: sub.auth },
        },
        payload,
        {
          TTL: 60 * 60 * 24, // 24 小时:用户离线时消息最多保留多久
          urgency: 'normal', // high / normal / low,影响耗电与投递策略
          topic: 'chat-msg', // 同 topic 的消息会折叠,只显示最新一条
        },
      ),
    ),
  );

  // 清理失效订阅(410 Gone / 404)——否则下次还会白白重试
  await Promise.all(
    results
      .map((r, i) => ({ r, sub: subscriptions[i] }))
      .filter(({ r }) => r.status === 'rejected' && isGone(r.reason))
      .map(({ sub }) => deleteSubscription(sub.endpoint)),
  );

  return NextResponse.json({
    sent: results.filter((r) => r.status === 'fulfilled').length,
  });
}

function isGone(err: unknown): boolean {
  return err instanceof webPush.WebPushError && [404, 410].includes(err.statusCode);
}

// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => e.waitUntil(self.clients.claim()));

// 核心:push 事件处理
self.addEventListener('push', (event) => {
  let data = { title: '新消息', body: '你有一条新通知', url: '/' };
  try {
    if (event.data) data = event.data.json();
  } catch {
    /* payload 不是 JSON 时退回默认 */
  }

  const options = {
    body: data.body,
    icon: '/icon-192.png',
    badge: '/badge-72.png',
    data: { url: data.url }, // 点击时用
    tag: data.tag, // 同 tag 的通知会合并
    renotify: true, // tag 合并时是否重新震动 / 响铃
    requireInteraction: false, // true = 不自动消失,适合重要告警
    vibrate: [100, 50, 100],
  };

  event.waitUntil(self.registration.showNotification(data.title, options));
});

// 用户点击通知
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  const targetUrl = event.notification.data?.url ?? '/';

  event.waitUntil(
    (async () => {
      const allClients = await self.clients.matchAll({
        type: 'window',
        includeUncontrolled: true,
      });

      // 优先聚焦已打开的同源页面
      for (const client of allClients) {
        if (client.url.includes(targetUrl) && 'focus' in client) {
          return client.focus();
        }
      }

      // 否则新开一个
      if (self.clients.openWindow) {
        return self.clients.openWindow(targetUrl);
      }
    })(),
  );
});

// components/PushOptIn.tsx
'use client';
import { useState } from 'react';
import { subscribeToPush } from '@/lib/web-push';

export function PushOptIn() {
  const [asked, setAsked] = useState(false);

  // 用户先点这个按钮,而不是一进来就弹系统权限
  if (!asked) {
    return (
      <button onClick={() => setAsked(true)}>
        开启消息提醒
      </button>
    );
  }

  return (
    <div className="opt-in-card">
      <p>有人回复你的评论时,我们会在第一时间通知你。</p>
      <button onClick={() => subscribeToPush()}>允许通知</button>
      <button onClick={() => setAsked(false)}>以后再说</button>
    </div>
  );
}

# 用 web-push 库生成:npx web-push generate-vapid-keys
VAPID_PUBLIC_KEY=BGh...
VAPID_PRIVATE_KEY=Z3I...
# 注意公钥要给前端用,前缀必须是 NEXT_PUBLIC_
NEXT_PUBLIC_VAPID_PUBLIC_KEY=BGh...

public/
  sw.js                  # SW 脚本,根作用域
  icon-192.png           # 通知图标
src/
  app/api/push/subscribe/route.ts   # 接收前端上报的 subscription
  app/api/push/send/route.ts        # 触发推送
  lib/web-push.ts                  # 前端订阅工具
  lib/push-store.ts                # subscription 存取(数据库)
  components/PushOptIn.tsx         # 权限引导 UI

// src/app/api/push/subscribe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { upsertSubscription } from '@/lib/push-store';
import { getSessionUserId } from '@/lib/auth';

export async function POST(req: NextRequest) {
  const userId = await getSessionUserId();
  if (!userId) return NextResponse.json({ error: 'unauthorized' }, { status: 401 });

  const sub = await req.json();
  await upsertSubscription({
    userId,
    endpoint: sub.endpoint,
    p256dh: sub.keys.p256dh,
    auth: sub.keys.auth,
  });

  return NextResponse.json({ ok: true });
}