I am trying to implement Firebase Cloud FCM into my Vue 2 PWA app to get push notifications on background and foreground. I followed this tutorial: https://dev.to/vbanditv/how-to-add-fcm-firebase-cloud-messaging-to-vuejs-37np
If I use Firebase 8 and in firebase-messaging-sw.js I import these inks everything works:
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js')
,but the problem is that always it sends duplicates notifications
If I am trying to use firebase 9 and trying to importScripts with firebase 9 version, I am getting error like this:
https://dev.to/vbanditv/how-to-add-fcm-firebase-cloud-messaging-to-vuejs-37np#comment-1ld44
Can someone show me what I need to do to use Firebase 9 version at this case??
My firebase-messaging-sw.js at this moment looks like that:
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js')
const firebaseConfig = {
apiKey: apiKey,
authDomain: authDomainKEY,
projectId:projectIdKEY,
storageBucket: storageBucketKEY,
messagingSenderId: messagingSenderId
appId: appId
measurementId: measurementId
};
const app = firebase.initializeApp(firebaseConfig)
const isSupported = firebase.messaging.isSupported();
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (payload) {
let currentTime = new Date();
lastReceivedTime = currentTime;
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body
};
self.registration.showNotification(notificationTitle,
notificationOptions);
}
});
MAYBE SOMEONE CAN SHOW ME BETTER TUTORIAL THAN THAT IN THE LINK??
Related
I'm working with Database Realtime of Google Firebase using Web version 9 (modular). Everything was fine until I uploaded SugarCRM CE 5.5
An error occurred:enter image description here
This is my srcipt code:
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
import { getDatabase, set, ref } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-database.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBRN4kdi-xxx-xxx",
authDomain: "table-xxx.firebaseapp.com",
databaseURL: "https://table-xxx-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "table-xxx",
storageBucket: "table-xxx.appspot.com",
messagingSenderId: "22185xxx",
appId: "1:2218xxx:web:xxx",
measurementId: "G-0STZXXX"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
# const temp = ref(db, record_id); // ERROR AT HERE
</script>
I still upload the source code on another website and it works fine. How to use fix it ?
I'm looking forward to hearing from you
Sincerely
I'm working on webapp where I have to update the Vuejs frontend with the notification message received through firebase console. Rightnow firebase-messaging-sw.js can be only place in public folder so that I'm not sure how to display the notifications or trigger some function inside vue app.
Im wondering how can i call some vue functions or update the UI
Sample firebase-messaging-sw.js code
/* eslint-disable */
importScripts("https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/8.0.1/firebase-messaging.js");
// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
apiKey: "value",
authDomain: "value",
databaseURL: "value",
projectId: "value",
storageBucket: "value",
messagingSenderId: "value",
appId: "value",
measurementId: "value",
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
// How to call some functions here or how to update this values to frontend
});
in firebase-messaging-sw.js
messaging.onBackgroundMessage((payload) => {
const channel = new BroadcastChannel('sw-messages');
channel.postMessage(payload);
});
in vue file:
mounted(){
const channel = new window.BroadcastChannel("sw-messages");
channel.addEventListener('message' (event)=> {
console.log(event)
})
}
BroadcastChannel Support
https://caniuse.com/?search=BroadcastChannel
I am getting notifications twice when the application in the background. Here is my Service-worker file. When we call this firebase.messaging() function, the service-worker starts receiving and displaying push notifications automatically. Service-worker is showing both notifications. one initializing by the firebase and one with this code self.registration.showNotification(notificationTitle, notificationOptions).
importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.3/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in
firebase.initializeApp({
apiKey: "apiKey",
authDomain: "authDomain",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appId"
});
const messaging = firebase.messaging();
messaging.onBackgroundMessage( function(payload){
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: 'Testing',
};
return self.registration.showNotification(notificationTitle, notificationOptions);
});
How to prevent default notification?
So I am trying to keep my code clean and build different files for querying... So I may be taking this harder than it needs to be.
I building a react-native app using Expo CLI.
I have created 3 files, one is my firebase config file,
one is a query file
then the actual file that is using that query.
it looks ok to me... but I get this error.
TypeError: undefined is not an object(evaluating'_firebase.firebase.firestore')
Here is my config file
import * as firebase from "firebase";
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id"
};
firebase.initializeApp(firebaseConfig);
Then I have a a query file, basically acting as the API layer
import { firebase } from "./firebase";
const db = firebase.firestore();
const getListings = () => {
db.collection("listings").get();
};
export default {
getListings,
};
Then I am trying to view the queried data.
import listingApi from "../api/listings";
function ListingsScreen({ navigation }) {
const [listings, setListings] = useState([]);
useEffect(() => {
loadListings();
}, []);
const loadListings = async () => {
const response = await listingApi.getListings();
setListings(response.data);
};
This is my first time ever using Firebase or cloud firestore... so im really confused.
The error message is telling you that '_firebase.firebase.firestore' data is returning as undefined, this means the document you requested doesn't exist.
At the officiald documentation of Expo, is recommended to put the firebase config information in the same file with your code in order to use firebase, for example:
import * as firebase from 'firebase'
import 'firebase/firestore';
const firebaseConfig = { ... } // apiKey, authDomain, etc. (see above)
firebase.initializeApp(firebaseConfig);
const dbh = firebase.firestore();
dbh.collection("characters").doc("mario").set({
employment: "plumber",
outfitColor: "red",
specialAttack: "fireball"
})
I am trying to signup user with facebook but i am seeing very rigid error and it seems there is no solved help out there so i am asking again
thats my code
async function signInWithFacebook() {
// const appId = Expo.Constants.manifest.extra.facebook.appId;
Facebook.initializeAsync(appid)
const permissions = ['public_profile']; // Permissions required, consult Facebook docs
const {
type,
token,
} = await Facebook.logInWithReadPermissionsAsync(
{permissions}
);
if(type == "success"){
const credential = initFirebase.auth.FacebookAuthProvider.credential(token);
initFirebase.auth().signInWithCredential(credential)
.catch(err => {
console.log(err)
})
}
}
i am using appid in strings but i have not added it here hope you understand that.
and the error is this
this is my firebase config file code
import firebase from "firebase/app"
import "firebase/firestore"
import "firebase/auth"
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxx",
authDomain: "xxxxxx",
databaseURL: "xxxxxx",
projectId: "xxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxx"
};
// Initialize Firebase
const initFirebase = firebase.initializeApp(firebaseConfig);
export default initFirebase
variable values are hidden because of privacy .i worked with firestore and that worked but i am seeing issue with auth with facebook .
i am using react native , firebase , expo and not firebase sdk
You don't have to register a Facebook App for Login with Facebook using Firebase. You can use the below code with Firebase Facebook Authentication enabled in the console.
export const loginWithFacebook = (accessToken) => {
const credential = initFirebase.auth.FacebookAuthProvider.credential(accessToken);
return new Promise((resolve, _reject) => {
signInWithCredential(credential).then(response => {
resolve(response);
});
});
};