I am just beginning to use the Firebase Web Cloud Messaging and stumbled upon an issue where I can not proceed.
The cloud messaging is integrated with a Tizen Web application(Samsung device application), where the goal is to use cloud messaging and to receive messages.
The console shows´ Uncaught SyntaxError: Unexpected token ´ to a line in the .html file.
Here is where the code stops/malfunctions: return.messaging.getToken();
How do I need to solve this problem?
I tried using this Firebase link (this link it the first page of the documentation)
This part is included and written to .html
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"> </script>
<!-- <script src="/__/firebase/6.4.0/firebase.js"></script> -->
<script
src="https://www.gstatic.com/firebasejs/6.4.0/firebase-messaging.js"> </script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "confidential information",
authDomain: "confidential information",
databaseURL: "confidential information",
projectId: "confidential information",
storageBucket: "",
messagingSenderId: "confidential information",
appId: "confidential information"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.usePublicVapidKey('!token!');
messaging.requestPermission()
.then(function() {
console.log('Have Permission');
return.messaging.getToken();
})
.then(function(token) {
console.log(token);
})
.catch(function(err) {
console.log('Error Occured.')
messaging.onMessage(function(payload) {
console.log('onMessage: ', payload);
});
</script>
</html>
A .js file that had to be included in the application package
File name: firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.4.0/firebase- messaging.js');
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey : "confidential information",
authDomain : "confidential information",
databaseURL : "confidential information",
projectId : "confidential information",
storageBucket : "",
messagingSenderId : "confidential information",
appId : "confidential information"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const
messagin = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
const
title = "Hello World";
const
options = {
body : payload.data.status
};
// normal web browser api in displaying notifications
return self.registration.showNotification();
});
See:
https://firebase.google.com/support/release-notes/js#cloud-messaging
https://developer.mozilla.org/ja/docs/Web/API/notification/requestPermission
Deprecated requestPermission(). Use the native browser API Notification.requestPermission() instead.
In any case, try to use Notification.requestPermission().
Related
I am having an issue with my site regarding Firebase Realtime Database and Cross Origin Resource Policy. My site already has The Cross Origin Resource Policy header configured and is being served on every asset in my site (js, css, html, etc). But now the js script from firebase.io is being blocked because it doesn't have this header.
I would like to ask, how do I add these headers? Where in the Firebase console should I go to?
Here is the piece of code where the issue is triggered. Basically I initialize the Server object then call changeDb, then call checkAuthor (Where the issue occurs):
window.Server = function () {
const config = {
apiKey: FirebaseApiKey,
authDomain: FirebaseAuthDomain,
projectId: FirebaseProjectId,
storageBucket: FirebaseStorageBucket,
messagingSenderId: FirebaseMessagingSenderId,
appId: FirebaseAppId,
databaseURL: FirebaseDatabaseUrl
};
firebase.initializeApp(config);
};
Server.prototype.changeDb = function (prefix) {
this.annotationsRef = firebase.database().ref().child(prefix + '/annotations');
this.authorsRef = firebase.database().ref().child(prefix + '/authors');
}
Server.prototype.checkAuthor = function (authorId, openReturningAuthorPopup, openNewAuthorPopup) {
this.authorsRef.once('value', authors => { //<== Here is where it is triggered
if (authors.hasChild(authorId)) {
this.authorsRef.child(authorId).once('value', author => {
openReturningAuthorPopup(author.val().authorName);
});
} else {
openNewAuthorPopup();
}
});
};
I am trying to test Firebase analytics in a test page. Below is the code.
However, I see no traffic on the analytics plots.
No errors in the page logs. How should I continue to test my firebase is setup right? I just used it out of the box.
<html>
<head>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-analytics.js"></script>
<script>
// copied from the Firebase config page
var firebaseConfig = {
apiKey: "hidden",
authDomain: "hidden",
databaseURL: "https://hidden.firebaseio.com",
projectId: "hidden",
storageBucket: "",
messagingSenderId: "hidden",
appId: "hidden",
measurementId: "hidden"
};
// Initialize Firebase
var fapp = firebase.initializeApp(firebaseConfig);
firebase.analytics();
var button_push = function(){
var analytics = firebase.analytics(fapp);
var result = analytics.logEvent('INIT TEST', { name: 'TEST'});
}
</script>
</head>
<body>
<button onclick="button_push()">
TEST
</button>
</body>
</html>
I'm working on a vuejs + firebase project and i was trying to import firestore but when i access my page, this is displayed into the console: ReferenceError: require is not defined
I'v tried to put the import section in mounted() but it says my that i need to put the import stuffs in the top, that's what i did
This is below my html (register.html) body:
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM",
authDomain: "thelogoagency-3a11d.firebaseapp.com",
databaseURL: "https://thelogoagency-3a11d.firebaseio.com",
projectId: "thelogoagency-3a11d",
storageBucket: "",
messagingSenderId: "101296201242",
appId: "1:101296201242:web:00d0e7e3554b518d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="register.js"></script>
The top of my register.js
// Required for side-effects
require("firebase/firestore");
var app = new Vue({
el: "#root",
data: {
burgerClass: "navbar-burger",
menuClass: "navbar-menu",
mobileMenuIsActive: "",
mobileMenuHasBeenClicked: false,
firstNameInput: "",
lastNameInput: "",
emailInput: "",
passwordInput: "",
authError : "",
emailErrorClass : "",
emailErrorHelp : "",
passwordErrorClass : "",
passwordErrorHelp : "",
inputClass: "input ",
nameErrorHelp: "",
isLoading: false,
firebase: firebase,
db: null,
numberOfInit: 0
},
And mounted()
if(this.numberOfInit = 0)
firebase.initializeApp({
apiKey: 'AIzaSyCNYH-sKZZXZhZt5LxQSDqwet7OTo5KgHM',
authDomain: 'thelogoagency.tk',
projectId: '1:101296201242:web:00d0e7e3554b518d'
});
this.db = firebase.firestore();
this.numberOfInit ++
this.db.collection("users").add({
first: "Ada",
last: "Lovelace",
born: 1815
})
.then(function(docRef) {
console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
console.error("Error adding document: ", error);
});
}
It should normaly just work fine because it copied it from firebase's doc.
I know i'm probably doing it all wrong :) Thank for helping
If you're using Javascript and not NodeJS, you just must link your lib with
<script src="https://my/lib.js"></script>
So you can remove your require line :)
Require notation is only used when you are using npm and compiling the JS code. I think that you intend to only use the CDN script tag so you can remove the require line.
Install firebase-admin & firebase on npm , and then try this one "require('firebase-admin')" instead of require("firebase/firestore"); , and a note for you, it is impossible to run Backend Service in Client Side
The way i fixed it was, i just removed these two lines!
const firebase = require("firebase");
require("firebase/firestore");
not needed if you are using javascript, and not NodeJS.
you only need these cdns
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
and to start to firestore:
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
I am trying to upload an image on firebase cloud storage with web javascript. I am getting "firebase.firestore () is not a function" on my console. Am I going any wrong way?
I have done insert and fetch data on firebase database. But I have to stop for upload image on firebase cloud storage.
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
var firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX"
};
// Initialize Firebase
var defaultProject = firebase.initializeApp (firebaseConfig);
// Get a reference to the database service
var fileName = selectedFile.name;
var storageRef = firebase.firestore ().ref ('image' + fileName).put (selectedFile);
updating node on the computer seemed to have fixed the issue. I updated it to v16.15.1
change
firebase.firestore ().ref ('image' + fileName).put (selectedFile);
to
firebase.storage().ref('image' + fileName).put (selectedFile);
here is my Javascript code. its simply copy from the firebase Docs
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: ".",
authDomain: ".",
databaseURL: ".",
projectId: ".",
storageBucket: ".",
messagingSenderId: ".[enter image description here][1]"
};
firebase.initializeApp(config);
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
function submitCountry(){
console.log('in funtion');
db.collection("cities").doc("asdasLA").set({
name: "Los Angeles",
state: "CasdasA",
stasdaate: "CasdasdasA",
stasaasddaate: "CAasd",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
</script>
when i refresh my page it show the uncaught error.
{code: "app/duplicate-service", message: "Firebase: Firebase service
named 'firestore' already registered (app/duplicate-service).", name:
"firestore", stack: "firestore: Firebase: Firebase service named
'fires…m/firebasejs/5.3.0/firebase-firestore.js:1:326255"} firebase #
index.esm.js:17591 (anonymous) # index.esm.js:41 index.esm.js:17591
Uncaught Error: Cannot instantiate firebase-firestore - be sure to
load firebase-app.js first.
after clicking my save button it shows the error mention below.
when i use the same code on simple project without any JS or Bootstrap it works fine but same code i placed in My real project with Bootstrap it shows errors
[Intervention] Slow network is detected. See for more details.
Fallback font will be used while loading:
By doing
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"/></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
you load the 'firestore' Firebase service twice, see the doc: https://firebase.google.com/docs/web/setup
You should either do
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
or
<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>
Also note that in your code you have mixed versions (i.e. 5.4.2 and 5.3.0). Most probably something to avoid.
Following your comment below, in order to check that it writes correctly to the db, modify you code as follows and just open the HTML page (the set() method will be triggered automatically)
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase-firestore.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: ".",
authDomain: ".",
databaseURL: ".",
projectId: ".",
storageBucket: ".",
messagingSenderId: ".[enter image description here][1]"
};
firebase.initializeApp(config);
// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();
db.collection("cities").doc("asdasLA").set({
name: "Los Angeles",
state: "CasdasA",
stasdaate: "CasdasdasA",
stasaasddaate: "CAasd",
country: "USA"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
</script>