<!doctype html>
<html>
<head>
<title>Desktop Notifications Demo</title>
<script>
    function resetPermission() { document.Notification = 'default' }

    function getPermission() { return document.Notification }

    function sendNotification(title, body) {
        let notification = new Notification(title, { body: body, dir: 'rtl', lang: 'de', tag: 'tst' })
        notification.onclick = function() { console.info('onclick') }
        notification.onclose = function() { console.info('onclose') }
        notification.onerror = function(error) { console.info('onerror: ' + error) }
        notification.onshow = function() { console.info('onshow') }
    }

    function makeNotification() {
        let title = document.getElementById("title").value
        let body = document.getElementById("body").value
        console.log('making notification:', title)
        sendNotification(title, body)
    }

    function requestPermission(callback) {
        Notification.requestPermission().then(function (permission) {
            document.Notification = permission
            if (callback)
                callback(permission)
        })
    }

    function displayNotification() {
        console.info('notifications are ' + document.Notification)

        let state = document.getElementById('state')

        if (document.Notification === 'denied') {
            state.innerHTML = 'Notifications disabled'
        } else if (document.Notification === 'granted') {
            makeNotification()
            state.innerHTML = 'notification created'
        } else {
            state.innerHTML = 'requesting permission...'
            requestPermission(function (permission) {
                console.info('notifications request: ' + permission)
                if (permission === 'granted') {
                    makeNotification()
                    state.innerHTML = 'permission granted, notification created'
                } else if (permission === 'denied')
                    state.innerHTML = 'Notifications are disabled'
            })
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        document.Notification = Notification.permission
    })
</script>
</head>
<body>
    <form name="NotificationForm" id="notificationForm">
        Title: <input type="text" id="title" placeholder="Notification title" value='sample title'><br>
        Body: <input type="text" id="body" placeholder="Notification body" value='default body'><br>
        <input type="button" value="Display Notification" onclick="displayNotification()"><br>
        <input type="button" value="Reset Permission" onclick="resetPermission()">
    </form>
    <div id='state'></div>
</body>
</html>