Firebase Messaging. Web SDK. Setup Delivery report to BigQuery
Viktor Zhuravel
I have a Web application with Push Notifications sent to this app. Push Notifications itself works fine.
I need to set up Delivery report for Push Notifications on a Web Application.
I've read documentation.
It says:
// userConsent holds the decision of the user to give big query export consent.
const userConsent = ...;
const messaging = getMessagingInSw(app);
experimentalSetDeliveryMetricsExportedToBigQuery(messaging, userConsent);
Obviously, documentation is not up-to-date.
Function experimentalSetDeliveryMetricsExportedToBigQuery does not have parameter userConsent
So, I do not really understand what exactly I have to do in the source code on client side.
What I did:
file: firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.2.0/firebase-messaging-compat.js');
firebase.initializeApp({
apiKey: "XXX",
authDomain: "XXX.firebaseapp.com",
projectId: "XXX",
storageBucket: "XXX.appspot.com",
messagingSenderId: "XXX",
appId: "XXX"
});
console.log('[firebase-messaging-sw.js] Firebase App is initialized');
const messaging = firebase.messaging();
console.log('[firebase-messaging-sw.js] Firebase messaging', messaging);
console.log('Call experimentalSetDeliveryMetricsExportedToBigQueryEnabled')
try {
experimentalSetDeliveryMetricsExportedToBigQueryEnabled(messaging, true)
}
catch (e) {
console.log('error', e)
}
console.log('Set deliveryMetricsExportedToBigQueryEnabled')
messaging.deliveryMetricsExportedToBigQueryEnabled = true
console.log('[firebase-messaging-sw.js] DeliveryMetricsExportedToBigQueryEnabled was set to true', messaging);
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});
in my web application:
<script src="~/js/firebase-app-compat.js"></script>
<script src="~/js/firebase-messaging-compat.js"></script>
<script type="text/javascript">
const firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX.firebaseapp.com",
projectId: "XXX",
storageBucket: "XXX.appspot.com",
messagingSenderId: "XXX",
appId: "XXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
console.log('App: firebase messaging is initialized', messaging)
console.log('Call experimentalSetDeliveryMetricsExportedToBigQueryEnabled')
try {
experimentalSetDeliveryMetricsExportedToBigQueryEnabled(messaging, true)
}
catch (e) {
console.log('error', e)
}
console.log('Set deliveryMetricsExportedToBigQueryEnabled')
messaging.deliveryMetricsExportedToBigQueryEnabled = true
console.log('firebase messaging after setting up deliveryMetricsExportedToBigQueryEnabled', messaging)
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
// Update the UI to include the received message.
appendMessage(JSON.stringify(payload), 'Push notification');
});
getStartToken();
function appendMessage(msgText, msgHeader){
let msgElem = document.getElementById("msg");
let header = '[' + new Date().toLocaleTimeString() + '] ' + msgHeader;
msgElem.innerHTML = '<b>' + header + ':</b> ' + msgText
+ '<br/>' + msgElem.innerHTML;
}
var currentFcmToken;
function getStartToken() {
messaging.getToken({vapidKey: 'XXX'})
.then((currentToken) => {
console.log("Messaging token received from the FCM server");
currentFcmToken = currentToken;
if (currentToken) {
appendMessage(currentToken, "Web device token from FCM");
} else {
// Show permission request.
RequestPermission();
setTokenSentToServer(false);
}
}).catch((err) => {
console.log(err);
setTokenSentToServer(false);
});
}
function RequestPermission() {
messaging.requestPermission()
.then(function (permission) {
appendMessage(permission, 'Permission')
if (permission === 'granted') {
console.log("Permission granted");
getStartToken(); //calls method again to send token to server
} else {
console.log("Permission denied");
}
})
.catch(function (err) {
console.log(err);
});
}
After that I expect to see "Received" messages on FCM report. But, I see the only "Sends" messages.
Also, I've set up link FCM to BigQuery. I expect some records in the created dataset. But, the dataset is empty.
| ||||||
| ||||||
|
