Nyligen ville jag lägga till aviseringar i min PWA (Progressive Web App). Jag undersökte och provade några olika alternativ men valde till slut att använda Firebase-plattformen som stöds av Google. Jag skulle ha föredragit att inte använda några tjänster som jag inte har 100% värd för.
Jag använder Spark Plan på Firebase och det verkar vara en kostnadsfri funktion även för Blaze-planen. Jag kan inte heller hitta några begränsningar i hur många push-meddelanden man kan skicka. Jag kommer att uppdatera den här bloggen om/när jag märker några förändringar.
Börja med att skapa ett Firebase-projekt och en app i det. Du får de olika applikationsspecifika data markerade med BOLD nedan från ditt Firebase-projekt och -konto.
Jag använde den här sidan som huvudsaklig hjälp. https://firebase.google.com/docs/cloud-messaging/js/receive som också hänvisar till ett bra exempel https://github.com/firebase/quickstart-js/tree/master/messaging
Utvecklingen gör jag på Ubuntu och testas på Chrome på Windows 11, Android och iOS.
För att testa din avisering kan man använda curl. Text med BOLD ska ersättas med din specifika information. Detaljerad information om hur man skapar ett url kommando
Kommandon nedan är hämtade från mitt test på en 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
=================================================
Så här importerade jag firebase-javascript-biblioteken. Det rekommenderas att använda moduler men eftersom min app inte är förberedd för att använda javascript-moduler använde jag den gamla stilen.
På grund av säkerhetsrestriktioner för PWA web-workers var jag tvungen att ladda ner version 10.4.0-versionen av Firebase-biblioteken, som jag använder, till min lokala server.
<!– Firebase to support PUSH notifications –>
<script src=”/firebase-app-compat.js”></script>
<script src=”/firebase-messaging-compat.js”></script>
=================================================
Så här initierar jag Firebase i min applikation.
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
);
});
=====================================================
Jag kan ha missat lite information så kontakta mig gärna om du vill diskutera olika lösningar. Under tiden ska jag göra ytterligare tester.
För tillfället tar jag token och lägger till i ett curl-kommando i ett cron-jobb som körs varje morgon.