gt-fcm-wrapper

Wrapper for Web Push Notifications via Firebase Cloud Messaging

Prerequisites

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:

Prepare your Web App

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>

Behavior of your Web App

You will receive a notification after successful setup. This should be accepted:

Finally, after page refresh the token is shown in Console:

Send Web Push Notifications

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:

Further information on sending messages

https://firebase.google.com/docs/cloud-messaging/send-message