NuxtでPWA対応WebアプリにOneSignalからプッシュ通知を送る

前回、Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発で、Nuxt v2を使ってPWA対応のWebアプリケーションを作りました。

今回OneSignalというサービスを利用して、このPWA対応Webアプリにプッシュ通知を送ります。

NuxtにはOneSignal用のモジュールが用意されているので、これを使うと簡単にプッシュ通知が送れるようになります。


インストールや設定


OneSignalにアプリを追加する


  • まずはOneSignalのサイトからSignUpして、アカウントを作成してください。


  • 「Add a New App」でアプリケーション名を入力します。ここでは「pwa-sample」とします。

    Add a New App


  • 今回はWebアプリケーションなので、「Web Push」を選択します。

    Web Push


  • Webアプリケーションのサイト情報を入力します。

    サイト情報入力


  • 「ADD A PROMPT」より通知を追加します。

    ADD A PROMPT


  • 今回は「SLIDE PROMPT」を選択します。

    SLIDE PROMPT


  • アプリを保存すると、APP IDが発行されますので、「appId」をメモしておきます。

    APP ID



NuxtのOneSignalモジュールの設定


  • まずはonesignalモジュールをインストールします。

$ yarn add @nuxtjs/onesignal --save


  • nuxt.config.jsのmodules内「@nuxtjs/pwa」の前に「@nuxtjs/onesignal」を追加します。


/nuxt.config.js

  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を設定します。


/nuxt.config.js

 oneSignal: {

init: {
appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
allowLocalhostAsSecureOrigin: true,
welcomeNotification: {
disable: true
}
}
},


通知を送る


OneSignalのコンソールからメッセージ送信


  • まずはここまでで、FirebaseのHostingにデプロイしてみましょう。

    generateして、deployする手順は「Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発」を参考にしてください。


  • ブラウザでデプロイしたサイトを開くと、早速ブラウザから通知の許可が求められますので、許可します。

    通知許可


  • OneSignalのコンソールの「MESSAGES」から「NEW PUSH」を選択します。

    NEW PUSH


  • Send to Subscribed Usersを選択します。

    送信先


  • 通知のタイトルのメッセージを入力します。

    通知内容編集


  • 通知タイミングを選択します。今回はテストのためすぐに送ります。

    通知タイミング選択


  • 「Confirm」で内容を確認し、「SEND MESSAGE」をクリックします。

    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をコピペします。

    スクリーンショット 2018-10-28 9.48.57.png


  • dataのapp_idには先ほど「OneSignalにアプリを追加する」で取得したappIdを設定します。


  • dataのtagsに「通知を受ける側」で設定したkey:'id'、値が100を設定します。


通知を送りたいタイミングで上記の処理を呼び出すと、id=100のユーザーだけに通知を送ることができます。


まとめ

Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発のリアルタイムチャットに続き、通知を送る処理を実装しました。

NuxtのPWA対応に続き、OneSignalを使った通知も、onesignalモジュールを使うことで簡単に実装できました。