WebNotificationAPI/index.html at master · rfazi/WebNotificationAPI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
    <title>Web Notification API</title>
</head>
<body>
<button id="ntfBtn" onclick="btnClick();"></button>
<button id="clearBtn" onclick="clearBtnClick();">Clear all notifications</button>
<p>Enable notification and then leave tab, after 5000ms a notification will appear. Remember: you need a secure context (HTTPS) or localhost.</p>
<p>You can find a guide on how to replicate this simple website <a href="https://medium.com/@fazi.ruben/web-notification-api-simple-usage-d7796ad25afc">here</a> or <a href="https://github.com/rfazi/WebNotificationAPI">here</a> you can find source code.</p>
<div id="logs" style="overflow-y: auto;height: 300px;border: 1px solid black;padding: 10px;"></div>
<script>
    // logs div
    const logs = document.getElementById("logs");
    // notification btn
    const btn = document.getElementById("ntfBtn");
    // if tab is hidden/unfocused/inactive
    let pageHidden = false;
    // worker
    let myWorker = null;
    // notification timer
    let timer = null;
    // notification status
    let notificationEnabled = false;
    // write log
    function writeLog(log) {
        const p = document.createElement("p");
        p.innerText = `[${new Date().toLocaleString()}]: ${log}\n----`;
        logs.append(p);
        logs.scrollTo(0, logs.scrollHeight);
    }
    // write first log
    writeLog("Start");
    // btn click handler
    async function btnClick() {
        // if already granted, disable
        if (notificationEnabled) {
            notificationEnabled = false;
            writeLog("Notification disabled");
            return btn.innerText = "Enable notification";
        }
        // request permission
        const status = await Notification.requestPermission();
        if (status === "granted") {
            notificationEnabled = true;
            writeLog("Notification granted");
            btn.innerText = "Disable notification";
        } else {
            writeLog("Notification denied");
            btn.setAttribute('disabled', 'disabled');
        }
    }
    // clear notifications
    function clearBtnClick() {
        if (myWorker != null) myWorker.postMessage({type: 'clearNotifications'});
    }
    // add event listeners on the document for the visibilityChange event
    document.addEventListener("visibilitychange", () => {
        // use the document's hidden property to check if the current tab is active!
        pageHidden = document.hidden;
        writeLog(`Page is ${pageHidden ? "hidden" : "visible"}`);
        if (pageHidden) {
            if (myWorker != null) {
                timer = setTimeout(() => {
                    if (notificationEnabled) myWorker.postMessage({type: 'showNotification', msg: `Page is hidden`});
                    else writeLog("Notification is disabled. No notification was displayed.")
                    timer = null;
                }, 5000);
            }
            else writeLog("I cannot show a notification because Worker is not available on your browser");
        }
        // if page was visible we clear timeout for notification
        else if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    });
    // check if worker is available
    if (window.Worker) {
        myWorker = new Worker("worker.js");
        myWorker.onmessage = (e) => {
            if (e.data.type === "writeLog") writeLog(e.data.msg);
        };
    } else writeLog("Worker is not available on your browser");

    if (!("Notification" in window)) {
        writeLog("This browser does not support notifications.");
        btn.setAttribute('disabled', 'disabled');
        btn.innerText = "Notification not supported";
    } else {
        if (Notification.permission === "granted") {
            notificationEnabled = true;
            btn.innerText = "Disable notification";
        } else if (Notification.permission === "denied") {
            writeLog("Notification denied");
            btn.innerText = "Notification denied";
            btn.setAttribute('disabled', 'disabled');
        } else {
            btn.innerText = "Enable notification";
        }
    }
</script>
</body>
</html>