Service worker file is listening to background notificaions, they are printed on console.
Tapping on them also works, event is getting printed on "notificationclick" event
firebase.initializeApp({
apiKey: jsonResult['apiKey'],
appId: jsonResult['appId'],
messagingSenderId: jsonResult['messagingSenderId'],
projectId: jsonResult['projectId'],
authDomain: jsonResult['authDomain'],
storageBucket: jsonResult['storageBucket'],
measurementId: jsonResult['measurementId'],
});
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
var current = new Date();
});
function handleClick (event) {
console.log("onNotificationClickevent", event);
}
self.addEventListener('notificationclick', handleClick);
Problem is I want to listen to this notification in flutter, firebase messaging listeners don't work in this case.
I want to open a new screen with some new data
Related
I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>
below piece of code works perfectly fine
// Initialize Firebase
var config = {
apiKey: "muykjkjgh........",
authDomain: "my-project.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com/",
projectId: "my-project",
storageBucket: "my-project.firebaseio.com",
messagingSenderId: "8235......"
};
firebase.initializeApp(config);
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('verify', {
'size': 'invisible',
'callback': function(response) {
}
});
firebase.auth().signInWithPhoneNumber("+911234567890", window.recaptchaVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
//I want to achieve 6 digit code sent to users mobile number
//log doesnt show
console.log(confirmationResult);
});
};
As above code I have commented is there a way to extract a 6 digit code sent to user mobile number
I am using firebase push notification in my angular application, and I want to add an icon in the notification, and when the user clicks that notification redirect to a specific route in the application, in order to achieve that I put event setBackgroundMessageHandler and self.eventListner('notificationClick') but that didn't get called.
Angular version (13.1.1)
#angular/fire version (^6.0.4)
firebase version (^8.6.5)
firebase-messanging-sw.js file code
importScripts('https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.6.5/firebase-messaging.js');
firebase.initializeApp({
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
const notificationOptions = {
title: 'My-App',
body: payload.data.body,
icon: '/images/logo.png',
data: payload.data,
color: '#ff0000'
};
return self.registration.showNotification('My Title',
notificationOptions);
});
self.addEventListener('notificationclick', function (event) {
event.notification.close();
event.waitUntil(
clients.openWindow("https://stackoverflow.com/questions")
);
});
Notification is working fine but the problem is that method is not get called, I am testing all changes in localhost:4200/
How do I receive notifications in the react app and not in the browser?
At moment I receive notifications on :
firebase-messaging-sw.js
code of 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: "myapikey",
authDomain: "thank-you-posta.firebaseapp.com",
databaseURL: "https://thank-you-posta.firebaseio.com",
projectId: "thank-you-posta",
storageBucket: "thank-you-posta.appspot.com",
messagingSenderId: "403125505139"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
self.addEventListener('notificationclick', function(event) {
console.log('[Service Worker] Notification click Received.');
event.notification.close();
event.waitUntil(
clients.openWindow('http://localhost:7000/#/messages/')
);
});
Code in Layout:
var config = {
apiKey: "myapikey",
authDomain: "thank-you-posta.firebaseapp.com",
databaseURL: "https://thank-you-posta.firebaseio.com",
projectId: "thank-you-posta",
storageBucket: "thank-you-posta.appspot.com",
messagingSenderId: "403125505139"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.requestPermission()
.then(function() {
console.log('Notification permission granted.');
messaging.getToken()
.then(function(currentToken) {
if (currentToken) {
console.log(currentToken);
_this.setState({
pushToken: currentToken
});
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
// Show permission UI.
}
})
.catch(function(err) {
console.log('An error occurred while retrieving token. ', err);
});
})
.catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
// ...
});
My problem is that I want to receive notifications to make a dropdown with all the notifications in Layout.
Thx All.
If you want to show these notifications in your app then you have to create a notifications component in your app. The simplest way to do this is to use something like toaster https://github.com/tomchentw/react-toastr
Basically, you add a toaster snippet in your root component and then you feed toaster your notifications. It is unclear from your code where you are storing the notifications that you send to your service worker, but wherever they are just redirect them to toast. If you are creating new messages from the firebase console then redirect them to toast when you specify .onMessage
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
// the container bit below is from the toast demo in the link above
container.success(payload, {
closeButton: true,
})
});
Toaster is basically just a div at the top of your screen that disappears after a while. You can build your own solution. Toaster and other projects like it are just commonly used for this purpose.
If you want a custom drop-down component with all the notifications then you have to build it and style it like any other component. When the component is in place, save the messages to firebase/firestore database inside the .onMessage snippet above and then retrieve the message inside your new notifications component.
Well, simply put, I cannot receive messages via my WebApp using JS. I am receiving tokens and I am able to send messages via Firebase console to the WebApp's token, but I am not getting any receiving.
Here is my JS Code:
var config = {
apiKey: "AIzaSyBLCsBQVXLsDjPhjdkvJVMGyDUcfWrFtQU",
authDomain: "php-test-project-78c66.firebaseapp.com",
databaseURL: "https://php-test-project-78c66.firebaseio.com",
projectId: "php-test-project-78c66",
storageBucket: "php-test-project-78c66.appspot.com",
messagingSenderId: "856365479454"
};
firebase.initializeApp(config);
$(document).ready(function(){
const messaging = firebase.messaging();
messaging.requestPermission().then(function() {
console.log("Permitted");
return messaging.getToken();
}).then(function(token) {
console.log(token);
}).catch(function(error) {
console.log("Not Permitted");
});
messaging.onMessage(function(payload) {
console.log("TEST");
console.log("Message received. ", payload);
});
});
Upon sending message via Firebase Console, I do not receive anything. I send by using TokenID.
PS: The keys are of a Dev Testing App, hence I kept it in. If admins consider this a problem then you may remove it.