Has anyone successfully integrated Firebase?

Ask the community
,
1

I have created a firebase account, though I skipped the npm installation in wix. I added this to my custom code with all the firebaseConfig values

<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script>
<script>

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
firebase.initializeApp(firebaseConfig);
firebase.analytics();
console.log("firebase ", firebase);
const messaging = firebase.messaging();
   window.addEventListener('message', function(event) {
   console.log("Data received :",event.data);
		if( event.data !== null){ 
			if('serviceWorker' in navigator){ // browser supports service workers
				navigator.serviceWorker.register('_functions/firebase_messaging_sw_js').then((sw_registration) => {		
					messaging.requestPermission().then(()=>{
						console.log("Permission granted");
						messaging.getToken({serviceWorkerRegistration: sw_registration}).then((token)=>{
							window.location.assign('https://www.mywebsite.com/?fcm_token='+token);
							}).catch((tokenError)=>{
							console.log("Token Error ", tokenError);
							})
						}).catch((permissionError)=>{
						console.log("permission Error ", permissionError);
					})
				}).catch((registrationError)=>{
						console.log("registration Error ", registrationError);
				})	
			}
			else{ // browser does not support service workers
				window.location.assign('https://www.mywebsite.com/?sw=notsupported');
			}
	}
  })
  messaging.onMessage((payload)=>{console.log("On Message - payload received ", payload)});
</script>

And added this to my to the http-functions.js backend with all the values

import { ok, notFound, created, serverError } from 'wix-http-functions';
 let firebase_messaging_sw_js = `  
 importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js') importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js') 
 firebase.initializeApp({   
 apiKey: "",     
 authDomain: "",     
 projectId: "",     
 storageBucket: "",     
 messagingSenderId: "",     
 appId: "",     
 measurementId: "" }) 
 const messaging = firebase.messaging(); 
 messaging.onBackgroundMessage((payload) => {   
 console.log('[firebase-messaging-sw.js] Received background message ', payload);  
 // Customize notification here
 const notificationTitle = payload.notification.title;  
 const notificationOptions = {     
 body: payload.notification.body     };    
 self.registration.showNotification(notificationTitle,     
 notificationOptions); });`  
 
 
 export function get_firebase_messaging_sw_js(request) {      
 console.log("get firebase messaging sw js with request ", request);  
 let options = {   
 "headers": {   
 "Content-Type": "application/javascript"},   
 "body": firebase_messaging_sw_js      };   
 return ok(options);  
 }

This does not trigger an subscription request to a user, please what am I missing here

3

This topic was bumped by a now deleted comment but I wanted to provide an answer here in case others are interested in the same thing:

  • Wix doesn’t have a prebuilt integration for Firestore at the moment but you can use the adaptor project to create one.
  • Wix supports many Google databases, in addition to AWS and Microsoft. I’m not familiar with Firebase myself but from what I can see it looks like it also uses GCP which may mean that using our GCP integrations would give you access to your Firebase project’s data.
  • The code above is insecure in that it returns the apiKey and other potentially sensitive information to the user’s web browser. HTTP Functions execute on the backend but whatever you’re returning goes to the user’s browser and any user can use Chrome or Firefox devtools to look at the responses sent to their browser. You should never return sensitive data to a user even if it originates on the backend.