メインコンテンツへスキップ

​
概要

Webプッシュ通知を使用すると、リアルタイムの更新、リマインダー、パーソナライズされたメッセージをユーザーに送信でき、エンゲージメントとリテンションを向上させます。OneSignalはすべての主要なブラウザーとプラットフォームをサポートしており、一度書けばChrome、Firefox、Edge、Safari、およびその他のサポートされているブラウザー全体に配信できます。

​
要件

  • HTTPSウェブサイト：WebプッシュはHTTPまたはシークレット/プライベートモードでは機能しません。
  • サーバーアクセス：サービスワーカーファイルをサイトにアップロードする必要があります。
  • 単一オリジン：Webプッシュは同一オリジンポリシーに従います。複数のオリジン（ドメイン/サブドメイン）がある場合は、複数のOneSignalアプリ（オリジンごとに1つ）が必要になります。このブラウザーの制限に準拠するには、次のいずれかを実行できます：
    • サブスクリプションのために単一のオリジンにトラフィックをリダイレクトする。
    • オリジンごとに複数のOneSignalアプリを作成する。
チームがすでにOneSignalでアカウントを作成している場合は、管理者ロールとして招待してもらうことで、アプリをセットアップできます。それ以外の場合は、onesignal.comで無料アカウントにサインアップして開始してください！

​
OneSignalアプリとプラットフォームの構成

OneSignalダッシュボードで：
  • Settings > Push & In-App > Webに移動します。

OneSignal設定でWebプラットフォームをアクティブ化

統合タイプを選択します：

通常のサイト（推奨）

追加のコーディングなしで、OneSignalダッシュボードから直接プロンプトと設定を管理します。

WordPress

公式プラグインを使用したWordPressを使用している場合に必要です。

カスタムコード

プロンプトとSDK構成を完全に制御する必要がある開発者向け。

​
サイトのセットアップ

サイトの詳細を追加します：
  • サイト名：サイトの名前とデフォルトの通知タイトル。
  • サイトURL：サイトのURL。詳細については、サイトURLを参照してください。
  • 自動再サブスクライブ：これを有効にすると、ブラウザーデータをクリアしたユーザーがサイトに戻ったときに自動的に再サブスクライブされます（新しい権限プロンプトは不要）
  • デフォルトアイコンURL：通知とプロンプトに表示される正方形の256x256pxのPNGまたはJPG画像をアップロードします。設定されていない場合は、デフォルトのアイコンとしてベルを使用します。

OneSignalダッシュボードのWeb設定

​
サイトURL

サイトの正確なオリジンを入力します。例：https://yourdomain.com。サイトがそのように構成されていない場合は、www.の使用を避けてください。 複数のオリジンがある場合：
  • 単一のオリジンにリダイレクトします。
  • または、オリジンごとに1つのOneSignalアプリをセットアップします。

​
ローカルテスト

Web SDKはlocalhost環境でテストできます。localhostでテストする場合は、本番アプリとは別のOneSignalアプリをセットアップすることをお勧めします。
SITE URLをlocalhost環境のURLと正確に一致するように設定します。一般的なlocalhost URLである必要があります。例：
  • http://localhost
  • https://localhost:3000
  • http://127.0.0.1
  • https://127.0.0.1:5000
localhostがHTTPを使用している場合は、Treat HTTP localhost as HTTPS for testingを選択します。Google Chromeはhttp://localhostとhttp://127.0.0.1をセキュアオリジンとして扱い、HTTPでもHTTPS統合を許可します。これが、HTTPS localhostで他の非標準オリジンをテストできない理由です。

OneSignalダッシュボードでのローカルテスト

​
OneSignal initオプションにallowLocalhostAsSecureOriginを追加

localhostサイトでOneSignalを初期化する際、OneSignal initオプションにallowLocalhostAsSecureOrigin: true,を追加します。さらに、自己署名証明書を使用したHTTPS上のlocalhostをテストしている場合、テスト用に無効な証明書を無視するようChromeに要求する必要がある場合があります： --allow-insecure-localhost。FirefoxとSafariは、セキュリティ証明書の例外を追加するための組み込みメカニズムを提供します。
html
  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(function(OneSignal) {
      OneSignal.init({
        appId: "YOUR_OS_APP_ID",
        allowLocalhostAsSecureOrigin: true,
      });
    });
  </script>

​
権限プロンプト

通常のサイトセットアップでは、あなたまたはチームメンバーがOneSignalダッシュボードを介して、いつでも権限プロンプトを追加、削除、更新できます。
権限プロンプトの詳細については、Web権限プロンプトを参照してください。

​
ウェルカム通知（オプション）

ユーザーがプッシュ通知にサブスクライブしたときに送信されるウェルカム通知を設定することもできます。

​
詳細設定

OneSignalダッシュボードで構成可能な追加機能。

​
Webhook

Web SDKは、特定のWebプッシュイベントを選択したURLにPOSTする機能を提供します。 WebプッシュWebhookはイベントWebhookとは別の実装であり、互換性がありません。
詳細については、WebプッシュWebhookを参照してください。

​
サービスワーカー

Webプッシュ構成の次のページで、OneSignalSDKWorker.jsサービスワーカーファイルが提供されます。 Web SDKは、デフォルトでサイトのルートでこのファイルを探します。サービスワーカーファイルの場所、名前、スコープを変更したい場合は、ここでこれらの設定を更新できます。
  • Path to service worker filesは、これらのファイルを配置するディレクトリへのパスです。
  • Main and Updater service worker filenamesは、OneSignalSDKWorker.jsのままにするか、このファイルの名前を変更したい場合に使用できます。.jsファイル拡張子を使用する必要があります。
  • Service worker registration scopeは、このファイルが機能できるページです。プッシュ通知の場合、これは重要ではなく、サービスワーカーファイルにさらに機能を追加したい場合のために元々設計されました。これを場所と同じパスに設定する必要があります。

サービスワーカー構成

この例では、ファイルのコードがhttps://yourdomain.com/push/onesignal/OneSignalSDKWorker.jsで公開アクセス可能であることを確認する必要があります
詳細については、OneSignalサービスワーカーを参照してください。

​
クリック動作

通知をクリックしたときに設定したURLにユーザーがどのようにナビゲートするかを制御します。
  • ユーザーがブラウザータブでサイトを開いていない場合、サイトに誘導する通知をクリックすると、ブラウザーは新しいタブを開き、通知のURLに移動します。
  • ユーザーが1つ以上のブラウザータブでサイトを開いている場合、サイトに誘導する通知をクリックすると、ブラウザーが動作できる構成可能な方法がいくつかあります：
    • Exact Navigate（デフォルト） - 通知の正確なURL（例：example.com/product）がブラウザーがすでに開いているタブと一致する場合、ブラウザーはそのタブで通知のURLに移動します。
    • Origin Navigate - 通知のオリジン（例：example.com）がブラウザーがすでに開いているタブと一致する場合、ブラウザーはそのタブで通知のURLに移動します。
    • Exact Focus - 通知の正確なURL（例：example.com/product）がブラウザーがすでに開いているタブと一致する場合、ブラウザーはそのタブにフォーカスしますが、ページを更新しません。
    • Origin Focus - 通知のオリジン（例：example.com）がブラウザーがすでに開いているタブと一致する場合、ブラウザーはそのタブにフォーカスしますが、ページを更新しません。

​
永続性

デフォルトのWebプッシュ動作は、通知センターに移動される前に約5秒間デバイスにポップアップ表示され、オペレーティングシステムによって削除される前に約1週間そこに保持されます。 一部のデバイスとChromeおよびEdgeのバージョンでは、画面上で通知をより長く持続させることができます。これは、ユーザーが操作するまで通知が画面上に留まることを意味します。これはユーザーを苛立たせる可能性があり、推奨されません。 また、永続性を有効にすると、文字数が減少し、画像やボタンの表示方法に影響を与えることで、サブスクライバーへの通知の表示方法に影響します。 変更すると、更新された設定でサイトにアクセスするサブスクライバーに対してのみ有効になります。これらのオプションの変更が表示されない場合は、待つ必要があります

​
Safari証明書（オプション）

OneSignalは、Safariブラウザーで動作するために必要な証明書を追加費用なしで自動的に提供します。すでに独自のSafari Webプッシュ証明書をお持ちの場合は、このオプションを切り替えてSafari Web .p12 Push Certificateとパスワードをアップロードします。

Safari証明書構成

​
サービスワーカーファイルのアップロード

上記の詳細設定 > サービスワーカーで簡単に説明したように、OneSignalSDKWorker.jsサービスワーカーファイルをサイトに追加します。

サービスワーカーファイルのアップロード手順

詳細設定 > サービスワーカーセクションでPath to service worker filesを設定していない場合は、サイトのトップレベルのルートにOneSignalSDKWorker.jsファイルを配置する必要があります。それ以外の場合は、設定したディレクトリに配置する必要があります。
  • オプション1. サーバーでファイルを作成してコードをコピー
  • オプション2. zipフォルダーをダウンロードしてアップロード
  1. OneSignalSDKWorker.jsという新しいファイルを作成し、公開します。
  2. 次のimportステートメントをファイルにコピーペーストします：
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
ファイルがサーバーにある場合は、次のことを確認して動作を確認してください：
1

場所を確認

ファイルが詳細設定 > サービスワーカーで設定されたのと同じPath to service worker filesに配置されていることを確認してください。これらの設定を更新していない場合は、ファイルをルートに配置する必要があります。例：
  • https://yourdomain.com/OneSignalSDKWorker.js
  • https://yourdomain.com/some-subdirectory/OneSignalSDKWorker.js
2

オリジンで公開アクセス可能である必要があります

OneSignalSDKWorker.jsファイルは、オリジンで公開アクセス可能で利用可能である必要があります。CDN経由でホストしたり、リダイレクトで別のオリジンに配置したりすることはできません。ファイルのURLにアクセスすると、コードが表示されるはずです。
3

content-type: application/javascriptで提供される必要があります

これはjavascriptファイルであり、そのように提供される必要があります。content-typeがtext/htmlであってはなりません。
追加の質問がある場合、または別のWebプッシュプロバイダーからOneSignalに移行する場合は、OneSignalサービスワーカードキュメントを確認することをお勧めします。

​
サイトにコードを追加

これで、SDKをサイトに追加する準備が整いました。提供されるJavaScript SDKコードはあらゆるサイトで機能するはずですが、サイトがAngular、React JS、またはVue JSを使用してセットアップされている場合は、これらのリンクに従ってください。 JavaScript SDKを使用してサイトでOneSignalを初期化するには、提供されたコードをWebサイトの<head>タグにコピー/ペーストします。ダッシュボードは次のコードを提供しますが、OneSignal app IDが含まれています。
JavaScript
  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(async function(OneSignal) {
      await OneSignal.init({
        appId: "YOUR_ONESIGNAL_APP_ID",
      });
    });
  </script>

​
iOS Webプッシュサポート

Appleは、iOS 16.4+を実行しているiPhoneとiPadでWebプッシュ通知のサポートを開始しました。サポートされているブラウザーでアクセスするだけでWebプッシュが「機能する」Androidデバイスとは異なり、Appleはmanifest.jsonファイルやユーザーがサイトをホーム画面に追加するアクションなど、いくつかの追加要件を追加しました。

iOS Webプッシュセットアップ

必要なmanifest.jsonファイルを追加し、ユーザーにサイトをホーム画面に追加するように案内します。

​
OneSignal SDK統合のテスト

このガイドでは、プッシュ通知とサブスクリプション登録をテストして、OneSignal SDK統合が正しく機能していることを確認する方法を説明します。

​
Webプッシュサブスクリプションを確認

1

テストデバイスでサイトを起動します。

  • テスト中は、Chrome、Firefox、Edge、またはSafariを使用してください。
  • **シークレットモードやプライベートブラウジングモードは使用しないでください。**これらのモードでは、ユーザーはプッシュ通知にサブスクライブできません。
  • 許可プロンプトの設定に基づいてプロンプトが表示されるはずです。
  • プッシュ通知にサブスクライブするには、ネイティブプロンプトでAllowをクリックします。

Webプッシュのネイティブ許可プロンプト

2

OneSignalダッシュボードを確認

OneSignalダッシュボードを確認してください：
  • Audience > Subscriptionsに移動します。
  • ステータスがSubscribedの新しいエントリが表示されるはずです。

「Subscribed」ステータスのサブスクリプションを表示するダッシュボード

Webプッシュサブスクリプションの作成に成功しました。 Webプッシュサブスクリプションは、ユーザーがサイトでプッシュ通知に初めてサブスクライブしたときに作成されます。

​
テストサブスクリプションをセットアップ

テストサブスクリプションは、メッセージを送信する前にプッシュ通知をテストするのに役立ちます。
1

Test Subscriptionsに追加します。

ダッシュボードで、サブスクリプションの横にある**Options（3つのドット）**ボタンをクリックし、Add to Test Subscriptionsを選択します。

デバイスをTest Subscriptionsに追加

2

サブスクリプションに名前を付けます。

Test Subscriptionsタブで後でデバイスを簡単に識別できるように、サブスクリプションに名前を付けます。

「Name your subscription」フィールドを表示するダッシュボード

3

テストユーザーセグメントを作成します。

Audience > Segments > New Segmentに移動します。
4

セグメントに名前を付けます。

セグメントにTest Usersという名前を付けます（この名前は後で使用されるため重要です）。
5

Test Usersフィルターを追加し、Create Segmentをクリックします。

Test Usersフィルターを使用して「Test Users」セグメントを作成

テストユーザーのセグメントの作成に成功しました。 この個別のデバイスとテストユーザーのグループにメッセージを送信するテストが可能になりました。

​
API経由でテストプッシュを送信

1

App API KeyとApp IDを取得します。

OneSignalダッシュボードで、**Settings > Keys & IDs**に移動します。
2

提供されたコードを更新します。

以下のコードのYOUR_APP_API_KEYとYOUR_APP_IDを実際のキーに置き換えます。このコードは、先ほど作成したTest Usersセグメントを使用します。
curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'
3

コードを実行します。

ターミナルでコードを実行します。
4

画像とConfirmed Deliveryを確認します。

すべてのセットアップ手順が正常に完了した場合、テストサブスクリプションは通知を受信するはずです。
画像をサポートしているのはChromeのみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。

Chrome macOSで画像付きの展開されたプッシュ通知

5

Confirmed Deliveryを確認します。

ダッシュボードで、Delivery > Sent Messagesに移動し、メッセージをクリックして統計を表示します。confirmed統計が表示されるはずです。これは、デバイスがプッシュを受信したことを意味します。
SafariはConfirmed Deliveryをサポートしていません。

Confirmed Deliveryを示す配信統計

Professionalプラン以上をご利用の場合は、Audience Activityまでスクロールして、サブスクリプションレベルの確認を表示します：

Audience Activityでのデバイスレベルでの Confirmed Delivery

API経由でセグメントに通知を送信することに成功しました。
サポートが必要ですか？次の情報を添えてsupport@onesignal.comにお問い合わせください：
  • APIリクエストとレスポンスを.txtファイルにコピー&ペースト
  • あなたのSubscription ID
  • OneSignalコードを含むあなたのウェブサイトURL
喜んでお手伝いします！

​
ユーザー識別

以前、Webプッシュサブスクリプションの作成方法を説明しました。次に、OneSignal SDKを使用して、すべてのサブスクリプション（プッシュ、メール、SMSを含む）にわたるユーザーの識別に拡張します。プラットフォーム間でユーザーを統合し、エンゲージメントするために、External ID、タグ、マルチチャネルサブスクリプション、プライバシー、イベントトラッキングについて説明します。

​
External IDを割り当て

External IDを使用して、バックエンドのユーザー識別子を使用して、デバイス、メールアドレス、電話番号間でユーザーを一貫して識別します。これにより、チャネルとサードパーティシステム間でメッセージングが統一されたままになります（特に統合に重要）。 アプリによって識別されるたびに、SDKのloginメソッドを使用してExternal IDを設定します。
OneSignalは、サブスクリプション（Subscription ID）とユーザー（OneSignal ID）に対して一意の読み取り専用IDを生成します。ユーザーが異なるデバイスでアプリをダウンロードしたり、ウェブサイトにサブスクライブしたり、アプリ外でメールアドレスや電話番号を提供したりすると、新しいサブスクリプションが作成されます。すべてのサブスクリプションにわたってユーザーを識別するために、SDK経由でExternal IDを設定することを強くお勧めします。作成方法に関係なく。

​
データタグを追加

タグは、ユーザープロパティ（username、role、設定など）とイベント（purchase_date、game_level、ユーザーインタラクションなど）を保存するために使用できる文字列データのキーと値のペアです。タグは、高度なメッセージパーソナライゼーションとセグメンテーションを強化し、より高度なユースケースを可能にします。 アプリでイベントが発生したときに、SDKのaddTagおよびaddTagsメソッドを使用してタグを設定します。 この例では、ユーザーはレベル6に到達し、current_levelというタグで識別され、値は6に設定されます。

"current_level"というタグが"6"に設定されたOneSignalのユーザープロファイル

レベルが5から10の間のユーザーのセグメントを作成し、それを使用してターゲット化されたパーソナライズされたメッセージを送信できます：

current_level値が4より大きく10より小さいユーザーをターゲットとするセグメントを示すセグメントエディター


パーソナライズされたメッセージでLevel 5-10セグメントをターゲットとするプッシュ通知を示すスクリーンショット

​
メールおよび/またはSMSサブスクリプションを追加

以前、SDKがプッシュを送信するためにWebプッシュサブスクリプションを作成する方法を見ました。対応するサブスクリプションを作成することで、メールとSMSチャネルを通じてユーザーにリーチすることもできます。 メールアドレスや電話番号がOneSignalアプリに既に存在する場合、SDKはそれを既存のユーザーに追加し、重複は作成しません。 ダッシュボードのAudience > UsersまたはView user APIを使用して、統合されたユーザーを表示できます。

External IDによって統合されたプッシュ、メール、SMSサブスクリプションを持つユーザープロファイル

マルチチャネルコミュニケーションのベストプラクティス
  • メールまたはSMSサブスクリプションを追加する前に、明示的な同意を得てください。
  • 各コミュニケーションチャネルの利点をユーザーに説明してください。
  • ユーザーが好むチャネルを選択できるように、チャネルの設定を提供してください。

​
プライバシーとユーザー同意

OneSignalがユーザーデータを収集するタイミングを制御するには、SDKの同意ゲーティングメソッドを使用します： 詳細については、プライバシーとセキュリティのドキュメントを参照してください：

​
プッシュ、ユーザー、アプリ内イベントをリッスン

SDKリスナーを使用して、ユーザーのアクションと状態の変化に反応します。 SDKは、フックできるいくつかのイベントリスナーを提供します。詳細については、SDKリファレンスガイドを参照してください。

​
プッシュ通知イベント

​
ユーザー状態の変更

​
高度なセットアップと機能

統合を強化するための追加機能を探索します：

​
Web SDKのセットアップとリファレンス

Webプッシュセットアップガイドを確認して、すべての主要機能が有効になっていることを確認してください。 利用可能なメソッドと設定オプションの詳細については、Web SDKリファレンスにアクセスしてください。
おめでとうございます！Web SDKセットアップガイドが正常に完了しました。
サポートが必要ですか？サポートチームとチャットするか、support@onesignal.comにメールしてください以下を含めてください：
  • 発生している問題の詳細と再現手順（利用可能な場合）
  • OneSignal App ID
  • 該当する場合は、External IDまたはSubscription ID
  • 該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
  • 関連するログまたはエラーメッセージ
お気軽にお問い合わせください！