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>