スポンサーリンク

Nuxt.jsでfcmを導入してみる

スポンサーリンク

どうもオーカワです。

 

相変わらず、牛歩戦術でデイリーランチを作っています。

daily-lunch-app
My breathtaking Nuxt.js project

その時にFCM(Firebase Cloud Messaging)を実装したので、その備忘録をと。

ハマりポイント

サーバサイドだと、fcmが動かない

サーバサイドではfcmは動きませんので、クライアントサイドで動かす必要があります。

computedに書き込んだり、紆余曲折ありましたが、最終的にはpluginsに定義するようにしました。

pluginsをnuxt.config.ts(js)でクライアントサイドで呼び出すように設定します。

最新のNuxt.jsではファイル名をある規則に従うだけで、呼び出すサイドをわけれます。

プラグインがクライアント側またはサーバー側でのみ実行されると想定される場合、 .client.js または .server.js をプラグインファイルの拡張として適用することができ、ファイルは自動的に対応する側に含まれます。

プラグイン- Nuxt.jsから引用

plugins/fcm.client.js

import Vue from 'vue'
import firebase from '@/plugins/firebase'

if (firebase.messaging.isSupported()) {
  const messaging = firebase.messaging()
  // Add the public key generated from the console here.
  messaging.usePublicVapidKey(
    'key'
  )
  Vue.prototype.$messaging = messaging
} else {
  Vue.prototype.$messaging = false
}

Vue インスタンスへの$messagingを注入しています(この説明であってるか不安)。

safariやfcmがサポートしてないブラウザだと、エラーが発生する(よくよく考えたらあたりまえ)

以下のコードを入れれば解決します。

if (firebase.messaging.isSupported())

使用方法

前述の通り、Vue インスタンスへの$messagingを注入しているので、コンポーネントなどから呼び出すのは簡単です。

例:

const token = await getToken(this.$messaging)

あとは、公式を参考にすればできます。公式見るのが一番!!

参考

https://qiita.com/yakiniku0220/items/98715a9cd8f20a159d27
https://firebase.google.com/docs/cloud-messaging/js/client?hl=ja

The following two tabs change content below.

オーカワ

GCPばっか触ってるにゃーんエンジニア。 こちらのブログも書いてた。

←Twitterやってるよ。フォロバ率97%

コメント