Add browser message notification.

README.md

@@ -1,4 +1,4 @@
-<img width="1920" height="1080" alt="PANDORA" src="https://github.com/user-attachments/assets/d9d7ba36-4510-47e1-8c49-b1977a26c448" />
+<img width="1920" height="auto" alt="PANDORA" src="https://github.com/user-attachments/assets/d9d7ba36-4510-47e1-8c49-b1977a26c448" />
 
 Pandora is an open-source web client for the WAHA API.
 
@@ -13,7 +13,7 @@ Pandora is an open-source web client for the WAHA API.
 - [ ] Sending audio messages
 - [x] Sending attachments (sends image/video as such)<sup>4</sup>
 - [x] Notification sound<sup>5</sup>
-- [ ] Browser notification
+- [x] Browser notification
 - [x] Download attachments
 - [x] Automatically download images<sup>6</sup>
 - [X] Local message storing

js/app.js

@@ -11,8 +11,10 @@ let activeChatState = null;
 const messageTone = new Audio("./message.ogg");
 const longPressEvent = new CustomEvent("longpress");
 export let isLoadingChat = false;
+export let notificationAuthorization = false;
 
 document.addEventListener('DOMContentLoaded', async () => {
+    askForNotificationPermission();
     elements.inputApiKey.value = config.apiKey;
     elements.inputWahaUrl.value = config.wahaUrl;
     elements.inputSession.value = config.session;
@@ -32,6 +34,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 });
 
+async function askForNotificationPermission() {
+    notificationAuthorization = await Notification.requestPermission();
+}
+
 async function setupElementsData() {
     const usr = await getAppUser();
     const usrPic = (await getChatPicture(usr.id))?.url;
@@ -254,6 +260,9 @@ async function handleIncomingMessage(msg) {
     if (!msg.fromMe) {
         messageTone.play();
     }
+    if (notificationAuthorization) {
+        new Notification("New message", { body: msg.body });
+    }
     
     if (activeChatState && activeChatState.id === msgChatId) {
         const msgId = normalizeId(msg.id) || msg.id;