前回、Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発で、Nuxt v2を使ってPWA対応のWebアプリケーションを作りました。
今回OneSignalというサービスを利用して、このPWA対応Webアプリにプッシュ通知を送ります。
NuxtにはOneSignal用のモジュールが用意されているので、これを使うと簡単にプッシュ通知が送れるようになります。
インストールや設定
OneSignalにアプリを追加する
まずはOneSignalのサイトからSignUpして、アカウントを作成してください。
「Add a New App」でアプリケーション名を入力します。ここでは「pwa-sample」とします。
今回はWebアプリケーションなので、「Web Push」を選択します。
Webアプリケーションのサイト情報を入力します。
「ADD A PROMPT」より通知を追加します。
今回は「SLIDE PROMPT」を選択します。
アプリを保存すると、APP IDが発行されますので、「appId」をメモしておきます。
NuxtのOneSignalモジュールの設定
- まずはonesignalモジュールをインストールします。
$ yarn add @nuxtjs/onesignal --save
- nuxt.config.jsのmodules内「@nuxtjs/pwa」の前に「@nuxtjs/onesignal」を追加します。
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/dotenv',
'@nuxtjs/axios',
'@nuxtjs/onesignal',
'@nuxtjs/pwa'
],
- nuxt.config.jsにOneSignalの設定を追加します。 appIdは先ほどOneSignalで取得したアプリのappIdを設定します。
oneSignal: {
init: {
appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: true
}
}
},
通知を送る
OneSignalのコンソールからメッセージ送信
まずはここまでで、FirebaseのHostingにデプロイしてみましょう。
generateして、deployする手順は「Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発」を参考にしてください。ブラウザでデプロイしたサイトを開くと、早速ブラウザから通知の許可が求められますので、許可します。
OneSignalのコンソールの「MESSAGES」から「NEW PUSH」を選択します。
Send to Subscribed Usersを選択します。
通知のタイトルのメッセージを入力します。
通知タイミングを選択します。今回はテストのためすぐに送ります。
「Confirm」で内容を確認し、「SEND MESSAGE」をクリックします。
通知が送信されます。PCのブラウザやスマホの画面にも通知が表示されます。
特定のユーザーのみに通知を送りたい
例えばチャットWebアプリケーションなどで、メッセージを受信したときに特定のユーザーだけ通知を受け取りたいケースがあると思います。
OneSignalの通知APIを使うと、コンソールを使わなくても、特定のユーザーだけに通知を送ることができます。
OneSignalのtagを利用して特定のユーザーに通知
通知を受ける側
Nuxtのpages内のcreated()などでOneSignalのtagを設定します。
以下の例ではtagの名前を「id」とし、値に「100」を設定しています。
この例では固定の「100」をidとして設定していますが、this.currentUser.uidのようにFirebase AuthenticationのUIDなどを設定することで、ユーザーの識別が可能です。
this.$OneSignal.push(['sendTag', 'id', 100, function(tagsSent) {}])
通知を送る
OneSignalのnotificationのAPIを呼び出すことで、通知を送ることができます。
通知を送る側はNode.jsでもなんでも良いのですが、今回はNuxtのフロント側JavaScriptだけで完結するため、axiosからAPIを呼び出します。
var params = {
method: 'post',
url: 'https://onesignal.com/api/v1/notifications',
headers: {
'Content-Type': 'application/json',
Authorization: 'Basic yyyyyyyyyyyyyyyyyyyyyyyyy'
},
data: {
app_id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
headings: {
en: 'notification test',
ja: 'id:100の人に通知です'
},
contents: {
en: 'This is notification test',
ja: 'id:100の人に通知です'
},
tags: [{ key: 'id', relation: '=', value: 100 }]
}
}
axios(params)
headersのAuthorizationにOneSignalの認証キーを設定します。
OneSignalのコンソール画面右上の「Account & API KEYS」より「REST API Keys」を参照し、アプリのAPI Keyをコピペします。
dataのapp_idには先ほど「OneSignalにアプリを追加する」で取得したappIdを設定します。
dataのtagsに「通知を受ける側」で設定したkey:'id'、値が100を設定します。
通知を送りたいタイミングで上記の処理を呼び出すと、id=100のユーザーだけに通知を送ることができます。
まとめ
Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発のリアルタイムチャットに続き、通知を送る処理を実装しました。
NuxtのPWA対応に続き、OneSignalを使った通知も、onesignalモジュールを使うことで簡単に実装できました。