Notifications

notifications.html

<button id="favicon-change" class="btn btn-default">Change Header</button>
<button id="notification" class="btn btn-default">Notification</button>

notifications.js

<script type="text/javascript">
    $(function() {
        $('#favicon-change').click(function() {
            if ($('#favicon').attr('href') == 'img/favicon-alert.png')
                $('#favicon').attr('href', 'img/favicon.png');
            else $('#favicon').attr('href', 'img/favicon-alert.png');
        });
        $('#notification').click(function() {
            var sendMessage = function() {
                var notification = new Notification("Hi there!", {
                    body: 'Do you like my body?',
                    icon: 'img/notification-icon.png'
                });
                new Audio('media/knock_brush.mp3').play();
                setTimeout(notification.close.bind(notification), 10000);
            };

            if (!("Notification" in window)) {
                console.log('notifications not supported!');
            }
            else if (Notification.permission === "granted") {
                console.log('notification sent');
                sendMessage();
            }
            else if (Notification.permission !== 'denied') {
                console.log('Asking permission');
                Notification.requestPermission(function (permission) {
                    if (permission === "granted") {
                        console.log('permission granted');
                        sendMessage();
                    }
                });
            }
        });
    });
</script>