From 7660c926e241fbd14f504443e2260c6385ec15c3 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Mon, 4 Nov 2024 15:37:22 +0100
Subject: [PATCH] draft incoming call notification sample

---
 README.md                              |   1 +
 incoming-call-notifications/index.html | 210 +++++++++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 incoming-call-notifications/index.html
diff --git a/README.md b/README.md
index 41d201d..38c6812 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ last sync'd April 16, 2024
 | Selectlist demos | Demo page showing how the Open UI's `<selectlist>` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \<selectlist\> demos](https://microsoftedge.github.io/Demos/selectlist/) |
 | EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) |
 | SVG support in the Async Clipboard API | Demo page showing how the Async Clipboard API supports SVG format. | [/svg-clipboard/](https://github.com/MicrosoftEdge/Demos/tree/main/svg-clipboard) | [SVG clipbard support demo](https://microsoftedge.github.io/Demos/svg-clipboard/) |
+| IndexedDB: getAllRecords() | Demo page showing how the newly proposed `getAllRecords` IndexedDB method differs from `getAll` and `getAllKeys`. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) |
 
 
 ## Adding a new demo
diff --git a/incoming-call-notifications/index.html b/incoming-call-notifications/index.html
new file mode 100644
index 0000000..256ca0f
--- /dev/null
+++ b/incoming-call-notifications/index.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Incoming Call Notifications API</title>
+  <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
+
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <button onclick="requestPermission()">Request Permission</button>
+  <button onclick="showServiceWorkerToast()">Show ServiceWorker Toast</button>
+  <button onclick="showIncomingCallToast()">Show Incoming Call Toast</button>
+  <button onclick="showToastHistory()">Show Toast History</button>
+  <button onclick="clearToastHistory()">Clear Toast History</button>
+
+  <div id="permissionStatus"></div>
+  <div id="log"></div><br />
+
+  <script>
+    "use strict";
+
+    const logEl = document.getElementById("log");
+
+    let toastId = localStorage.getItem("toastId");
+    if (toastId === null) {
+      toastId = 1;
+      localStorage.setItem("toastId", toastId);
+    }
+
+    let registration = null;
+
+    function log(message) {
+      logEl.innerHTML += `${message}<br>`;
+    }
+
+    function logNotification(notification) {
+      log(`<strong>${notification.title}</strong>`);
+      log(notification.body);
+      log("");
+    }
+
+    function updatePermissionStatus() {
+      document.getElementById("permissionStatus").innerHTML = `Notification Permission: ${Notification.permission}`;
+    }
+
+    function requestPermission() {
+      Notification.requestPermission()
+        .then((result) => {
+          updatePermissionStatus();
+          log("requestPermission() succeeded");
+        }).catch((error) => {
+          log(`requestPermission() failed: ${error}.`);
+        });
+    }
+
+    let windowNotificationList = [];
+
+    function showToast() {
+      const notification = new Notification(`Window Title ${++toastId}`, { body: `Window Body ${++toastId}`, tag: "jim-bagleaducia", icon: "../resources/happy.jpg", image: "../resources/happy.jpg", requireInteraction: false, silent: true });
+      localStorage.setItem("toastId", toastId);
+      windowNotificationList.push(notification);
+      notification.onclick = () => {
+        log(`Window 'click' event for: ${notification.title}, timestamp: ${new Date(notification.timestamp)}, requireInteraction: ${notification.requireInteraction}, silent: ${notification.silent}`);
+      };
+      notification.onerror = () => {
+        log(`Window 'error' event for: ${notification.title}`);
+      };
+      notification.onshow = () => {
+        log(`Window 'show' event for: ${notification.title}`);
+      };
+      notification.onclose = () => {
+        log(`Window 'close' event for: ${notification.title}`);
+      };
+    }
+
+    function closeToast() {
+      windowNotificationList.forEach((toast) => {
+        toast.close();
+      });
+      windowNotificationList = [];
+    }
+
+    function showToastWithInvalidImage() {
+      const notification = new Notification(`Window Title ${++toastId}`, { body: `Window Body ${++toastId}`, icon: "../resources/happy2.jpg", requireInteraction: false, silent: true });
+      notification.onclick = () => {
+        log(`Window 'click' event for: ${notification.title}, timestamp: ${new Date(notification.timestamp)}, requireInteraction: ${notification.requireInteraction}, silent: ${notification.silent}`);
+      };
+      notification.onerror = () => {
+        log(`Window 'error' event for: ${notification.title}`);
+      };
+    }
+
+    navigator.serviceWorker.register("service-worker.js", { scope: '/repro_pages/notifications/' })
+      .then((result) => {
+        registration = result;
+        log("register() succeeded");
+      }).catch((error) => {
+        log(`register() failed: ${error}.`);
+      });
+
+    navigator.serviceWorker.onmessage = (messageEvent) => {
+      log(messageEvent.data);
+    }
+
+    function showServiceWorkerToast() {
+      if (registration !== null) {
+        registration.showNotification(`ServiceWorker Title ${++toastId}`, { body: `ServiceWorker Body: ${toastId}`, icon: "../resources/happy.jpg", actions: [{ action: "open_window", title: "Open New Window" }, { action: "focus", title: "Focus Existing Window" }] })
+          .then(() => {
+            log("showNotification() succeeded");
+          }).catch((error) => {
+            log(`showNotification() failed: ${error}.`);
+          });
+      }
+    }
+
+    function showServiceWorkerToastWithTag() {
+      if (registration !== null) {
+        registration.showNotification(`ServiceWorker Title with Tag ${++toastId}`, { body: `ServiceWorker Body: Tag ${toastId}`, icon: "../resources/happy.jpg", requireInteraction: false, silent: true, tag: "ServiceWorkerTag" })
+          .then(() => {
+            log("showNotification() succeeded");
+          }).catch((error) => {
+            log(`showNotification() failed: ${error}.`);
+          });
+      }
+    }
+
+    function showServiceWorkerToastWithTagWithRenotify() {
+      if (registration !== null) {
+        registration.showNotification(`ServiceWorker Title with Tag with renotify ${++toastId}`, { body: `ServiceWorker Body: Tag with renotify ${toastId}`, icon: "../resources/happy.jpg", requireInteraction: false, silent: true, tag: "ServiceWorkerTagWithoutRenotify", renotify: true })
+          .then(() => {
+            log("showNotification() succeeded");
+          }).catch((error) => {
+            log(`showNotification() failed: ${error}.`);
+          });
+      }
+    }
+
+    function showServiceWorkerGlobalScopeToast() {
+      if (navigator.serviceWorker.controller !== null) {
+        navigator.serviceWorker.controller.postMessage(++toastId);
+      }
+    }
+
+    const dedicatedWorker = new Worker("dedicated-worker.js");
+    dedicatedWorker.onmessage = (messageEvent) => {
+      log(messageEvent.data);
+    }
+
+    function showDedicatedWorkerToast() {
+      dedicatedWorker.postMessage(++toastId);
+    }
+
+    function closeDedicatedWorkerToast() {
+      dedicatedWorker.postMessage("close");
+    }
+
+    function showIncomingCallToast() {
+      if (registration !== null) {
+        registration.showNotification(`IncomingCall Title ${++toastId}`, { body: `ServiceWorker Body: ${toastId}`, icon: "../resources/happy.jpg", scenario: "incoming-call", actions: [{ action: "accept-audio-call", title: "audio" }, { action: "accept-video-call", title: "video" }] })
+          .then(() => {
+            log("showNotification() succeeded");
+          }).catch((error) => {
+            log(`showNotification() failed: ${error}.`);
+          });
+      }
+    }
+
+    function showToastHistory() {
+      if (registration !== null) {
+        registration.getNotifications()
+          .then((resultList) => {
+            log(`Found <b>${resultList.length}</b> notifications:`)
+            log("");
+
+            resultList.forEach((notification) => {
+              logNotification(notification);
+            });
+          }).catch((error) => {
+            log(`getNotifications() failed: ${error}.`);
+          });
+      }
+    }
+
+    function clearToastHistory() {
+      if (registration !== null) {
+        registration.getNotifications()
+          .then((resultList) => {
+            log(`Clearing <b>${resultList.length}</b> notifications!`)
+
+            resultList.forEach((notification) => {
+              notification.close();
+            });
+          }).catch((error) => {
+            log(`getNotifications() failed: ${error}.`);
+          });
+      }
+    }
+
+    updatePermissionStatus();
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
