クイックスタート

  1. /sign-up から サインアップ してプロジェクトを作成します。VAPID 鍵ペアとプロジェクト固有の API キーが自動で発行されます。
  2. Next.js / React アプリに SDK をインストール:
    pnpm add @piro0919/next-push
  3. プロジェクトの「SDK setup」カードに表示される値を使って usePush フックを組み込みます:
    'use client';
    import { usePush } from "@piro0919/next-push";
    
    export function Subscribe() {
      const { subscribe } = usePush({
        apiBase: "https://nesh.kkweb.io/api/v1/projects/<projectId>",
        vapidPublicKey: "<VAPID public key>",
        // Optional — scope subscriptions to your application's user id
        // so you can target sends by user from the dashboard / REST API.
        userId: currentUser.id,
      });
      return <button onClick={subscribe}>Enable notifications</button>;
    }
  4. public/sw.js に Service Worker を追加します。@piro0919/next-push/sw に同梱のデフォルトハンドラが通知表示と shown / click トラッキングを自動で処理します:
    import { handlePush, handleClick } from "@piro0919/next-push/sw";
    
    self.addEventListener("push", (event) => handlePush(event));
    self.addEventListener("notificationclick", (event) => handleClick(event));
  5. ダッシュボードから、または REST API 経由で最初の通知を送信。