Web SDK - カスタムコードセットアップ

• Angularセットアップ
• React JSセットアップ
• Vue JSセットアップ

​

要件

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

​

OneSignalアプリとプラットフォームを構成する

• Settings > Push & In-App > Web に移動します。
• Custom Code 統合タイプを選択します。

​

サイトセットアップ

• Site Name：サイトの名前とデフォルトの通知タイトル。
• Site URL：サイトの正確なオリジン、例：https://yourdomain.com。サイトがそのように構成されていない場合は www. の使用を避けてください。複数のオリジンがある場合は要件を参照してください。
• Auto Resubscribe：ユーザーがブラウザーデータをクリアした後にサイトに戻ったときに自動的に再サブスクライブするには、これを有効にします（新しい権限プロンプトは不要）。
• Default Icon URL：通知とプロンプトに表示される正方形の 256x256px PNG または JPG 画像をアップロードします。設定されていない場合は、デフォルトとしてベルアイコンが使用されます。

​

ローカルテスト

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

​

Safari Webプッシュ証明書（オプション）

​

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

​

サイトにコードを追加

• YOUR_ONESIGNAL_APP_ID を OneSignalダッシュボードの実際のApp IDに
• YOUR_SAFARI_WEB_ID を OneSignalダッシュボードの実際のSafari Web IDに

<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",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      notifyButton: {
        enable: true,
      },
    });
  });
</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セグメントを使用します。

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

​

Webプッシュ通知にHTTPSは必要ですか？

​

このセットアップをシングルページアプリケーション（SPA）で使用できますか？

​

ユーザーがブラウザーデータをクリアするとどうなりますか？

​

関連ページ