Posted at

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

More than 1 year has 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を使って通知をオリジナルにカスタマイズする方法でした。