index.html Example File

webenginewidgets/notifications/data/index.html
 <!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>