Nauseating Packaged Meat

    simple-web-notification

    2.0.1 • Public • Published

    simple-web-notification

    NPM Version CI Coverage Status Known Vulnerabilities Inline docs License

    Web Notifications made easy

    Overview

    The simple-web-notification is a simplified web notifications API with automatic permissions support.

    This library requires no external dependencies, however the browser must support the Notification API or have a polyfill available.

    See W3 Specification for more information.

    Demo

    Live Demo

    Usage

    In order to use the simplified web notification API you first must add the relevant dependencies:

    <script type="text/javascript" src="web-notification.js"></script>

    Now you can use the API anywhere in your application, for example:

    document.querySelector('.some-button').addEventListener('click', function onClick() {
        webNotification.showNotification('Example Notification', {
            body: 'Notification Text...',
            icon: 'my-icon.ico',
            onClick: function onNotificationClicked() {
                console.log('Notification clicked.');
            },
            autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
        }, function onShow(error, hide) {
            if (error) {
                window.alert('Unable to show notification: ' + error.message);
            } else {
                console.log('Notification Shown.');
     
                setTimeout(function hideNotification() {
                    console.log('Hiding notification....');
                    hide(); //manually close the notification (you can skip this if you use the autoClose option)
                }, 5000);
            }
        });
    });

    In case you wish to use service worker web notifications, you must provide the serviceWorkerRegistration in the options as follows:

    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
        document.querySelector('.some-button').addEventListener('click', function onClick() {
            webNotification.showNotification('Example Notification', {
                serviceWorkerRegistration: registration,
                body: 'Notification Text...',
                icon: 'my-icon.ico',
                actions: [
                    {
                        action: 'Start',
                        title: 'Start'
                    },
                    {
                        action: 'Stop',
                        title: 'Stop'
                    }
                ],
                autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
            }, function onShow(error, hide) {
                if (error) {
                    window.alert('Unable to show notification: ' + error.message);
                } else {
                    console.log('Notification Shown.');
     
                    setTimeout(function hideNotification() {
                        console.log('Hiding notification....');
                        hide(); //manually close the notification (you can skip this if you use the autoClose option)
                    }, 5000);
                }
            });
        });
    });

    In case you wish to invoke the permissions API manually you can use the webNotification.requestPermission function.
    This function triggers the request permissions dialog in case permissions were not already granted.

    //manually ask for notification permissions (invoked automatically if needed and allowRequest=true)
    webNotification.requestPermission(function onRequest(granted) {
        if (granted) {
            console.log('Permission Granted.');
        } else {
            console.log('Permission Not Granted.');
        }
    });

    When using an AMD loader (such as RequireJS) or CommonJS type loader, the webNotification object is not automatically defined on the window scope.

    Installation

    Run npm install in your project as follows:

    npm install --save simple-web-notification

    Or if you are using bower, you can install it as follows:

    bower install simple-web-notification --save

    Limitations

    The web notifications API is not fully supported in all browsers.

    Please see supported browser versions for more information on the official spec support.

    API Documentation

    See full docs at: API Docs

    Contributing

    See contributing guide

    Release History

    Date Version Description
    2020-05-13 v2.0.1 Revert bower.json deletion but not use it in CI build
    2020-05-11 v2.0.0 Migrate to github actions, upgrade minimal node version and remove bower
    2019-02-08 v1.0.32 Maintenance
    2018-06-25 v1.0.28 Expose webNotification.requestPermission #5
    2018-06-14 v1.0.26 Better error detection on chrome mobile #4
    2017-08-25 v1.0.21 Support service worker web notifications
    2017-01-31 v1.0.3 Removed polyfill dependency
    2017-01-22 v1.0.0 Official release
    2017-01-22 v0.0.2 Initial release

    License

    Developed by Sagie Gur-Ari and licensed under the Apache 2 open source license.

    Install

    npm i simple-web-notification

    DownloadsWeekly Downloads

    1,417

    Version

    2.0.1

    License

    Apache-2.0

    Unpacked Size

    56.7 kB

    Total Files

    22

    Last publish

    Collaborators

    • sagiegurari