FCM(Firebase雲メッセージング)をVuejsに加える方法

最近、私が働いているVueアプリケーションにFCM(Firebase Cloud Messaging)を実装する仕事がありました.そして、私はいくつかのガイドがあることを発見しました.しかし、FCMのAPI、Vue CLIとVue It自己がそれから更新されたので、あまりにあまり私を助けませんでした.

Step 1 -サービスワーカーファイルを追加する
まず最初に必要なのはサービスワーカーファイルを追加することですfirebase-messaging-sw.js にpublic フォルダ(このファイル名を使用するのは重要です.なぜなら、FireBaseは特定の名前でこのファイルを探すでしょう.
(もしあなたが単語「サービスワーカー」に慣れていないならば、あなたはそれについてもっと学ぶことができますHere or Here )

//firebase-messaging-sw.js

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

var firebaseConfig = {
  apiKey: <API-KEY>,
  authDomain: <AUTH-DOMAIN>,
  projectId: <PROJECT-ID>,
  storageBucket: <STORAGE-BUCKET>,
  messagingSenderId: <MESSAGING-SENDER-ID>,
  appId: <APP-ID>,
  measurementId: <MEASUREMENT-ID>
}

const app = firebase.initializeApp(firebaseConfig)

Replace the config json above with the one you got from firebase
Go to your project home page at firebase -> Press on the Settings icon -> click 'Project Settings' -> Scroll down -> firebaseConfig object

ステップ2 -サービスワーカーを登録します
次のステップはサービスワーカーを登録することです.
以下のような方法があります.

FireBaseパッケージを使用したい場合は、手順3に進みます.

Vue CLIのPWAプラグインを使用する
あなたがVue CLI(v 3 +)を通してあなたのアプリケーションをつくったならば、あなたはPWA支持オプションを加えました(インストールの後、手動でこのプラグインを加えました)、あなたはサービスワーカーを登録することができますregisterServiceWorker.js ファイルは次のようになります.

//registerServiceWorker.js

import { register } from 'register-service-worker'

register('firebase-messaging-sw.js')

You can learn more about the above plugin and its events Here

バニラJSを使用
JSのみを使用してサービスワーカーを登録する場合は、次のコードを追加できます.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('firebase-messaging-sw.js')
    .then(reg => {
      console.log(`Service Worker Registration (Scope: ${reg.scope})`);
    })
    .catch(error => {
      const msg = `Service Worker Error (${error})`;
      console.error(msg);
    });
} else {
  // happens when the app isn't served over HTTPS or if the browser doesn't support service workers
  console.warn('Service Worker not available');
}

ステップ3 - firebaseモジュールを使用する
サービスワーカーを登録し、FCMを購読する別の方法は、FireBaseパッケージをインストールすることです.npm install firebaseパッケージをインストールした後にfirebase.js (または他の名前を指定します)

//firebase.js

import firebase from 'firebase/app'
import 'firebase/firebase-messaging'

var firebaseConfig = {
  apiKey: <API-KEY>,
  authDomain: <AUTH-DOMAIN>,
  projectId: <PROJECT-ID>,
  storageBucket: <STORAGE-BUCKET>,
  messagingSenderId: <MESSAGING-SENDER-ID>,
  appId: <APP-ID>,
  measurementId: <MEASUREMENT-ID>
}

firebase.initializeApp(firebaseConfig)

export default firebase.messaging()

なぜ私は再びfirebaseをinstanciateする必要がありますか?私はすでにステップ1でそれをやった.
サービスワーカーが他のスレッドで動作しているので、メインのものではないため、メインアプリケーションにインスタンスを渡すことはできません.

Vue 2でFCMを加えてください
あなたのVue 2アプリケーションのグローバルとしてFCMを追加するにはmain.js ファイルを追加し、次のように追加します.

//main.js

...
import firebaseMessaging from './firebase'

Vue.prototype.$messaging = firebaseMessaging

new Vue({
...

今すぐあなたのアプリケーションのどこにでも呼び出すことにより、FCMのインスタンスにアクセスすることができますthis.$messaging .

Vue 3でFCMを加えてください

グローバルとして加える
あなたはVue 3でグローバルとしてfcmを加えることができます、しかし、それは構成のAPIsetup() メソッド.

//main.js

...
import firebaseMessaging from './firebase'

const app = createApp(App)

app.config.globalProperties.$messaging = firebaseMessaging

app.mount('#app')

これで、すべてのコンポーネントで呼び出すことができます.

//RandomComponent.vue

...
  mounted () {
    console.log('Firebase cloud messaging object', this.$messaging)
  }
...

使用/注入
Vue 3がデータを渡すために提供するもう一つの方法は、提供/注入機能です.(あなたはそれについてもっと学ぶことができますHere )
あなたのApp.vue (またはスーパー親が欲しい他のコンポーネント)次のように追加します.

//App.vue

...
<script>
import { provide } from 'vue'
import firebaseMessaging from './firebase'

export default {
  //options api
  provide: {
    messaging: firebaseMessaging
  }
  //composition api
  setup() {
    provide('messaging', firebaseMessaging)
  }
}
</script>
...

そして今、あなたは、例えば、必要に応じてそれを子供のコンポーネントに注入することによって呼び出すことができます

//RandomChildComponent.vue

...
<script>
import { inject } from 'vue'

export default {
  //options api
  inject: ['messaging'],
  mounted () {
    console.log('Firebase cloud messaging object', this.$messaging)
  }
  //composition api
  setup() {
    const messaging = inject('messaging')

    console.log('Firebase cloud messaging object', messaging)
  }
}
</script>
...

ステップ4
サービスワーカーが登録された後、私たちは、FCMgetToken() 関数.
に戻るfirebase-messaging-sw.js (ステップ2を使用している場合)、またはFILEBASEmessaging オブジェクト(ステップ3を使用している場合)と次のコードを追加します.

...
//firebase-messaging-sw.js (step 2)
app.messaging().getToken({ vapidKey: <KEY> })

//RandomChildComponent.vue (step 3)
messaging.getToken({ vapidKey: <KEY> })
...

VapidKeyをFirebaseコンソールに移動させるには、次の手順に従います.

Go to your project home page at firebase -> Press on the Settings icon -> click 'Project Settings' -> 'Cloud Messaging' tab -> 'Web configuration' > 'Web Push certificates'

各クライアントの特定のトークンを取得したい場合は、次のように追加できますgetToken() 機能

app.messaging().getToken({ vapidKey: <KEY> })
.then((currentToken) => {
  if (currentToken) {
    console.log('client token', currentToken)
  } else {
    console.log('No registration token available. Request permission to generate one.');
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
})

ステップ3 ( firebase package )を使用した場合getToken() メソッドは、あなたにサービスワーカーを登録します.

The getToken() 関数はfcmを購読します、そして、この瞬間から、あなたのクライアントはFCMからプッシュ通知を得ます.イェィ:)
どうにかしてあなたを助けてくれることを願っています.