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

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」とします。
  
  
  
  
• 今回は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」を追加します。

/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」を選択します。
  
  
  
  
• 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モジュールを使うことで簡単に実装できました。