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

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

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

FCMには

Notification Message
アイコンを変更したり、バイブレーションパターンを変更したりはできないが、実装が手軽な通知
Data Message
通知をフルカスタマイズできるが、実装が少し面倒な通知

の２種類の通知があります。
上の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を使って通知をオリジナルにカスタマイズする方法でした。

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

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

Service worker への記述

Notification Options の説明