Vue JS Web SDKセットアップ

​

概要

​

要件

• 構成されたOneSignalアプリとプラットフォーム。開始するにはWebプッシュセットアップを参照してください。

​

Vue互換性

​

インストール

yarn add onesignal-vue
# or yarn add @onesignal/onesignal-vue3

​

初期化

import Vue from 'vue'
import OneSignalVue from 'onesignal-vue'

Vue.use(OneSignalVue);

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({ appId: 'YOUR_APP_ID' });
  }
}).$mount('#app')
//Example 1
await this.$OneSignal.init({ appId: 'YOUR_APP_ID' });
// do other stuff

//Example 2
this.$OneSignal.init({ appId: 'YOUR_APP_ID' }).then(() => {
  // do other stuff
});

​

Composition API

​

init オプションのカスタマイズ

​

サービスワーカーの設定

this.$OneSignal.init({
  appId: 'YOUR-ONESIGNAL-APP-ID',
  serviceWorkerParam: {
    scope: '/onesignal/'
  },
  serviceWorkerPath: 'onesignal/OneSignalSDKWorker.js'
});

​

ワーカーのホスティング

• パブリックルート（デフォルト）：/OneSignalSDKWorker.js
• カスタムフォルダー（推奨）：例：前のステップで設定した/onesignal/OneSignalSDKWorker.js

​

サービスワーカーのホスティングを確認

https://your-site.com/OneSignalSDKWorker.js

https://your-site.com/onesignal/OneSignalSDKWorker.js

​

重要な注意事項

• 開発環境での重複初期化を回避
  • 開発環境でテストする場合、OneSignal SDKが2回初期化され、コンソールエラーが発生する可能性があります。
  • これは、<React.StrictMode>が開発環境でエフェクトを2回実行するために発生します。解決するには、開発中にルートコンポーネントから<React.StrictMode>を削除してください。

​

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セグメントを使用します。

Copy

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

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

喜んでお手伝いします！

​

ユーザー識別

​

External IDを割り当て

​

データタグを追加

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

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

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

​

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

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

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

​

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

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

• SDKによって収集されるデータ
• 個人データの取り扱い

​

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

​

プッシュ通知イベント

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

​

ユーザー状態の変更

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

​

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

• 🔁 別のサービスからOneSignalへの移行
• 🔌 統合
• 🛎️ アクションボタン
• 🌐 多言語メッセージング
• 🛡️ Identity Verification
• 📊 カスタムアウトカム

​

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