Help us understand the problem. What is going on with this article?

Firebase を使った Web 通知をオリジナルにカスタマイズする方法

More than 3 years have passed since last update.

Firebaseを使ってWeb通知を送ろうとしたのですが、web通知初心者の私は思ったよりも苦戦したので共有します。

基本はこちらにあるCloud functionを使ったweb通知の送り方の例通りなのですが、オリジナルのアイコンやバイブレーションパターンなどを実装したい時にはこの例を少しいじる必要があるので、そこを説明していきます。

FCMには2種類の通知がある

FCMには

  • Notification Message
    アイコンを変更したり、バイブレーションパターンを変更したりはできないが、実装が手軽な通知

  • Data Message
    通知をフルカスタマイズできるが、実装が少し面倒な通知

の2種類の通知があります。
上のfirebase公式の例で使われているのはNotification Messageなので、まずはそれをData Messageに変えましょう。

変更方法は54行目くらいにあるこれ

// Notification details.
    const payload = {
      notification: {
        title: 'You have a new follower!',
        body: `${follower.displayName} is now following you.`,
        icon: follower.photoURL
      }
    }

の notification という key を data 変えるだけです

// Notification details.
    const payload = {
      data: {
        title: 'You have a new follower!',
        body: `${follower.displayName} is now following you.`,
        icon: follower.photoURL
      }
    }

これで Cloud function 側の変更は終了です。

Service worker への記述

FCMのWeb版を使うには Root directory に firebase-messaging-sw.js というファイルを作り、公式ドキュメンテーションから以下のコードをコピペしておく必要があります。

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js')

firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
})

const messaging = firebase.messaging();

ここまでは documentation 通りです。このコードの下にこんな感じのコードを追加します。

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload)

  // Customize notification here
  const notification = payload.data

  const notificationTitle = notification.title

  const notificationOptions = {
    body: notification.body,
    icon: notification.icon,
    badge: '/images/notification/badge.png',
    tag: 'exampleTag',
    vibrate: [150,100,150,100,200]
  }

  return self.registration.showNotification(notificationTitle,
      notificationOptions)
})

上のコードの notification という variable にFCMで送られて来たデータが入っています。
そのデータを使い、 notificationTitle と notificationOptions のオブジェクトを作って、 showNotification を call すればそれで通知が表示されます。

Notification Options の説明

Notification Options とは、通知のアイコンやらバイブレーションパターンやら様々なものを指定できるオブジェクトなのですが、具体的に何を指定できるのか書きます。
ここに書かれているものは全部ここから持って来ました。

  • icon
    通知のアイコンを指定できる

  • badge
    通知のバッジを指定できる。バッジとはモノクロの小さな画像で、通知が来た時にスマホの上部に表示されます。これが指定されていないとブラウザのマークが表示されます。

  • image
    大きな画像付きの通知を送れる。

  • tag
    通知にタグを設定できる。タグを設定することで、同一のタグの通知を一つにまとめたりできる。

  • renotify
    タグを設定した時に、同一のタグの通知がくるとデフォルトでは通知は音も鳴らさないし、バイブもしないが、renotifyがtrueになっていると新着通知のように音を鳴らし、バイブもする。

  • Silent
    通知を表示しても音も鳴らさなければバイブもしなくなる。

  • vibration
    オリジナルのバイブレーションパターンを指定できる。指定の仕方は数字のarrayで、[200,150,300,100,200]例えばこうすると200msバイブがなり、150ms静か、また300msなり、100ms静か、最後に200msなって終了といった具合で指定できる。

  • sound
    音声ファイルへのpathを指定することでオリジナルの音声を再生することができる

これが全てではないですけれど、大方使うのはこれくらいかと思われます。

以上がFCMを使って通知をオリジナルにカスタマイズする方法でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away