我在vuejs中使用Firebase设置推送通知。它与localhost一起使用,可能也可以在生产中使用。但是,当我使用“ yarn android”将其部署到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: "",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的浏览器中时,可以将其推送?