web-dev-qa-db-ja.com

Firebase Web通知でのfirebase-messaging-sw.jsの使用は何ですか？

ウェブサイトでFirebaseプッシュ通知用にJavascriptAPIを設定しました。すべてが正常に機能していますが、多くの「バックグラウンドメッセージ」が表示されています。 firebase-messaging-sw.jsファイルを自分のウェブサイトのディレクトリに配置しました。

私はそれの使用法を知りません。私はそれが何をするのかを知りたいと思っていました。次のコードが表示された場合は、messagingSenderIdを指定していないことがわかります。それでもこのファイルは実行されます。

だから私が知りたいのは：

IDなしでどのように機能しますか？

それの用途は何ですか？プッシュ通知を受信して​​onMessageハンドラーで処理するのは必須ファイルですか？

このファイルを実際にどこに置くべきですか（私の現在のディレクトリは：MY-SITE-DOMAIN/firebase-messaging-sw.jsですが、firebase通知は設定されています別のディレクトリにあります）？

コードは次のとおりです。

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

firebase.initializeApp({
  'messagingSenderId': 'YOUR-SENDER-ID'
});

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
 console.log('[firebase-messaging-sw.js] Received background message ', payload);
 const notificationTitle = 'Background Message from html';
  const notificationOptions = {
   body: 'Background Message body.',
   icon: '/firebase-logo.png'
 };

  return self.registration.showNotification(notificationTitle,
     notificationOptions);
});

元のファイルは ここ

javascriptfirebasepush-notificationfirebase-cloud-messagingservice-worker
6
Vikas Kumar

以下の構成を使用することも、messagingSenderIDのみを使用することもできます。エラーをスローしていないため、他のJavaScriptで設定を設定している可能性があります。

var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        messagingSenderId: ""
    };

firebase-messaging-sw.jsは必須であり、ホストルートディレクトリに存在する必要があります。これは、ブラウザがフォーカスされていないかバックグラウンドにあるときにバックグラウンド通知ハンドラを設定するために必要です。

2
anshul jain

デフォルトでは、firebaseはfirebaseライブラリとリスナーを含む/firebase-messaging-sw.jsを探します。詳細はこちら： https://firebase.google.com/docs/cloud-messaging/js/receive

既存のServiceWorkerを使用する場合は、 https://firebase.google.com/docs/reference/js/firebase.messaging.Messaging#useServiceWorker を使用できます。

このような...

navigator.serviceWorker.register('/service-worker.js').then(registration => {
  firebase.messaging().useServiceWorker(registration)
})
2
Phil Snell