Created
July 1, 2021 12:06
-
-
Save nfreear/32a9291ea026b522f04ad43bc44b0e1e to your computer and use it in GitHub Desktop.
Sending a alarm / notification when in the background (Javascript)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Alarm / notification in the background / JS </title> | |
| <style> | |
| body { margin: 1rem auto; max-width: 32rem; padding: 0 .5rem; } | |
| button { font-size: 1.5rem; padding: .5rem 3rem; } | |
| </style> | |
| <h1> Sending a notification when in background </h1> | |
| <p> | |
| <button id="test-notify-button"> Test notification </button> | |
| </p> | |
| <script> | |
| document.querySelector('#test-notify-button').addEventListener('click', ev => { | |
| notifyMe(); | |
| }); | |
| window.addEventListener('blur', ev => console.warn('Window blurred')); | |
| function notifyMe() { | |
| // Let's check if the browser supports notifications | |
| if (!("Notification" in window)) { | |
| console.warn('This browser does not support desktop notification'); | |
| alert("This browser does not support desktop notification"); | |
| } | |
| // Let's check whether notification permissions have already been granted | |
| else if (Notification.permission === "granted") { | |
| // If it's okay let's create a notification | |
| // var notification = new Notification("Hi there! (2)"); | |
| futureNotification(); | |
| console.warn('Notification already granted!'); | |
| } | |
| // Otherwise, we need to ask the user for permission | |
| else if (Notification.permission !== "denied") { | |
| Notification.requestPermission().then(function (permission) { | |
| // If the user accepts, let's create a notification | |
| if (permission === "granted") { | |
| // var notification = new Notification("Hi there!"); | |
| futureNotification(); | |
| console.warn('Notification permission granted!'); | |
| } else { | |
| console.warn('Notififation permission denied!'); | |
| } | |
| }); | |
| } else { | |
| console.warn('Notification "else" ?'); | |
| } | |
| // At last, if the user has denied notifications, and you | |
| // want to be respectful there is no need to bother them any more. | |
| } | |
| function futureNotification(delayMs = 5000) { | |
| setTimeout(() => { | |
| const notif = new Notification('Hello there!', { | |
| lang: 'en-GB', | |
| body: 'I am some body text ...!', | |
| tag: 'MyTag', | |
| // icon, image, | |
| requireInteraction: true, | |
| vibrate: window.navigator.vibrate([200, 100, 200]), | |
| }); | |
| notif.onclick = ev => console.debug('Notification event, click:', ev); | |
| notif.onclose = ev => console.debug('Notification event, close:', ev); | |
| notif.onshow = ev => console.debug('Notification event, show:', ev); | |
| console.warn('New notification:', delayMs, notif); | |
| }, | |
| delayMs); | |
| } | |
| </script> | |
| <pre> | |
| NDF, 01-July-2021. | |
| * https://developer.mozilla.org/en-US/docs/Web/API/notification#examples; | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment