Web SDKセットアップ

​

概要

​

要件

• HTTPSウェブサイト：WebプッシュはHTTPまたはシークレット/プライベートモードでは機能しません。
• サーバーアクセス：サービスワーカーファイルをサイトにアップロードする必要があります。
• 単一オリジン：Webプッシュは同一オリジンポリシーに従います。複数のオリジン（ドメイン/サブドメイン）がある場合は、複数のOneSignalアプリ（オリジンごとに1つ）が必要になります。このブラウザーの制限に準拠するには、次のいずれかを実行できます：
  • サブスクリプションのために単一のオリジンにトラフィックをリダイレクトする。
  • オリジンごとに複数のOneSignalアプリを作成する。

​

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

• Settings > Push & In-App > Webに移動します。

​

サイトのセットアップ

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

​

サイトURL

• 単一のオリジンにリダイレクトします。
• または、オリジンごとに1つのOneSignalアプリをセットアップします。

​

ローカルテスト

Localhost構成

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 initオプションにallowLocalhostAsSecureOriginを追加

localhostサイトでOneSignalを初期化する際、OneSignal initオプションにallowLocalhostAsSecureOrigin: true,を追加します。さらに、自己署名証明書を使用したHTTPS上のlocalhostをテストしている場合、テスト用に無効な証明書を無視するようChromeに要求する必要がある場合があります： --allow-insecure-localhost。FirefoxとSafariは、セキュリティ証明書の例外を追加するための組み込みメカニズムを提供します。

コピー

AIに質問

  <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>

​

権限プロンプト

​

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

​

詳細設定

​

Webhook

​

サービスワーカー

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

​

クリック動作

​

永続性

​

Safari証明書（オプション）

​

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

​

サイトにコードを追加

  <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プッシュサポート

​

OneSignal SDK統合のテスト

​

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

1

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

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

2

OneSignalダッシュボードを確認

• Audience > Subscriptionsに移動します。
• ステータスがSubscribedの新しいエントリが表示されるはずです。

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

​

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

1

Test Subscriptionsに追加します。

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

2

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

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

3

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

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

4

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

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

5

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

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

​

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

1

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

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

2

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

以下のコードのYOUR_APP_API_KEYとYOUR_APP_IDを実際のキーに置き換えます。このコードは、先ほど作成したTest Usersセグメントを使用します。

コピー

AIに質問

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のみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。

5

Confirmed Deliveryを確認します。

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

SafariはConfirmed Deliveryをサポートしていません。

プッシュ通知メッセージレポート

プッシュ通知の配信、クリック、コンバージョン統計を表示します。

• APIリクエストとレスポンスを.txtファイルにコピー＆ペースト
• サブスクリプションID
• OneSignalコードを含むウェブサイトURL

​

ユーザー識別

​

External IDを割り当て

​

データタグを追加

​

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

• addEmailメソッドを使用してメールサブスクリプションを作成します。
• addSmsメソッドを使用してSMSサブスクリプションを作成します。

​

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

• setConsentRequired(true)：同意が与えられるまでデータ収集を防ぎます。
• setConsentGiven(true)：同意が付与されるとデータ収集を有効にします。

​

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

​

プッシュ通知イベント

• クリックイベントリスナー：通知がタップされたときを検出します。
• フォアグラウンドライフサイクルリスナー：フォアグラウンドでの通知の動作を制御します。

​

ユーザー状態の変更

• ユーザー状態変更イベントリスナー：External IDが設定されたときを検出します。
• 許可オブザーバー：ネイティブのプッシュ許可プロンプトとのユーザーの特定のインタラクションを追跡します。
• プッシュサブスクリプション変更オブザーバー：プッシュサブスクリプションのステータスが変更されたときを追跡します。

​

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

​

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

​

FAQ

​

HTTPサイトでWebプッシュは機能しますか？

​

サービスワーカーファイルが必要なのはなぜですか？

​

iOS（iPhone/iPad）でWebプッシュを使用できますか？

​

通知が表示されないのはなぜですか？