> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# WebプッシュWebhook
> ユーザーがWebプッシュ通知を表示、クリック、または却下したときにリアルタイム通知を受信するためのHTTP Webhookをセットアップ。Chrome、Firefox、Safariブラウザーサポートの例を含む完全ガイド。
## 概要
WebプッシュWebhookを使用すると、ユーザーがプッシュ通知とやり取りするたびにリアルタイムHTTP POST通知を受信できます。通知が表示、クリック、または却下されると、OneSignalは通知データとカスタムパラメーターを指定されたWebhook URLに自動的に送信します。
JourneyのWebhookについては、[Journey Webhook](./journeys-webhook)ページを参照してください。
**主な利点：**
* リアルタイムで通知エンゲージメントを追跡
* ユーザーインタラクションに基づいて自動ワークフローをトリガー
* 通知データを分析プラットフォームと同期
* 通知イベントのカスタムビジネスロジックを実装
## ブラウザーサポート
| ブラウザー | プラットフォームサポート | 利用可能なWebhookイベント |
| ------- | --------------------- | -------------------- |
| Chrome | macOS、Windows、Android | すべてのイベント（表示、クリック、却下） |
| Firefox | macOS、Windows、Android | 表示とクリックイベント |
| Safari | サポートされていません | なし |
## 利用可能なWebhookイベント
### notification.willDisplay
ユーザーの画面に通知が表示された直後にトリガーされます。
**ユースケース：** 配信率の追跡、インプレッションデータのログ、フォローアップキャンペーンのトリガー
### notification.clicked
ユーザーが通知本文またはアクションボタンをクリックしたときにトリガーされます。
**ユースケース：** エンゲージメント率の追跡、コンバージョンイベントのトリガー、特定のコンテンツへのユーザーのリダイレクト
### notification.dismissed
ユーザーが通知をアクティブに却下したとき、または自動的に期限切れになったときにトリガーされます。
**ブラウザーサポート：** Chromeのみ
**ユースケース：** 却下率の追跡、通知タイミングの最適化、通知コンテンツのA/Bテスト
**重要：** 通知本文またはアクションボタンをクリックしても、却下Webhookはトリガーされません。
## セットアップ方法
OneSignalダッシュボードで**Settings > Web**に移動します
「Enable webhooks」トグルを有効にします
追跡したい各イベントのWebhook URLを入力します
既存の`OneSignal.init()`メソッドにWebhook設定を追加します：
```javascript theme={null}
// 既存のOneSignal初期化に追加 - initを2回呼び出さないでください
OneSignal.init({
// ここに他の既存設定
webhooks: {
cors: false, // 推奨：カスタムヘッダーが必要でない限りfalseのままにします
'notification.willDisplay': 'https://yoursite.com/webhook/display',
'notification.clicked': 'https://yoursite.com/webhook/click',
'notification.dismissed': 'https://yoursite.com/webhook/dismiss' // Chromeのみ
}
});
```
Webhook URLはHTTPSであることを確認してください（Chromeのセキュリティポリシーで必須）。
## CORS設定
`cors`設定は、Webhookエンドポイントが受信するヘッダーとデータを決定します：
* **`cors: false`（推奨）：** よりシンプルなセットアップ、サーバーでのCORS設定は不要
* **`cors: true`：** 追加のヘッダーを提供しますが、サーバーでのCORSサポートが必要
**`cors: true`を使用するタイミング：**
* `Content-Type: application/json`ヘッダーが必要
* イベントの識別を容易にするために`X-OneSignal-Event`ヘッダーが必要
* サーバーがすでに非シンプルリクエストのCORSをサポートしている
## Webhookリクエスト形式
### 標準リクエスト（cors: false）
Webhookエンドポイントは、次のペイロード構造でPOSTリクエストを受信します：
```json theme={null}
{
"event": "notification.clicked",
"notificationId": "ed46884e-0e3f-4373-9e11-e28f27746d3d",
"heading": "Your notification title",
"content": "Your notification message",
"additionalData": {
"userId": "12345",
"campaignId": "summer-sale",
"customField": "customValue"
},
"actionId": "buy-now-button",
"url": "https://yoursite.com/product/123"
}
```
### 拡張リクエスト（cors: true）
上記と同じペイロードに加えて、次の追加ヘッダーが含まれます：
```http theme={null}
Content-Type: application/json
X-OneSignal-Event: notification.clicked
```
## ペイロードフィールドリファレンス
| フィールド | タイプ | 説明 | 常に存在 |
| ---------------- | ------ | --------------------------------------- | ---------- |
| `event` | string | Webhookをトリガーしたイベントタイプ | ✅ |
| `notificationId` | string | 一意のOneSignal通知識別子 | ✅ |
| `heading` | string | 通知タイトル | 提供された場合のみ |
| `content` | string | 通知メッセージ本文 | 提供された場合のみ |
| `additionalData` | object | 通知と共に送信されるカスタムデータ | 提供された場合のみ |
| `actionId` | string | クリックされたアクションボタンのID（空文字列 = 通知本文がクリックされた） | クリックイベントのみ |
| `url` | string | 通知の起動URL | 提供された場合のみ |
| `subscriptionId` | string | OneSignalユーザー/サブスクリプションID | CORS有効時のみ |
## 実装のベストプラクティス
### Webhookエンドポイントの要件
**セキュリティ：**
* HTTPS URLのみを使用（HTTP URLはChromeによってブロックされます）
* Webhookエンドポイントに適切な認証/検証を実装
* 大量の通知を処理するためにレート制限を検討
**応答要件：**
* 処理が成功した場合はHTTP 200ステータスを返す
* タイムアウトを避けるために10秒以内に応答
* 重複するWebhook呼び出しを適切に処理（冪等性を実装）
### エラーハンドリング
```javascript theme={null}
// Example webhook endpoint (Node.js/Express)
app.post('/webhook/notification', (req, res) => {
try {
const { event, notificationId, additionalData } = req.body;
// Validate required fields
if (!event || !notificationId) {
return res.status(400).json({ error: 'Missing required fields' });
}
// Process the webhook data
processNotificationEvent(req.body);
// Always respond with 200 OK
res.status(200).json({ success: true });
} catch (error) {
console.error('Webhook processing error:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
```
## よくある問題と解決策
### Webhookが発火しない
**考えられる原因：**
* OneSignal初期化を含むすべてのページにWebhookコードが存在しない
* Webhookコードが追加された後、ユーザーがWebhookコードを含むページにアクセスしていない
* HTTPS要件が満たされていない
* サーバーが200以外のステータスコードを返している
**解決策：** 通知がアクティブなすべてのページのOneSignal initコードにWebhook設定が含まれていることを確認してください。
### Webhookでデータが欠落
**原因：** Webhookは、Webhook設定がアクティブなページにアクセスするユーザーのイベントのみを追跡します。
**解決策：** 特定のランディングページだけでなく、OneSignalを含むすべてのページにWebhookコードをデプロイしてください。
### 重複するWebhook呼び出し
**原因：** ネットワークの問題やブラウザーの動作により、重複するリクエストが発生する可能性があります。
**解決策：** `notificationId`フィールドを使用して冪等性を実装し、イベントの重複を排除してください。
## Webhookの制限事項
* **イベントごとに1つのWebhook URL：** 同じイベントタイプに複数のWebhook URLを設定することはできません
* **HTTPSのみ：** ブラウザーのセキュリティ制限により、HTTP URLは機能しません
* **Chromeのみの却下追跡：** `notification.dismissed`イベントはChromeでのみ機能します
* **ページ依存性：** 追跡が機能するには、ユーザーがWebhookコードがアクティブなページにアクセスする必要があります
## Webhookのテスト
1. **テスト通知を送信** OneSignalダッシュボードから
2. **Webhookエンドポイントを監視** 受信リクエストを確認
3. **ペイロード構造を検証** 期待と一致するかを確認
4. **さまざまなシナリオをテスト：**
* 通知の表示
* 通知本文のクリック
* アクションボタンのクリック（設定されている場合）
* 通知の却下（Chromeのみ）
## 次のステップ
Webhookをセットアップした後、次のことを検討してください：
* **分析統合：** Webhookデータを分析プラットフォームに転送
* **ユーザーセグメンテーション：** Webhookイベントを使用してエンゲージメントに基づくユーザーセグメントを作成
* **自動化されたワークフロー：** プッシュ通知のインタラクションに基づいてメールキャンペーンまたはアプリ通知をトリガー
* **A/Bテスト：** Webhookデータを使用してさまざまな通知戦略の効果を測定