TypeScript SDK

@todoke/sdk を使うと、購読登録から通知送信まで数行で実装できます。

インストール

npm

npm install @todoke/sdk

bun

bun add @todoke/sdk

pnpm

pnpm add @todoke/sdk

クライアントの初期化

import { TodokeClient } from "@todoke/sdk";

const client = new TodokeClient({
  appId: "your-app-id",
  apiKey: "pk_your_key",
  vapidPublicKey: "BNfhTEO47qSR...", // 購読登録時のみ必要
  serviceWorkerPath: "/sw.js",       // 購読登録時のみ必要
  apiBaseUrl: "https://todoke-api.naoto24kawa.workers.dev", // デフォルト
});

購読管理

// 購読登録（ブラウザ通知許可ダイアログが表示される）
const subscription = await client.subscribe();

// 購読状態の確認
const isSubscribed = await client.isSubscribed();

// 購読解除
await client.unsubscribe(subscription.id);

通知送信

// 全購読者へ送信
await client.notify({
  title: "お知らせ",
  body: "新しいメッセージがあります",
  url: "https://yourapp.com/messages",
  icon: "https://yourapp.com/icon.png",
});

// 特定の購読者へ送信
await client.notify({
  title: "あなた宛",
  body: "個別通知",
  endpoint: subscription.endpoint,
});

エラーハンドリング

import { TodokeClient, TodokeError } from "@todoke/sdk";

try {
  await client.subscribe();
} catch (err) {
  if (err instanceof TodokeError) {
    console.error(`[${err.code}] ${err.message}`);
    // PERMISSION_DENIED: ユーザーが通知を拒否
    // SUBSCRIPTION_FAILED: Push 購読の取得失敗
    // API_ERROR: API レスポンスエラー
  }
}

型定義

type SubscribeResult = {
  id: string;
  endpoint: string;
};

type NotifyOptions = {
  title: string;
  body: string;
  url?: string;
  icon?: string;
  badge?: string;
  endpoint?: string; // 指定時は特定購読者のみ
};