Wrapper for Web Push Notifications via Firebase Cloud Messaging
If not already done, a project in Firebase is required. Go to https://console.firebase.google.com/ and create your project.
Add your web app:
Copy the Firebase configuration:
Finally, get the Vapid Key via Web Push Certificates:
Put the lib in your application. If different, you must adjust the paths everywhere! E.g.:
- /lib/gt-fcm-wrapper/gt-fcm-wrapper-main-1.0.0.min.js
- /lib/gt-fcm-wrapper/gt-fcm-wrapper-sw-1.0.0.min.js
Create your custom Service Worker file e.g. /js/my-service-worker-1.0.0.js and update the Firebase configuration:
const firebaseConfig = {
apiKey: "",
projectId: "",
messagingSenderId: "",
appId: ""
};
importScripts('/lib/gt-fcm-wrapper/gt-fcm-wrapper-sw-1.0.0.min.js');
Finally, update your page to get the desired Device Token. Please remember the Firebase configuration and the Vapid Key:
<script type="module">
import { startMessaging } from '/lib/gt-fcm-wrapper/gt-fcm-wrapper-main-1.0.0.min.js'
const config = {
firebaseConfig: {
apiKey: "...",
projectId: "...",
messagingSenderId: "...",
appId: "...",
},
vapidKey: "...",
serviceWorkerPath: '/js/my-service-worker-1.0.0.js'
};
startMessaging(config).then(token => {
console.log("Token", token);
// TODO: Persist the Device Token in your backend
});
</script>
You will receive a notification after successful setup. This should be accepted:
Finally, after page refresh the token is shown in Console:
Go to Firebase Console and create a campaign:
Create a test notification:
Test the message and paste the Token from Console:
Voilà, the message is received by your Browser:
https://firebase.google.com/docs/cloud-messaging/send-message