FCM token is not generating on web - javascript

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

Script in react component returns unexpected token error

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>

can't able to retrieve data from firestore

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

Firebase web push notification sent successfully but not received by the client

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

How can I use data collection from firestore in html

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!

The site has been updated in the background Chrome - Firebase

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"

Categories

Resources