Как исправить проблему Firebase SDK с браузером? - PullRequest
Новая
       20

Как исправить проблему Firebase SDK с браузером?

0 голосов
/ 07 ноября 2019

Я настраиваю push-уведомления с помощью firebase в vuejs. Он работает с localhost и, вероятно, будет работать на производстве. Однако, когда я развертываю его на android с помощью 'yarn android', приложение не отображается, и эта ошибка выводится в консоли: 

Uncaught Error: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).
    at Object.n [as messaging] (file:///android_asset/www/js/chunk-vendors.df02e511.js:484:69)
    at t._getService (file:///android_asset/www/js/chunk-vendors.df02e511.js:557:410951)
    at t.(anonymous function) [as messaging] (file:///android_asset/www/js/chunk-vendors.df02e511.js:590:1186)
    at Module.56d7 (file:///android_asset/www/js/app.1025a72c.js:1:21109)
    at c (file:///android_asset/www/js/app.1025a72c.js:1:2396)
    at Object.0 (file:///android_asset/www/js/app.1025a72c.js:1:7028)
    at c (file:///android_asset/www/js/app.1025a72c.js:1:2396)
    at t (file:///android_asset/www/js/app.1025a72c.js:1:388)
    at 0 (file:///android_asset/www/js/app.1025a72c.js:1:6993)
    at file:///android_asset/www/js/app.1025a72c.js:1:6998

Это код, который я использую:

public/firebase-messaging-sw.js

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

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

firebase.initializeApp(config);

let messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("my notification title");
        });
    return promiseChain;
});

/ src / pushNotification.js 

import * as firebase from "firebase/app";
import "firebase/messaging";

const initializedFirebaseApp = firebase.initializeApp({
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
});
export const messaging = initializedFirebaseApp.messaging();
messaging.usePublicVapidKey(
    ""
);

/ src / main.js 

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("./firebase-messaging-sw.js")
    .then(function (registration) {
      console.log("Registration successful, scope is:", registration.scope);
    })
    .catch(function (err) {
      console.log("Service worker registration failed, error:", err);
    });
}
navigator.serviceWorker.addEventListener("message", message => {
  let data = message.data["firebase-messaging-msg-data"].notification
  var notificationTitle = data.title;
  var notificationOptions = {
    body: data.body,
  };
  var notification = new Notification(notificationTitle, notificationOptions);
  notification.onclick = function (event) {
    notification.close();
    console.log(event);
  };
});

/ src /app.vue 

<script>
import { messaging } from "./pushNotification";
export default {
  mounted() {
    messaging
      .requestPermission()
      .then(async function() {
        const token = await messaging.getToken();
        console.log(token);
      })
      .catch(function(err) {
        console.log("Unable to get permission to notify.", err);
      });
  }
};
</script>

Как я могу это исправить, помня, что я уже могу нажать ее, когда фокусируюсь на вкладке или нет в браузере с FMC API?

...