Recently I wanted to add notifications to my PWA (Progressive Web App). I was investigating and tried some different alternatives but then finally went for using the Firebase platform backed by Google. I would have preferred to not use any services that I don’t have 100% self hosted.
I am using the Spark Plan at Firebase and it seems to be a No-cost feature also for the Blaze plan. I can neither find any limitations in how many Push Notifications one can send. I will update this blog if/when I notice any changes.
Start with creating a Firebase project and an app within it. You get the different application specific data marked with BOLD below from your Firebase project and account.
I used this page as main guideline. https://firebase.google.com/docs/cloud-messaging/js/receive which also refers to a good example https://github.com/firebase/quickstart-js/tree/master/messaging
Development is done on Ubuntu and tested on Chrome at Windows 11, Android and iOS.
To test your notification one can use curl. Text in BOLD should be replaced by your specific information. Detailed information about how to build app server send requests
The below commands are taken from my test at an Ubuntu server.
export GOOGLE_APPLICATION_CREDENTIALS=”/home/anders/bsharp-todoXXXX.json“
TOKEN=$(gcloud auth application-default print-access-token)
curl -X POST -H “Authorization: Bearer $TOKEN” -H “Content-Type: application/json” -d ‘{
“message”:{
“notification”:{
“title”:”My FCM Message”,
“body”:”This is my FCM Message”
},
“token”:”Token that one get from the Notification request“
}}’ https://fcm.googleapis.com/v1/projects/bsharp-todo-XXXXXXXXXXXXX/messages:send
=================================================
This is how I imported the firebase javascript libraries. It is recommended to use modules but since my app is not prepared to use javascript modules I used the old style.
Due to security restrictions for the PWA web workers I had to download the version 10.4.0 version of the Firebase libraries, I used, to my local server.
<!– Firebase to support PUSH notifications –>
<script src=”/firebase-app-compat.js”></script>
<script src=”/firebase-messaging-compat.js”></script>
=================================================
This is how I initiate Firebase in my application.
const firebaseConfig = {
apiKey: “AIzaSyXXXXXXXXXXXXXXXXXXXXX“,
authDomain: “bsharp-XXX-app1.firebaseapp.com“,
projectId: “bsharp-XXX_123123123“,
storageBucket: “bsharp-XXX-123123123.appspot.com“,
messagingSenderId: “123123123123“,
appId: “12312312312312312312312312“,
measurementId: “XXXXXXX”
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
navigator.serviceWorker.register(“/firebase-messaging-sw.js”).then(swReg2 => {
console.log(“Firebase Worker is registered”, swReg2);
})
// Call this when for example the user pushes a button.
// Need to be a user action to get it running. Especially on iOS.
function request_acceptance_for_getting_push_notificaitons(){
Notification
.requestPermission()
.then(() => {
message(“Notifications allowed”);
return messaging.getToken();
})
.then(token => {
console.log( “Token Is : ” + token) ; // Store in DB?
})
.catch(err => {
console.log(“No permission to send push”, err);
});
}
messaging.onMessage(payload => {
console.log(“Message received. “);
const { title, body, …options } = payload.notification;
console.log(title);
console.log(body);
});
================= firebase-messaging-sw.js ================================
importScripts(“/firebase-app-compat.js”)
importScripts(“/firebase-messaging-compat.js”)
firebase.initializeApp({
apiKey: “AIzaSyXXXXXXXXXXXXXXXXXXXXX“,
authDomain: “bsharp-XXX-app1.firebaseapp.com“,
projectId: “bsharp-XXX_123123123“,
storageBucket: “bsharp-XXX-123123123.appspot.com“,
messagingSenderId: “123123123123“,
appId: “12312312312312312312312312“,
measurementId: “XXXXXXX”
});
const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
console.log(
‘[firebase-messaging-sw.js] Received background message ‘,
payload
);
});
=====================================================
I might have missed some information so feel free to contact me if you want to discuss different solutions. Meanwhile I will do further tests.
At the moment I take the Token and add a curl command to a cron-job that executes each morning.