Test notifications API

index.html

@@ -30,6 +30,9 @@
     <div id="content">
       <h1>Jenot</h1>
 
+      <button id="enable-notifications" class="hidden"">Enable notifications</button>
+      <button id="test-notifications">Send test notification</button>
+
       <note-form mode="add" id="new-note">
         <div class="note">
           <p class="content">
@@ -37,7 +40,7 @@
           <div class="toolbar">
             <button class="add">➕</button>
             <button class="tasklist-mode">☑️</button>
-            <button class="note-mode">📑</button>
+            <button class="note-mode hidden">📑</button>
             <button class="remove">🗑️</button>
           </div>
         </div>

js/jenot.js

@@ -2,8 +2,29 @@ import "./service-worker.js";
 import { renderText } from "./dom.js";
 import { NoteStore } from "./store.js";
 import { DBNoteStore } from "./db-store.js";
+import {
+  authorizeNotifications,
+  notificationsEnabled,
+  sendNotification,
+} from "./notifications.js";
 import "./components.js";
 
+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"));
+  });
+}
+
+notificationsTestButton.addEventListener("click", () => {
+  setTimeout(() => {
+    sendNotification("reminder", "This is a test reminder!");
+  }, 8000);
+});
+
 const urlParams = new URLSearchParams(window.location.search);
 
 const Notes = urlParams.has("localStorage")

js/notifications.js

@@ -0,0 +1,22 @@
+const notificationIcon = "/img/android-chrome-192x192.png";
+
+export function notificationsEnabled() {
+  return Notification.permission === "granted";
+}
+
+export function authorizeNotifications(afterCallback) {
+  Notification.requestPermission(function (permission) {
+    sendNotification(
+      "notification",
+      "Jenot can now send you alerts about reminders!",
+    );
+    afterCallback();
+  });
+}
+
+export function sendNotification(titleSuffix, message) {
+  return new Notification(`Jenot ${titleSuffix}`, {
+    body: message,
+    icon: notificationIcon,
+  });
+}