> ## 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プッシュセットアップ
> OneSignalを使用して、Chrome、Firefox、Safari、EdgeでWebプッシュ通知を設定し、ユーザーを再エンゲージします。
Webプッシュ通知は、ユーザーがWebサイトを積極的に閲覧していないときでも、タイムリーなコンテンツで再エンゲージする方法です。テキスト、画像、アクションボタン、サウンドを含むリッチコンテンツをサポートします。
Webプッシュが機能するには：
* **HTTPSウェブサイト**：Webプッシュは、有効なSSL証明書を持つセキュアなサイトでのみ機能します
* **サービスワーカー**：[OneSignalサービスワーカー](./onesignal-service-worker)をウェブサイトに追加できる必要があります
* **単一ドメインオリジン**：[同一オリジンポリシー](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)に従う必要があります
* **ユーザー権限**：ユーザーは通知を受信するために明示的に権限を付与する必要があります
* **サポートされているブラウザー**：ほとんどの最新ブラウザー（Chrome、Firefox、Safari、Edge）で動作します
ユーザーはシークレットまたはプライベートブラウジングモードではサブスクライブできません。iOSデバイスには追加のセットアップが必要です（[iOS用Webプッシュ](./web-push-for-ios)を参照）。一部のブラウザーには通知制限があるか、ユーザーの操作が必要な場合があります。[WebプッシュFAQ](./web-push-setup-faq)を参照してください。
このガイドでは、SDKのセットアップからパーソナライズされたプッシュメッセージの送信まで、OneSignalプッシュ通知を正常に実装するためのすべてのステップを説明します。
***
## Webプッシュ開発者ガイド
Webプッシュ通知を送信する前に、開発者は次の手順を完了する必要があります。
開発者ではありませんか？ [チームメンバーの管理](./manage-team-members)を参照して、OneSignalプロジェクトへの開発者アクセス権を持つチームメイトを招待してください。
ローカルホストテストと権限プロンプトを含む、OneSignal Web SDKのインストールと構成に関する完全なガイド。
公式プラグインを使用してWordPressにプッシュ通知をすばやく統合します。コーディングは不要です。
iOS 16.4+を実行しているiPhoneとiPadでWebプッシュを有効にするためのApple固有の手順に従ってください。
別のWebプッシュプロバイダーから移行し、サブスクライバーを維持する方法を学びます。
***
## 構成オプション
OneSignalダッシュボードの**Settings > Push & In-App > Web**でWebサイトをWebプッシュ用に設定します。
サイトに一致する統合タイプを選択します：
**推奨** - ダッシュボードでプロンプト、ウェルカム通知、サービスワーカーのセットアップを直接構成します。バックエンドコーディングは不要です。
公式OneSignalプラグインを使用して、完全なUIベースの構成でWordPressサイトにプッシュを簡単にセットアップします。
コードですべてをカスタマイズしたい開発者向けの完全制御セットアップ。
サイトの詳細：
* **サイト名**：デフォルトの通知タイトルで使用されます
* **サイトURL**：ドメインオリジンと完全に一致する必要があります（パスや`www`の不一致はありません）
* **自動再サブスクライブ**：推奨 - ブラウザーデータをクリアした再訪問ユーザーを自動的に再サブスクライブします
* **デフォルトアイコンURL**：通知に表示される`256x256px`の画像（設定されていない場合、デフォルトのベルアイコンが使用されます）
### 自動再サブスクライブ
ユーザーがブラウザーデータをクリアすると、プッシュ通知の受信が停止します。このオプションを有効にすると、ユーザーがサイトに戻ったときに自動的に再サブスクライブされます。詳細については、[サブスクリプション](./subscriptions)を参照してください。
***
### Web権限プロンプト
通知権限のプロンプトは、オプトインにとって重要です。セットアップに基づいて、権限リクエストの動作と外観をカスタマイズできます。
利点を説明する明確なメッセージを使用し、適切なタイミングでユーザーにプロンプトを表示し（例：エンゲージメント後）、ネイティブブラウザーダイアログをトリガーする前にプレプロンプトを使用します。
さまざまなプロンプトタイプ（スライドダウン、カテゴリベース、ネイティブ、サブスクリプションベルなど）を比較し、それぞれをいつ使用するかを学びます。
SDKを使用してプロンプトをいつどのように表示するかをプログラムで制御する方法を学びます。
***
### ウェルカム通知
ユーザーがサブスクライブした直後に送信されるオプションの確認プッシュを有効にできます。
通常のセットアップとWordPress統合では、ダッシュボードでこれを設定できます。
カスタムコード統合では、`OneSignal.init`関数の`welcomeNotification`オブジェクトを使用します。詳細については、[Web SDKリファレンス](./web-sdk-reference)を参照してください。
**ウェルカム通知を送信する理由：**
* ユーザーにサブスクリプションが成功したことを知らせる
* 今後の通知がどのように表示されるかを示す
* オンボーディングコンテンツまたは次のステップを提供する
***
## ユーザーとサブスクリプション
ユーザーがプッシュにサブスクライブすると、OneSignalは自動的にブラウザー/デバイスに関連付けられた一意の**サブスクリプション**を作成します。
Webプッシュサブスクリプションは、次の場合に作成されます：
* 特定のブラウザーとデバイスを使用して、Webサイトでプッシュ通知の権限を付与する
* **ブラウザーデータをクリアした後**にサイトに戻る（自動再サブスクライブが有効な場合）
* 新しいブラウザーまたはデバイスからサブスクライブする
ブラウザー/デバイスの組み合わせごとに個別のサブスクリプションが作成されます。シークレット/プライベートブラウジングモードではサブスクリプションを作成できません。WebプッシュサブスクリプションはExternal IDを割り当てるまで匿名のままです（[External ID](./users#external-id)を参照）。
ユーザーの管理、External IDの割り当て、アクティビティの追跡方法を学びます。
ブラウザーとデバイス間でサブスクリプションがどのように機能するかを理解します。
行動、デバイスなどに基づいてターゲティングするためにユーザーをセグメントにグループ化します。
### iOSサポート
Appleは、iOS 16.4+を実行しているiPhoneとiPad向けにWebプッシュのサポートを追加しましたが、より厳しい要件があります：
* ユーザーはサイトをホーム画面に追加する必要があります
* 権限プロンプトはそのステップの後にのみ表示されます
* 有効にすると、通知はネイティブアプリのアラートのように動作します
サービスワーカーとマニフェストのセットアップを含む、iOSサポートを有効にするためのステップバイステップの手順。
iOS Webプッシュを受信できるようにサイトをインストールするようユーザーを促すためのヒント。
***
## Webプッシュ通知のデザイン
効果的なプッシュ通知を作成するには、テキストを書くだけでは不十分です。カスタマイズ可能な要素とその効果的な使用方法を学びましょう。
1. [タイトル](./push#title)：注目を集める見出し（推奨：`50`文字未満）
2. [メッセージ](./push#message)：メインの通知コンテンツ（推奨：`120`文字未満）
3. [アイコン](./notification-icons)：ブランドアイコンまたは通知固有の画像（推奨：`256x256px` PNGまたはJPG）
4. [大きな画像](./push#image)：目を引くビジュアルコンテンツ
5. [アクションボタン](./action-buttons)：コールトゥアクションボタン
6. ブラウザー：プッシュを表示するブラウザー/アプリ
7. ドメイン：ブラウザーによって自動的に設定されるサイトのオリジン
8. タイムスタンプと閉じる：ブラウザーがこれらのコントロールを追加します
9. その他のオプション：ブラウザー固有の追加コントロール
プッシュ通知の作成、オプション、配信動作の完全な概要。
一貫したメッセージングのための再利用可能なテンプレートで時間を節約します。
### メッセージのパーソナライゼーションとローカライゼーション
各ユーザーの設定と言語に合わせてプッシュメッセージをカスタマイズできます。
動的変数（名前や設定など）を挿入してメッセージをカスタマイズします。
各ユーザーの優先言語でメッセージを自動的に配信します。
***
## Webプッシュの動作を構成
プッシュメッセージが送信された後の動作（表示されるタイミング、保存期間、ユーザーとの対話方法）を制御します。
### 配信、表示、閉じる設定
通知配信速度を制御します。
同じユーザーへの通知の過剰送信を防ぐ制限を設定します。
デバイスがオフラインのときにプッシュサービスがメッセージを保持する期間を定義します。
トピックを使用して、重複する通知をグループ化、置換、または抑制します。
### クリック動作
ユーザーが通知をクリックしたときに何が起こるかを制御します。
**デフォルト：** クリックするとホームページが開きます。
**カスタマイズ：**
* ユーザーを特定のURLに誘導する
* UTMトラッキングを使用する
* `?_osp=do_not_open`でデフォルトの動作を抑制する
ディープリンクとトラッキングを使用して、ユーザーを関連するコンテンツまたはページにルーティングします。
ユーザーが通知から即座にアクションを実行できるようにします。
クリックイベントをリッスンし、カスタムコードでアプリ内動作をトリガーします。
***
## セットアップのテスト
起動前に、デバイスとブラウザー全体でWebプッシュ実装を徹底的にテストします。
### 起動前チェックリスト
* SDKがエラーなしで正しく読み込まれている
* 権限プロンプトが表示され機能する
* テスト通知が送信され受信される
* アイコンと画像が正しくレンダリングされる
* サービスワーカーが登録され最新の状態になっている
* HTTPS証明書が有効である
### プッシュ分析とトラブルシューティング
通知のパフォーマンスを測定し、一般的な配信問題を解決します：
各メッセージの配信、開封率、クリックスルーメトリクスを表示します。
チャネル全体のエンゲージメントとユーザー行動メトリクスを探索します。
メッセージが表示されない場合のトラブルシューティングチェックリスト。
さまざまなブラウザーでの画像レンダリングの問題を修正します。
***
## 次のステップ
実験でメッセージを最適化し、エンゲージメントを促進するものを見つけます。
ユーザーの行動によってトリガーされる自動化されたマルチステップのメッセージングフローを構築します。
パーソナライゼーションとターゲティングのためにユーザーレベルのデータを追加します。
チャネル全体のエンゲージメントとコンバージョンメトリクスを追跡します。
***
## よくある質問
### iOSのユーザーはWebプッシュに登録できますか？
はい、iOS 16.4+から可能です。ユーザーはまずウェブサイトをホーム画面に追加してから、通知の許可を付与する必要があります。完全なセットアップ手順については、[iOS用Webプッシュ](./web-push-for-ios)を参照してください。
### ユーザーがWebプッシュ通知を受信しなくなったのはなぜですか？
最も一般的な原因は、ユーザーがブラウザーデータをクリアしたことで、プッシュサブスクリプションが削除されることです。Webプッシュ設定で**自動再サブスクライブ**を有効にすると、再訪問ユーザーを自動的に再サブスクライブできます。詳細については、[サブスクリプション](./subscriptions)を参照してください。
### Webプッシュ通知はシークレットまたはプライベートブラウジングモードで機能しますか？
いいえ。ユーザーはシークレットまたはプライベートブラウジングモードではWebプッシュに登録できません。通常のセッションで作成されたサブスクリプションはプライベートモードではアクセスできません。
### Webプッシュ通知をサポートするブラウザーはどれですか？
Chrome、Firefox、Safari（macOSおよびiOS 16.4+）、Edgeはすべてwebプッシュをサポートしています。各ブラウザーはプロンプトの動作や通知の表示が異なる場合があります。ブラウザー固有の詳細については、[WebプッシュFAQ](./web-push-setup-faq)を参照してください。
### サブドメインでWebプッシュを使用できますか？
各サブドメイン（例：`app.example.com` と `shop.example.com`）は別々のオリジンです。ブラウザーはWebプッシュに[同一オリジンポリシー](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)を適用するため、各サブドメインには独自のOneSignalアプリが必要です。サービスワーカーも購読ページと同じオリジンでホストする必要があります——CDNや他のサブドメインは許可されていません。セットアップオプションについては、[複数サイト＆サブドメイン](./web-push-setup-faq#multiple-sites--subdomains)を参照してください。
### Webプッシュに複数のドメインを登録するにはどうすればよいですか？
各ドメインまたはサブドメインには個別のOneSignalアプリが必要です。単一のOneSignalアプリは1つのオリジンのみに対応できます。複数のドメインを管理するには、サブスクリプションのためにユーザーを単一のオリジンにリダイレクトするか、オリジンごとに個別のOneSignalアプリを作成してください。詳細な戦略については、[複数サイト＆サブドメイン](./web-push-setup-faq#multiple-sites--subdomains)を参照してください。
### Webプッシュプロンプトが表示されないのはなぜですか？
一般的な原因には、サイトがHTTPS経由で配信されていない、サービスワーカーが正しく登録されていない、ユーザーがすでに許可または拒否している、またはユーザーがシークレットモードにあるなどが含まれます。ブラウザーのコンソールでエラーを確認し、完全なチェックリストについては[通知が表示されない](./notifications-not-shown-web-push)を参照してください。