From f33eac82b8e610adecd2fac0f0a789e9049e05cb Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Sun, 1 Dec 2024 15:09:06 +0100
Subject: [PATCH] Detect availability of Notification API

---
 priv/static/index.html          |  2 +-
 priv/static/js/jenot.js         | 28 ++++++++++++++++------------
 priv/static/js/notifications.js |  5 ++++-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/priv/static/index.html b/priv/static/index.html
index 2c38bdb..f108ebb 100644
--- a/priv/static/index.html
+++ b/priv/static/index.html
@@ -53,7 +53,7 @@
           <button type="submit">Log out</button>
         </form>
 
-        <div class="hidden">
+        <div id="notifications-pane" class="hidden">
           <!-- Hidden for now, until push notifications are implemented -->
           <button id="enable-notifications" class="hidden">
             Enable notifications
diff --git a/priv/static/js/jenot.js b/priv/static/js/jenot.js
index 437910b..2b5f07d 100644
--- a/priv/static/js/jenot.js
+++ b/priv/static/js/jenot.js
@@ -2,6 +2,7 @@ import "./service-worker-init.js";
 import { renderText } from "./dom.js";
 import { SyncedNoteStore } from "./synced-store.js";
 import {
+  notificationsAvailable,
   authorizeNotifications,
   notificationsEnabled,
   sendNotification,
@@ -57,22 +58,25 @@ if (!isLoggedIn) {
 
 // Notifications API test - to be reused for push notifications later on
 
-const notificationsButton = document.querySelector("#enable-notifications");
-const notificationsTestButton = document.querySelector("#test-notifications");
+if (notificationsAvailable()) {
+  document.querySelector("#notifications-pane").classList.remove("hidden");
+  const notificationsButton = document.querySelector("#enable-notifications");
+  const notificationsTestButton = document.querySelector("#test-notifications");
 
-if (!notificationsEnabled()) {
-  notificationsButton.classList.remove("hidden");
-  notificationsButton.addEventListener("click", () => {
-    authorizeNotifications(() => notificationsButton.classList.add("hidden"));
+  if (!notificationsEnabled()) {
+    notificationsButton.classList.remove("hidden");
+    notificationsButton.addEventListener("click", () => {
+      authorizeNotifications(() => notificationsButton.classList.add("hidden"));
+    });
+  }
+
+  notificationsTestButton.addEventListener("click", () => {
+    setTimeout(() => {
+      sendNotification("reminder", "This is a test reminder!");
+    }, 8000);
   });
 }
 
-notificationsTestButton.addEventListener("click", () => {
-  setTimeout(() => {
-    sendNotification("reminder", "This is a test reminder!");
-  }, 8000);
-});
-
 // There are two note-form component instances - one for
 // composing new notes and another one for editing existing notes.
 
diff --git a/priv/static/js/notifications.js b/priv/static/js/notifications.js
index d2d97ef..5d4c551 100644
--- a/priv/static/js/notifications.js
+++ b/priv/static/js/notifications.js
@@ -1,7 +1,10 @@
 const notificationIcon = "/img/android-chrome-192x192.png";
 
+export function notificationsAvailable() {
+  return !!window.Notification;
+}
 export function notificationsEnabled() {
-  return Notification.permission === "granted";
+  return window.Notification && Notification.permission === "granted";
 }
 
 export function authorizeNotifications(afterCallback) {