title: How to handle error when using browser notifications?
body: <p>I have Vue JS application where I should create browser notification for users when they get notification.</p>
  <p>I created notification for testing purposes.
  Notification is run on mounted hook of the application
  Notification is shown successfully on screen, but I have an error in console:</p>
  <blockquote>
  <p>Uncaught (in promise) TypeError: Cannot read property
  'showNotification' of undefined</p>
  </blockquote>
  <p><strong>Why do I get this error even if my notification is successfully shown?</strong></p>
  <p><strong>How can I handle it?</strong></p>
  <pre><code>mounted () {
      this.checkUserNotificationPermission()
    },
  
  checkUserNotificationPermission () {
        if (Notification.permission === 'granted') {
          this.displayBrowserNotification()
        } else if (Notification.permission !== 'denied') {
          Notification.requestPermission().then((permission) =&gt; {
            if (permission === 'granted') {
              this.displayBrowserNotification()
            }
          })
        }
      }
  
  displayBrowserNotification () {
        const title = 'New Message'
        const options = {
          body: 'Body description',
          icon: 'path/to/icon',
          vibrate: [100, 50, 100]
        }
        const notification = new Notification(title, options)
        navigator.serviceWorker.getRegistration().then((reg) =&gt; {
          reg.showNotification(notification)
        })
      }
  </code></pre>