Web SDKセットアップ

​

要件

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

​

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

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

​

サイトのセットアップ

• Site Name: サイトの名前とデフォルトの通知タイトル。
• Site URL: サイトのURL。詳細については、サイトURLを参照してください。
• Auto Resubscribe: これを有効にすると、ブラウザーデータをクリアしたユーザーがサイトに戻ったときに自動的に再購読されます（新しい権限プロンプトは不要）。
• Default Icon URL: 通知とプロンプトに表示される正方形256×256のPNG、JPG、または非アニメーションGIFをアップロードします。設定されていない場合は、デフォルトとしてベルアイコンが使用されます。通知アイコンをご覧ください。

​

サイトURL

​

ローカルテスト

Localhost構成

SITE URLをlocalhost環境のURLと正確に一致するように設定します。URLは次の一般的なlocalhost形式のいずれかと一致する必要があります：

• http://localhost
• https://localhost:3000
• http://127.0.0.1
• https://127.0.0.1:5000

localhost URLがHTTPを使用している場合は、Treat HTTP localhost as HTTPS for testingを選択してください。Chromeはhttp://localhostとhttp://127.0.0.1をセキュアオリジンとして扱うため、SDKはこれらのホストに限りHTTP経由で初期化できます。その他のホスト名（例：http://mysite.local）はセキュアとして扱われず、Webプッシュのテストには使用できません。

localhostで初期化する際は、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(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      allowLocalhostAsSecureOrigin: true,
    });
  });
</script>

​

権限プロンプト

​

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

​

詳細設定

​

Webhook

​

サービスワーカー

1. Settings > Push & In-App > Webに移動します。
2. Advanced Push Settingsを開きます。
3. Customize service worker paths and filenamesを有効にします。
4. ファイルの公開URLに一致するようにフィールドを設定します：

​

クリック動作

​

永続性

• Typical Site: Settings > Push & In-App > WebのPersistenceトグルを使用します。
• カスタムコード: OneSignal.init()でpersistNotificationを設定します。ダッシュボードのトグルは適用されません。persistNotificationをご覧ください。

​

Safari Web Push .p12証明書（オプション、レガシー）

• macOS 12以前のSafari（VAPID非対応）
• 古いSafari APIを通じてすでに許可を与えた既存の購読者（Safariはこれらの購読をVAPIDに移行しません）

​

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

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

​

サイトにコードを追加

<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 Usersに追加します。

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

2

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

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

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 receiptを確認します。

すべてのセットアップ手順が正常に完了した場合、テストサブスクリプションは通知を受信するはずです。

画像をサポートしているのはChromeのみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。

5

confirmed receiptを確認します。

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

Safariはconfirmed receiptをサポートしていません。

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

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

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

​

ユーザー識別

​

External IDを割り当て

​

データタグを追加

​

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

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

​

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

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

​

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

​

プッシュ通知イベント

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

​

ユーザー状態の変更

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

​

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

​

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

​

FAQ

​

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

​

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

​

Web SDKはどこでサービスワーカーを探しますか？

​

サイトがWordPressまたはShopifyの場合、このガイドを使用すべきですか？

​

Typical Siteとカスタムコードの違いは何ですか？

​

Safari証明書をアップロードする必要はありますか？

​

Safari Webプッシュに.p8キーを使用できますか？

​

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

​

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