Detect availability of Notification API

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

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,6 +58,8 @@ if (!isLoggedIn) {
 
 // Notifications API test - to be reused for push notifications later on
 
+if (notificationsAvailable()) {
+  document.querySelector("#notifications-pane").classList.remove("hidden");
   const notificationsButton = document.querySelector("#enable-notifications");
   const notificationsTestButton = document.querySelector("#test-notifications");
 
@@ -72,6 +75,7 @@ notificationsTestButton.addEventListener("click", () => {
       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.

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) {