web-dev-qa-db-ja.com

Web firebase.messaging（）。onMessageは発生しませんが、バックグラウンド通知は完全に発生しました

プッシュメッセージがfirebase.messaging（）。onMessageで送信されたのに起動されなかった場合、foregrounfで何らかのイベントをリロードまたはトリガーしたいのですが。バックグラウンド通知でfirebase.mesaging.sw.jsを使用していますが、正しく機能し、コードの何が問題になっていますか？

firebase.js

const config = {
  apiKey: "x",
  projectId: "x",
  storageBucket: "x",
  messagingSenderId: "x"
};

firebase.initializeApp(config);

const msg = firebase.messaging()
msg.requestPermission()
  .then(() => {
    return msg.getToken()
  })
  .then((token) => {
  })
  .catch((err) => {
  })

msg.onMessage(function(payload) {
  alert("Foreground message fired!")
  console.log(payload)
});

firebase.messaging.sw.js

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

const config = {
  apiKey: "x",
  projectId: "x",
  storageBucket: 'x',
  messagingSenderId: "x"
};

firebase.initializeApp(config);
const msg = firebase.messaging()

msg.setBackgroundMessageHandler(function(payload) {
  let options = {
    body: payload.data.body,
    icon: payload.data.icon
  }

  return self.registration.showNotification(payload.data.title, options);

});

コードの何が問題なのかわからない

javascriptnode.jslaravelfirebasefirebase-cloud-messaging
2
Kuro Neko

多くのものが不足していて、onMessageは、Firebaseを呼び出す前に初期化されている場合にのみ機能します。これに従ってください。私はこのようにしてそれを実行し、それは機能しています。

firebaseを初期化してトークンを取得する

export class BrowserFcmProvider {
export const FIREBASE_CONFIG = {
 apiKey: "****",
 authDomain: "****",
 databaseURL: "****",
 projectId: "****",
 storageBucket: "****",
 messagingSenderId: "****",
 appId: "****"
}

firebase.initializeApp(FIREBASE_CONFIG);

async webGetToken() {
 try {
   const messaging = firebase.messaging();
   await messaging.requestPermission();
   const token = await messaging.getToken();
   let uuidTemp = new DeviceUUID().get();
   return this.saveTokenToFireStoreFromWeb(token, uuidTemp)

 } catch (e) {
   console.log(e);
 }
}

saveTokenToFireStoreFromWeb(token, uuid) {
  try {
     const docData = {
     token: token,
     device_type: 'web',
     uuid: uuid
     }
    const devicesRef = this.db.collection('devices')
    return devicesRef.doc(uuid).set(docData);
  } catch (e) {
    console.log(e, 'saveTokenError');
  }
}

showMessage() {
  try {
    const messaging = firebase.messaging();
    messaging.onMessage((payload) => {
    console.log(payload);
    })
  } catch (e) {
    console.log(e)
  }
}
}

そして、アプリがこのようにロードされている間にメソッドを呼び出す

  async configureFirebaseForBrowser(res) {
      await this.bfcm.webGetToken();
      this.bfcm.showMessage();
  }

Firebase関数とペイロードタイプ

    const payloadWeb = {
            title: title,
            body: body,
            data: {
                title: title,
                body: body
            },
            tokens: uniqueDevicesTokenArrayWeb,
        }

  const responseWeb = await admin.messaging().sendMulticast(payloadWeb);
  console.log(responseWeb.successCount + ' notifications has been sent to Web successfully');

Firebase/Firestoreの操作を非同期で管理する必要があるため、私はasyncとawaitを使用しました。

fcmがシークレットモードとSafariブラウザで機能しない

1
sibabrat swain

この問題を抱えている他の人のために、私は最終的にそれを解決しました：

  1. ヘッダーに含まれるJSファイルとSW JSファイルの両方のFirebase SDKバージョンを最新にアップグレードします（現在、それは7.8.1になります）。
  2. 以前の回答が示唆しているように、firebaseConfig配列全体をSW firebase.initializeApp()に追加します。
  3. デベロッパーツールのChromeキャッシュをApplication> Clear Storageセクションから削除する）。
  4. 以前の登録トークンをデータベースから削除しています。
  5. ブラウザからの通知をブロックおよびブロック解除して、新しいトークンを強制的に生成します。

基本的に、Firebase SDKが更新されたtotal fresh startは、このような問題を修正するようです。

0
andreszs