コンテンツにスキップ

はじめに

todoke を使って Web Push 通知を送るまでの手順を説明します。

  1. アカウントを作成する

    todoke ダッシュボード にアクセスし、メールアドレスとパスワードで登録するか、GitHub アカウントでログインします。

  2. アプリを作成する

    ダッシュボードの「新しいアプリを作成」からアプリ名を入力します。作成すると VAPID 公開鍵が自動生成されます。

  3. API キーを発行する

    アプリ詳細画面の「API Keys」セクションでキーを作成します。用途に合わせてスコープを選択してください。

    • subscribe_only — フロントエンドへの埋め込み用(購読登録のみ)
    • notify — サーバーサイドからの通知送信用
    • full — 全操作可能な管理用キー
  4. フロントエンドに購読登録を実装する

    取得した VAPID 公開鍵と subscribe_only キーを使い、ブラウザから購読を登録します。

    import { TodokeClient } from "@todoke/sdk";
    const client = new TodokeClient({
    appId: "your-app-id",
    apiKey: "pk_subscribe_only_key",
    });
    await client.subscribe(); // Service Worker 登録 + Push 購読
  5. 通知を送信する

    サーバーサイドから notify スコープのキーで通知を送ります。

    Terminal window
    curl -X POST https://todoke-api.naoto24kawa.workers.dev/api/v1/notify \
    -H "Authorization: Bearer pk_notify_key" \
    -H "Content-Type: application/json" \
    -d '{"app_id":"your-app-id","title":"テスト通知","body":"送信成功!"}'