conocode
このコード
トラブルシューティング

FCM で Web Push してみようかと思ったら Uncaught TypeError: firebase.messaging is not a function

FCM(Firebase Cloud Messaging) を使って Web Push を試してみようと思ったら
Uncaught TypeError: firebase.messaging is not a function
というエラーが出たんですけど
Firebase は必要な機能だけをロードできるんだけど、Messaging のモジュールをロードしていないんじゃない?

FCM(Firebase Cloud Messaging) を使って Web Push を試してみました。
Firebaseオブジェクトのメソッドを使ってメッセージング用のオブジェクトを取得しようとして javascript で

という処理を実行させたら

Uncaught TypeError: firebase.messaging is not a function

というエラーが実行時に出てしまいました。

firebase オブジェクト自体は存在するようですが、messaging メソッドが無いようです。

調べた結果、Firebase はロードするコードの量を少なくするため、機能毎にコードが分けられており、機能を使うときは機能毎に script をロードしてあげないといけないようでした。
具体的には

と Firebase 本体をロードする記述のところに

という具合に、メッセージング機能のロードを追加しました。
順番は firebase-app.js が先でないとまずいようです。

メッセージング機能をロードするように修正したら無事に動作し、通知が送信できるようになりました