#webpush #FCM #integration #firebase.messaging
After a bit of experimentation I have integrated FCM and able to send web push notifications to WIX client.
Note: This does not require access to WIX root directory
Here is my take on the steps involved. Good luck.
1) Setup firebase project:
Setup is pretty straight forward, setup and configuration documentation available here →
Firebase Cloud Messaging
This step is required to continue with the remaining steps
2) WIX Client
Integration of Firebase SDK:
The SDK snippet is available from your firebase console
Add the Firebase SDK snippet into Wix by using settings → add custom code
In addition to the SDK provided by Firebase the following updates are needed:
-
registration of custom service worker ( Required because WIX doesn’t allow access to root directory, see below )
-
To pass parameters between page and custom code snippet
-
From the page to custom code: wixWindow.postMessage(dataObj) and window.addEventListener
-
From custom code back to page: window.location.assign
-
eg:- window.location.assign( https://www.yoursite.com/?parametername= ”value”)
-
Use wixLocation.query in the page to access parametername
-
Here is my sample custom code :
Customised service worker
-
Almost all firebase documentation will mention the requirement of a service worker named “firebase-messaging-sw.js ” to be created and stored in the root directory
-
Wix doesn’t allow this, so the workaround is to use Wix’s http-functions.js to create our own service worker
-
Here is a sample:
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: “xxxxxx.firebaseapp.com” ,
projectId: “xxxxxxxx” ,
storageBucket: “xxxxxxxxxx.appspot.com” ,
messagingSenderId: “xxxxxxxxxxxxxxxxxx” ,
appId: “xxxxxxxxxxxxxxxxxxxxxx” ,
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);
}
Server side:
Install firebase-admin npm module
(Only required if sending notifications programatically from the server)
related links:
Firebase Cloud Messaging
Add the Firebase Admin SDK to your server
https://www.tuberelevant.com/post/https-push-notifications-in-wix