Webプッシュ通知は、ユーザーがサイトにいないときでもリーチできます
- 有効なSSL証明書を持つセキュアなHTTPSウェブサイト
- OneSignalサービスワーカーをウェブサイトに追加できること
- 同一オリジンポリシーに従う単一のオリジン
- 通知を受信するためのユーザーの権限付与
- サポートされているブラウザー（Chrome、Firefox、Safari、Edge）
セットアップガイドを選択する
次のいずれかのサイトセットアップパスを完了してください。開発者ではありませんか？ チームメンバーの管理を参照して、OneSignalプロジェクトへの開発者アクセス権を持つチームメイトを招待してください。
Web SDKセットアップ
通常のサイト：ダッシュボードを構成し、サービスワーカーをアップロードし、JavaScript SDKを追加します。
WordPressプラグイン
公式OneSignalプラグイン。JavaScript SDKやサービスワーカーのアップロードは不要です。
Shopifyセットアップ
Vendo統合を通じてShopifyを接続します。VendoがストアフロントにSDKをデプロイします。
別のプロバイダーからの移行
別のWebプッシュプロバイダーから移行し、サブスクリプションを維持します。
manifest.jsonを追加し、ユーザーにサイトをホーム画面に追加してもらいます。
iOS Webプッシュセットアップ
サイトセットアップパスを完了した後のAppleの追加要件。
統合タイプ
OneSignalダッシュボードでSettings > Push & In-App > Webに移動し、サイトに一致する統合タイプを選択します。
Webサイトのセットアップに基づいて統合タイプを選択
通常のサイト
推奨。ダッシュボードでプロンプト、ウェルカム通知、サービスワーカーのパスを構成します。
WordPress
公式OneSignal WordPressプラグインを使用する場合に必要です。
カスタムコード
コードでプロンプトと
initオプションを完全に制御します。Web権限プロンプト
ユーザーはWebプッシュを受信する前に権限を付与する必要があります。ブラウザーはその許可のためにネイティブのシステムダイアログを表示します。OneSignalは、価値を説明し、繰り返されるネイティブプロンプトがブラウザーによってブロックされるのを避けるために、まずカスタマイズ可能なプレプロンプトを表示することを推奨します。 通常のサイトとWordPress：OneSignalダッシュボードでいつでもプロンプトを追加、削除、更新できます。カスタムコード：OneSignal.init()でプロンプトを制御します。Web SDKリファレンスを参照してください。
Web権限プロンプト
スライドダウン、カテゴリ、ネイティブ、サブスクリプションベルなどのプロンプトタイプを比較します。
Web SDKリファレンス
Web SDKを使用してコードでプロンプトを表示または非表示にします。
iOSでは、ユーザーがサイトをホーム画面に追加するまで権限プロンプトは表示されません。iOS用Webプッシュを参照してください。
ユーザーとサブスクリプション
ユーザーがプッシュにサブスクライブすると、OneSignalはそのブラウザーとデバイスに紐付いたサブスクリプションを作成します。 Webプッシュサブスクリプションは、ユーザーが次の操作を行ったときに作成されます：- 特定のブラウザーとデバイスでウェブサイトのプッシュ通知権限を付与する
- ブラウザーデータをクリアした後にサイトに戻る（自動再サブスクライブが有効な場合）
- 新しいブラウザーまたはデバイスからサブスクライブする
ブラウザーとデバイスの組み合わせごとに個別のサブスクリプションが作成されます。シークレットおよびプライベートブラウジングではサブスクリプションを作成できません。Webプッシュサブスクリプションは、External IDを割り当てるまで匿名のままです。
OneSignalダッシュボード：Audience > Users
ユーザー
ユーザーの管理、External IDの割り当て、アクティビティの追跡を行います。
サブスクリプション
ブラウザーとデバイス間でサブスクリプションがどのように機能するか。
セグメント
行動、デバイスなどに基づいてターゲティングするためにユーザーをセグメントにグループ化します。
Webプッシュ通知のデザイン
Webプッシュ通知は、タイトル、メッセージ、アイコン、画像、アクションボタンをサポートします。図は、カスタマイズできる要素（1〜5）とブラウザーが制御する要素（6〜9）を示しています。
Webプッシュ通知の構造。要素1〜5はカスタマイズ可能。ブラウザーが6〜9を制御します。
- タイトル：注目を集める見出し（推奨：50文字未満）
- メッセージ：メインの通知コンテンツ（推奨：120文字未満）
- アイコン：正方形のブランドアイコン（推奨：
256×256のPNG、JPG、または非アニメーションGIF） - 大きな画像：目を引くビジュアルコンテンツ
- アクションボタン：コールトゥアクションボタン
- ブラウザー：プッシュを表示するブラウザー
- ドメイン：ブラウザーによって設定されるサイトのオリジン
- タイムスタンプと閉じる：ブラウザーが追加するコントロール
- その他のオプション：ブラウザー固有の追加コントロール
プッシュの概要
プッシュ通知の作成、オプション、配信動作の完全な概要。
テンプレート
一貫したメッセージングのための再利用可能なテンプレートで時間を節約します。
パーソナライゼーションとローカライゼーション
各ユーザーの好みと言語に合わせてプッシュメッセージをカスタマイズします。メッセージのパーソナライゼーション
動的変数（名前や設定など）を挿入してメッセージをカスタマイズします。
多言語メッセージング
各ユーザーの優先言語でメッセージを配信します。
Webプッシュの動作を構成する
メッセージが表示されるタイミング、保存される期間、クリック時の動作を制御します。配信、表示、閉じる設定
スロットリング
通知配信速度を制御します。
頻度制限
同じユーザーへの通知の過剰送信を防ぐ制限を設定します。
Time To Live（TTL）
デバイスがオフラインのときにプッシュサービスがメッセージを保持する期間を定義します。
Webプッシュトピック
トピックを使用して、重複する通知をグループ化、置換、または抑制します。
クリック動作
起動URLと、クリック時に開いているタブをフォーカスまたはナビゲートする方法を選択します。
セットアップのテスト
全オーディエンスに送信する前に、ブラウザー全体で統合を確認します。起動前チェックリスト
- SDKがコンソールエラーなしで読み込まれている
- 権限プロンプトが表示され正しく機能する
- テスト通知が送信され受信される
- アイコンと画像が正しくレンダリングされる
- サービスワーカーが登録され最新の状態になっている
- HTTPS証明書が有効である
分析とトラブルシューティング
プッシュメッセージレポート
各メッセージの配信、開封率、クリックスルーメトリクスを表示します。
分析の概要
チャネル全体のエンゲージメントとユーザー行動メトリクスを探索します。
通知が表示されない、または遅延する
メッセージが表示されない場合のトラブルシューティングチェックリスト。
通知画像が表示されない
さまざまなブラウザーでの画像レンダリングの問題を修正します。
次のステップ
A/Bテスト
実験でメッセージを最適化し、エンゲージメントを促進するものを見つけます。
ジャーニー
ユーザーの行動によってトリガーされる自動化されたマルチステップのメッセージングフローを構築します。
タグ
パーソナライゼーションとセグメンテーションのためにユーザーにカスタムプロパティを追加します。
よくある質問
iOSのユーザーはWebプッシュにサブスクライブできますか？
はい、iOS 16.4+から可能です。まず通常のサイト、カスタムコード、WordPress、またはShopifyのセットアップを完了し、次にmanifest.jsonを追加して、ユーザーにサイトをホーム画面に追加してもらいます。iOS Webプッシュセットアップを参照してください。
ユーザーがWebプッシュ通知を受信しなくなったのはなぜですか？
最も一般的な理由は次のとおりです：- ユーザーがブラウザーデータをクリアした。Webプッシュ設定で自動再サブスクライブオプションを有効にしている場合、ユーザーがサイトに戻ったときに自動的かつサイレントに再サブスクライブされます。
- ユーザーがオペレーティングシステムの設定でプッシュ通知をオフにした。プッシュ通知を再度受信するには、手動でサイトに再サブスクライブする必要があります。
Webプッシュ通知はシークレットまたはプライベートブラウジングモードで機能しますか？
いいえ。ユーザーはシークレットまたはプライベートブラウジングモードではWebプッシュにサブスクライブできません。通常のセッションで作成されたサブスクリプションはプライベートモードではアクセスできません。Webプッシュ通知をサポートするブラウザーはどれですか？
Chrome、Firefox、Safari（macOSおよびiOS 16.4+）、EdgeはすべてWebプッシュをサポートしています。各ブラウザーはプロンプトの動作や通知の表示が異なる場合があります。ブラウザー固有の詳細については、WebプッシュFAQを参照してください。サブドメインでWebプッシュを使用できますか？
各サブドメイン（例：app.example.com と shop.example.com）は別々のオリジンです。ブラウザーはWebプッシュに同一オリジンポリシーを適用するため、各サブドメインには独自のOneSignalアプリが必要です。サービスワーカーもサブスクライブするページと同じオリジンでホストする必要があります。CDNや他のサブドメインは許可されていません。複数サイト＆サブドメインを参照してください。