<!doctype html>
<html>
<head>
<title>Web Notifications Example</title>
<script>
    var notificationsCreated = 0

    function getPermission() { return document.Notification }
    function resetPermission(permission = 'default') {
        document.Notification = permission
        document.getElementById('state').value = getPermission()
    }

    function createNotification() {
        let title = 'Notification #' + ++notificationsCreated
        let options = { body: 'Visit doc.qt.io for more info!', icon: 'icon.png', }

        let notification = new Notification(title, options)
        document.notification = notification

        notification.onerror = function(error) {
            document.getElementById('act').value += ' with error'
            document.notification = null
        }
        notification.onshow = function() {
            document.getElementById('act').value += ', shown'
            document.getElementById('close').style.display = 'inline'
        }
        notification.onclick = function() {
            document.getElementById('act').value += ', clicked'
        }
        notification.onclose = function() {
            if (document.notification && notification == document.notification) {
                document.getElementById('act').value += ' and closed'
                document.getElementById('close').style.display = 'none'
                document.notification = null
            }
        }

        console.log('...notification created [Title: ' + title + ']')
        document.getElementById('act').value = 'Notification was created'
    }

    function onMakeNotification() {
        if (getPermission() == 'granted') {
            createNotification()
        } else if (getPermission() == 'denied') {
            setTimeout(function() {
                if (window.confirm('Notifications are disabled!\n' +
                                   'Permission needs to be granted by user. Reset?'))
                    resetPermission()
            }, 1)
        } else {
            Notification.requestPermission().then(function (permission) {
                console.info('notifications request: ' + permission)
                resetPermission(permission)
                if (permission == 'granted')
                    createNotification()
            })
        }
    }

    function closeNotification() { if (document.notification) document.notification.close() }

    document.addEventListener('DOMContentLoaded', function() { resetPermission(Notification.permission) })
</script>
</head>
<body style='text-align:center;'>
    <h3>Click the button to send a notification</h3>

    <button onclick='onMakeNotification()'>Notify!</button>

    <p>
        <output id='act'></output>
        <button id='close' style='display: none;' onclick='closeNotification()'>Close</button>
    </p><br>

    <p>
        <label for='state'>Permission:</label>
        <output id='state'></output>
        <button onclick='resetPermission()'>Reset</button>
    </p><br>

    <h4>More info can be found on:</h4>
    <ul style='list-style-type: none;'>
        <li>W3 <a href='https://www.w3.org/TR/notifications'>Web Notifications</a> standard</li>
        <li>Documentation for <a href='https://doc.qt.io'>Qt WebEngine</a> module</li>
    </ul>
</body>
</html>