Token is not generating on the web...........................................................................................................................
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
heloooo
</body>
</html>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
const messaging=firebase.messaging();
messaging.requestPermission()
.then(function() {
console.log('Have permission');
return messaging.getToken();
})
.then(function(token){
console.log(this.token);
})
.catch(function(err){
console.log('Error occured.');
})
</script>
this is my code sorry i can't show my fcm initiation code completely
error on my console
hello.html:29 Have permission
hello.html:33 null
hello.html:34 undefined
You need to supply your API key when initialising
Related
Trying to figure out how to add some script tags to a react component.
I keep getting the error message:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\15512\Desktop\django-project\peerplatform\peerplatform-fe\src\assets\scripts\pushnotifications.js: Unexpected token, expected "}" (3:14)
1 | <script>
2 | const firebaseConfig = {
> 3 | apiKey: "AIzaSyDsz7TnT2dxI43v8puME9Gqbe6pnb0F7N0",
This is my code:
import { Helmet } from 'react-helmet';
import "../../assets/scripts/pushnotifications.js";
...
return (
<Helmet>
<meta charSet="utf-8" />
<title>Document</title>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js" type="text/javascript"/>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js" type="text/javascript"/>
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-messaging.js" type="text/javascript"/>
<script src="../../assets/scripts/pushnotifications.js" type="text/javascript"/>
</Helmet>
)
This is my script:
<script>
const firebaseConfig = {
apiKey: "***",
authDomain: "pair-programming-8ccae.firebaseapp.com",
projectId: "pair-programming-8ccae",
storageBucket: "pair-programming-8ccae.appspot.com",
messagingSenderId: "***",
appId: "1:**:web:***",
measurementId: "***"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const messaging = firebase.messaging();
console.log(messaging.getToken())
messaging.getToken({ vapidKey: 'BHNrwLRS0cbeEqhePd4lyA1xmyIx1YDsFxIB21CUC5IDROXjBTTh8jKxXz2uMotCI_E-ZaGEHHad46wKuU531dY' }).then((currentToken) => {
if (currentToken) {
console.log(currentToken)
} else {
console.log('No registration token available. Request permission to generate one.');
}
})
.catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
messaging
.requestPermission()
.then(function () {
console.log("Notification permission granted.");
return messaging.getToken()
})
.catch(function (err) {
console.log("Unable to get permission to notify.", err);
});
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
});
</script>
this is my code , I want to retrieve data from firestore but there is an error occur(which is given below). how do i resolve this error or any other alternative option to retrieve data?..
Error:tasks.html:201 Uncaught ReferenceError: firebase is not defined at tasks.html:201
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyD_h_EWO8z7ODYoj47CiF4hzf5qnjqE2Rc",
authDomain: "blocktask-ae24a.firebaseapp.com",
databaseURL: "https://blocktask-ae24a.firebaseio.com",
projectId: "blocktask-ae24a",
storageBucket: "blocktask-ae24a.appspot.com",
messagingSenderId: "665923751623",
appId: "1:665923751623:web:c0726bb66583506dceb8e2",
measurementId: "G-X8RKV7R4K9"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
db.collection("users").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
});
</script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-database.js"></script>
enter image description here
enter image description here
I'm using firebase web push notifications API and sending post request with the message I want to display on the client-side with Postman and/or from the firebase notifications composer, the message is being sent successfully but it is not being received, how can I fix this?
This is the response I get
{
"multicast_id": 6360733777037549929,
"success": 1,
"failure": 0,
"canonical_ids": 0,
"results": [
{
"message_id": "0:1592759038463623%cc9b4facf9fd7ecd"
}
]
}
I'm using Firebase hosting, and including the entire Firebase Javascript SDK, although I already tried including only firebase-messaging SDK.
<body>
<h1>Some Firebase app</h1>
<script src="/__/firebase/7.15.3/firebase.js"></script>
<script src="/__/firebase/init.js"></script>
<script type="text/javascript">
const messaging = firebase.messaging();
messaging.requestPermission()
.then(()=>{
console.log('Permission Granted');
return messaging.getToken()
})
.then((token)=>{
console.log(token);
})
.catch((err)=>{
console.log(err);
})
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
});
</script>
</body>
With the token I get, and with my server key I send the following request
Method: POST
URL: https://fcm.googleapis.com/fcm/send
Headers: {
Authorization: "key=myServerKey",
Content-Type: "application/json"
}
Body: {
"to" : "token",
"notification" : {
"body" : "Test message",
"title" : "Test title"
}
}
And this is how I handle the message on firebase-messaging-sw.js file
importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-messaging.js');
var firebaseConfig = {
apiKey: "xxxx",
authDomain: "newproject-95acc.firebaseapp.com",
databaseURL: "https://newproject-95acc.firebaseio.com",
projectId: "newproject-95acc",
storageBucket: "newproject-95acc.appspot.com",
messagingSenderId: "xxxx",
appId: "xxxx"
};
firebase.initializeApp(firebaseConfig);
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
});
Which you want to receive message in the Foreground(has focus), or in the Background (service worker)?
in the Background (service worker)
Could you try the following code?
firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.15.0/firebase-messaging.js');
var firebaseConfig = {
apiKey: "xxxx",
authDomain: "newproject-95acc.firebaseapp.com",
databaseURL: "https://newproject-95acc.firebaseio.com",
projectId: "newproject-95acc",
storageBucket: "newproject-95acc.appspot.com",
messagingSenderId: "xxxx",
appId: "xxxx"
};
firebase.initializeApp(firebaseConfig);
if (firebase.messaging.isSupported()) {
firebase.messaging();
}
See https://firebase.google.com/docs/cloud-messaging/js/receive
If you set notification fields in your message payload, your setBackgroundMessageHandler callback is not called, and instead the SDK displays a notification based on your payload.
Or, Could you try samples?
See:
https://github.com/firebase/functions-samples/tree/master/fcm-notifications
https://github.com/firebase/functions-samples/blob/master/fcm-notifications/public/main.js
https://github.com/firebase/functions-samples/blob/master/fcm-notifications/public/firebase-messaging-sw.js
currently I creating the website using cloud firestore as my database. Right now I can query the data from my collection but it didn't work when I try to display that data on my html web page.
const firebase = require("firebase/app")
require("firebase/firestore")
var firebaseConfig = {
apiKey: "AIzaSyCxrJbfDOorE9H4E0I2O98tLftoxFAHNLU",
authDomain: "school-bus-tracking-syst-3ff71.firebaseapp.com",
databaseURL: "https://school-bus-tracking-syst-3ff71.firebaseio.com",
projectId: "school-bus-tracking-syst-3ff71",
storageBucket: "school-bus-tracking-syst-3ff71.appspot.com",
messagingSenderId: "200434933461",
appId: "1:200434933461:web:4cece32389af487c944c5c",
measurementId: "G-Q9C278TWTV"
};
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
const inputTextfield = document.querySelector("#contactnum");
const docRef = firestore.doc("driver/D001");
docRef.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
inputTextfield.innerText = doc.data().contactNo;
});
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
and my HTML file is
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
<input type="text" id="contactnum">
<script scr = "./we.js"></script>
I tried this but I don't get anything display on my html website. Thank you in advance!
When I push a notification on chrome the messaging.onMessage()does't work(when I'm on page) and I don't see any notification(when I'm off the page). The only thing that is displayed is a pop up which says The site has been updated in the background but I don't have that issue in firefox. I've looked around about this issue and found out it is a semi-common one, but I couldn't modify my code in order to get it to work properly.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notifications</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
/**
* Created by nikos on 13/7/2017.
*/
console.log('APP.JS');
var config = {
apiKey: "AIz..",
authDomain: "....firebaseapp.com",
databaseURL: "https://....firebaseio.com",
projectId: "locpushweb",
storageBucket: "locpushweb.appspot.com",
messagingSenderId: "..."
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.requestPermission()
.then(function () {
console.log("Have Permission");
return messaging.getToken();
}).then(function (token) {
console.log(token);
}).catch(function (err) {
console.log("Error: " + err)
});
messaging.onMessage(function (payload) {
console.log(payload);
})
firebase-messaging-sw.js
/**
* Created by nikos on 13/7/2017.
*/
console.log('SW');
importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase-messaging.js');
var config = {
apiKey: "AIz..",
authDomain: "....firebaseapp.com",
databaseURL: "https://....firebaseio.com",
projectId: "locpushweb",
storageBucket: "locpushweb.appspot.com",
messagingSenderId: "..."
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
// messaging.setBackgroundMessageHandler(function (payload) {
// var data = JSON.parse(payload);
// self.registration.showNotification(data.title, {
// body: data.body,
// icon: data.icon,
// click_action: data.click_action,
// time_to_live: data.time_to_live,
// data: data.data,
// tag: data.tag
// });
// });
Lastly, this is the curl command:
curl -X POST -H "Authorization: key=AAAAZGd...." -H "Content-Type: application/json" -d '{
"notification": {
"title": "Portugal vs. Denmark",
"body": "5 to 1",
"icon": "firebase-logo.png",
"click_action": "http://localhost:8081"
},
"to": "cxfoMyjwsOY:APA91bFnOQlYxw3iPlbcc714wI5BFWLfEXvmT1FRTL0SJNuy1AOTfah4EKTdvoi1SvnX8SpD9CUD1D-I8GdKcIb-M1l65NFc8xhJNF2iBffERN9yWSNnN2_CHqodcpMMSyC_IDKZJ0GH"
}' "https://fcm.googleapis.com/fcm/send"