Nuxt.js + Firebase Cloud Messagingを使ってWeb pushをしてみた（実践編）

今回はNuxt.js #2 Advent Calendar 2018の9日目に書いた記事の続きを書こうと思います。
まだ見てない方はご覧ください。

概要

今回は実践編ということで、curlを使ってプッシュ通知を送ってみましたが、フォームで入力した文字をそのままプッシュのメッセージとして送るようにしようと思います。

実際の処理の流れ

const messaging = firebase.messaging()
messaging.usePublicVapidKey('PUBLIC KEY')
messaging.requestPermission().then(function() {
  messaging.getToken().then(function(currentToken) {
    const headers = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: 'Bearer {access token}'
      }
    }
    let data = {
      message: {
        to: currentToken,
        notification: {
          title: 'Formで入力したtitle',
          body: 'Formで入力したbody',
          click_action: 'Formで入力したurl'
        }
      }
    }
    axios.post('https://fcm.googleapis.com/fcm/send', data, headers)
  })
  .catch(function(err) {
    console.log('not', err)
  })
})
.catch(function(err) {
  console.log('Unable to get permission to notify.', err)
})

実際の処理はこれだけです。

Authorizationのサーバーキーは

に表示されているサーバーキーを使います。

notificationに書いてある項目は、実際にフォームで入力したdateを渡します。

最後にaxiosを使ってpostすると通知が届くようになります。

今回は実装の量が少ないので、直接method内に記載しましたが、token取得や、axiosでのpushの処理はvuexで処理した方がコードは綺麗になります。

まとめ

今回はフォームで入力した文字をそのまま自分のブラウザにpush通知を送る仕様にしましたが、業務などで使う場合は、ログインや新規登録のタイミングでtoken発行してdbに保存しておけば、そのユーザーのみに個別pushを送ることができます。
簡単にWebでのpush通知ができるのはいいなと思いました。
個人的には今後も使ってみようと思います。

今回書いたコードは後ほどgihubに載せようと思うのでご覧ください。

明日は弊社Androidチームのfujiくんです。
お楽しみに。