Web Push Api

// schema.ts
import { pgTable, serial, text, jsonb, timestamp, integer } from "drizzle-orm/pg-core";

export const pushSubscriptions = pgTable("push_subscriptions", {
  id: serial("id").primaryKey(),
  userId: integer("user_id").notNull(), // 유저와 연관 관계
  endpoint: text("endpoint").notNull().unique(),
  keys: jsonb("keys").notNull(), // p256dh, auth 키 저장
  createdAt: timestamp("created_at").defaultNow(),
});

// routes/api.subscribe.ts
import webpush from "web-push";
import { db } from "~/db/server";
import { pushSubscriptions } from "~/db/schema";

// VAPID 설정 (환경 변수)
webpush.setVapidDetails(
  "mailto:example@yourdomain.com",
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

export async function action({ request }: ActionFunctionArgs) {
  const subscription = await request.json();
  const userId = await getUserId(request); // 유저 인증 로직

  // Drizzle을 사용해 DB에 구독 정보 저장 또는 업데이트
  await db.insert(pushSubscriptions).values({
    userId,
    endpoint: subscription.endpoint,
    keys: subscription.keys,
  }).onConflictDoUpdate({ ... });

  return { success: true };
}

// public/sw.js
self.addEventListener("push", (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: "/icon.png",
    badge: "/badge.png",
  };
  event.waitUntil(self.registration.showNotification(data.title, options));
});

// app/utils/push-setup.ts
export async function subscribeUserToPush() {
  // 1. Service Worker 확인
  if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
    console.error("이 브라우저는 푸시 알림을 지원하지 않습니다.");
    return;
  }

  try {
    // 2. Service Worker 등록 확인
    const registration = await navigator.serviceWorker.ready;

    // 3. 기존 구독 확인
    let subscription = await registration.pushManager.getSubscription();

    // 4. 구독이 없다면 새로 생성
    if (!subscription) {
      const response = await fetch("/api/vapid-public-key"); // 서버에서 공개키 가져오기
      const { publicKey } = await response.json();

      subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: publicKey,
      });

      // 5. 서버(React Router Action)로 구독 정보 전송
      await fetch("/api/subscribe", {
        method: "POST",
        body: JSON.stringify(subscription),
        headers: { "Content-Type": "application/json" },
      });
    }

    return subscription;
  } catch (error) {
    console.error("푸시 구독 실패:", error);
  }
}

// public/sw.js
self.addEventListener('push', function(event) {
  if (event.data) {
    const data = event.data.json();
    const options = {
      body: data.body,
      icon: '/icons/icon-192x192.png', // 앱 아이콘 경로
      badge: '/icons/badge-72x72.png', // 안드로이드 상태바 아이콘
      data: {
        url: data.url || '/' // 알림 클릭 시 이동할 URL
      }
    };

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

// 알림 클릭 시 페이지 이동 처리
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

function urlBase64ToUint8Array(base64String: string) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
}

// entry.client.tsx
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').then(reg => {
      console.log('SW registered:', reg);
    }).catch(err => {
      console.log('SW registration failed:', err);
    });
  });
}

/packages
  /web-push-shared       <-- 핵심 로직 공유 (Drizzle 스키마, web-push 유틸리티)
    - index.ts
    - schema.ts (Drizzle 스키마 정의)
/apps
  /web-app-a             <-- React Router v7 (App A)
    - public/sw.js       (App A 전용 서비스 워커)
  /web-app-b             <-- React Router v7 (App B)
    - public/sw.js       (App B 전용 서비스 워커)

// packages/web-push-shared/schema.ts
export const pushSubscriptions = pgTable("push_subscriptions", {
  id: serial("id").primaryKey(),
  userId: integer("user_id"),
  appName: text("app_name"), // "store-app" 또는 "admin-app" 구분
  endpoint: text("endpoint").unique(),
  keys: jsonb("keys"),
  // ...생략
});

# 관련 라이브러리 설치
npm install web-push lucide-react

CREATE TABLE timer_subscriptions (
  id SERIAL PRIMARY KEY,
  endpoint TEXT NOT NULL,
  p256dh TEXT NOT NULL,
  auth TEXT NOT NULL,
  target_time TIMESTAMP NOT NULL, -- 알림이 울려야 할 시간
  is_sent BOOLEAN DEFAULT FALSE
);

// app/routes/timer.tsx
import { ActionFunctionArgs } from "react-router";
import { neon } from "@neondatabase/serverless";

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const subscription = JSON.parse(formData.get("subscription") as string);
  const seconds = parseInt(formData.get("seconds") as string);
  
  const targetTime = new Date(Date.now() + seconds * 1000);
  const sql = neon(process.env.DATABASE_URL!);

  // DB에 푸시 정보와 목표 시간 저장
  await sql`
    INSERT INTO timer_subscriptions (endpoint, p256dh, auth, target_time)
    VALUES (${subscription.endpoint}, ${subscription.keys.p256dh}, ${subscription.keys.auth}, ${targetTime})
  `;

  return { success: true, targetTime };
}

// app/routes/_index.tsx
import { useFetcher } from "react-router";
import { useState } from "react";

export default function TimerPage() {
  const fetcher = useFetcher();
  const [seconds, setSeconds] = useState(60);

  const startTimer = async () => {
    // 1. 서비스 워커 등록 확인
    const registration = await navigator.serviceWorker.ready;
    
    // 2. 푸시 구독 생성 (VAPID 키 필요)
    const subscription = await registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: "YOUR_PUBLIC_VAPID_KEY"
    });

    // 3. 서버로 구독 정보와 시간 전송
    fetcher.submit(
      { subscription: JSON.stringify(subscription), seconds: seconds.toString() },
      { method: "post", action: "/timer" }
    );
    
    alert("타이머가 서버에 등록되었습니다. 브라우저를 닫아도 알림이 옵니다!");
  };

  return (
    <div className="p-8">
      <h1>Neon Web Push 타이머</h1>
      <input 
        type="number" 
        value={seconds} 
        onChange={(e) => setSeconds(Number(e.target.value))}
        className="border p-2 mr-2"
      />
      <button onClick={startTimer} className="bg-blue-500 text-white p-2 rounded">
        타이머 시작 (서버 예약)
      </button>
    </div>
  );
}

// public/sw.js
self.addEventListener('push', (event) => {
  const data = event.data ? event.data.json() : { title: '타이머 종료', body: '시간이 되었습니다!' };
  
  const options = {
    body: data.body,
    icon: '/icon.png',
    vibrate: [200, 100, 200],
    data: { url: '/' }
  };

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

// scripts/send-push.js (예시 로직)
const webpush = require('web-push');
const { neon } = require('@neondatabase/serverless');

const sql = neon(process.env.DATABASE_URL);

async function checkAndSend() {
  // 현재 시간이 지난 보낼 알림들 조회
  const rows = await sql`
    SELECT * FROM timer_subscriptions 
    WHERE target_time <= NOW() AND is_sent = FALSE
  `;

  for (const row of rows) {
    const subscription = {
      endpoint: row.endpoint,
      keys: { p256dh: row.p256dh, auth: row.auth }
    };

    try {
      await webpush.sendNotification(subscription, JSON.stringify({
        title: '⏰ 타이머 종료!',
        body: '요청하신 타이머 시간이 완료되었습니다.'
      }));
      
      // 발송 완료 표시
      await sql`UPDATE timer_subscriptions SET is_sent = TRUE WHERE id = ${row.id}`;
    } catch (err) {
      console.error("푸시 발송 실패:", err);
    }
  }
}