easy-web-notifications

v1.0.2

Published

2 years ago

Easy Web Notification registration & handling for Chrome and Firefox browsers

Downloads

0High
0Medium
0Low

iyashsoni

web push notifications web notifications chrome firefox push notifications

easy-web-notifications for Chrome and Firefox

This is a easy to use plugin that will help you save some time in implementing Web Push Notifications in your Client Apps.

Installation:

npm install easy-web-notifications

Setup:

Copy the file PushServiceWorker.js from the plugin directory (./node_modules/easy-web-notifications/) to your public assets directory in your Web App. This file is basically a listener for the incoming notification events.

Then add the following lines to your index.html under <head> tag. (Make sure to edit )

<script>
    if (navigator.serviceWorker) { 
        navigator.serviceWorker.register('<PATH_TO_YOUR_PUBLIC_ASSETS_DIRECTORY>/PushServiceWorker.js')
        .then(function(reg) {
            window.pushReg = reg;
            if (reg.installing) {
                console.info('Service worker installing');
            } else if (reg.waiting) {
                console.info('Service worker installed');
            } else if (reg.active) {
                console.info('Service worker active');
            }
            if (!(reg.showNotification)) {
                console.info('Notifications aren\'t supported on service workers.');
            }
            // Check if push messaging is supported
            if (!('PushManager' in window)) {
                console.info("Push messaging isn't supported.");
            }

            if (Notification.permission === 'denied') {
                console.info('The user has blocked notifications.');
            }
        }).catch(err => {
            console.error(JSON.stringify(err));
        });
    } else {
        console.info("Service workers aren't supported in this browser.");
    }
</script>

Next, create a file named manifest.json in the same directory where you copied PushServiceWorker.js. Copy/Paste the following content into it:

{ "name": "<APP-NAME>", "gcm_sender_id": "<YOUR-FCM-SENDER-ID-HERE>" }

This file is required for sending notifications to Chrome from FCM. Now, link the file to index.html as follows:

<link rel="manifest" href="<PATH_TO_YOUR_PUBLIC_ASSETS_DIRECTORY>/manifest.json">

That's it, you're all set to use the SDK.

This plugin will automatically take care of asking permission to the User for allowing Notification and will also return a Subscription token in case the User has allowed to be notified - all of this in just 1 API call.

All you need to do is call - Push.requestPermissionAndGetToken(VAPID_PUBLIC_KEY);

What is this VAPID?

Voluntary Application Server Identification for Web Push (VAPID) protocol. Chrome browser clearly states that Only VAPID keys will be supported in the future.

To simplify for current understanding, VAPID keys (public and private) are a set of keys to authenticate the communication between desired Push Client (Web Push App) and designated Push Server (Web Push enabled Backend Server).

Check this online VAPID keys generator to get your own set of keys: Click me!

Note - We just need Public VAPID key on the Client App, but we will need both Public and Private VAPID keys for server side implementation.

Usage:

import Push from 'easy-web-notifications';
...
...

const applicationServerPublicKey = "<YOUR_VAPID_PUBLIC_KEY>";
Push.requestPermissionAndGetToken(applicationServerPublicKey).then(res => {
    console.log("Successfully Registered for Push. Token is : \n" + JSON.stringify(res));
}).catch(err => {
    console.log("Push Registration Failed" + err);
});

For any issues, please open a task here.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

easy-web-notifications for Chrome and Firefox

Installation:

Setup:

What is this VAPID?

Usage: