Notifications Android & Desktop

client/scripts/ui.js

@@ -1,8 +1,8 @@
 const $ = query => document.getElementById(query);
 const $$ = query => document.body.querySelector(query);
 const isURL = text => /^((https?:\/\/|www)[^\s]+)/g.test(text.toLowerCase());
-const isDownloadSupported = (typeof document.createElement('a').download !== 'undefined');
-const isProductionEnvironment = !window.location.host.startsWith('localhost');
+window.isDownloadSupported = (typeof document.createElement('a').download !== 'undefined');
+window.isProductionEnvironment = !window.location.host.startsWith('localhost');
 
 class PeersUI {
 
@@ -236,10 +236,8 @@ class ReceiveDialog extends Dialog {
         this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
         this.show();
 
-        if (!isDownloadSupported) return;
-        // $a.target = "_blank"; // fallback
-        $a.target = "_system"; // fallback
-        $a.href = 'external:' + $a.href;
+        if (window.isDownloadSupported) return;
+        $a.target = "_blank"; // fallback
     }
 
     _formatFileSize(bytes) {
@@ -335,7 +333,7 @@ class Notifications {
     constructor() {
         // Check if the browser supports notifications
         if (!('Notification' in window)) return;
-        
+
         // Check whether notification permissions have already been granted
         if (Notification.permission !== 'granted') {
             this.$button = $('notification');
@@ -361,35 +359,53 @@ class Notifications {
         const config = {
             body: body,
             icon: '/images/logo_transparent_128x128.png',
-            // vibrate: [200, 100, 200, 100, 200, 100, 400],
-            // requireInteraction: true
         }
-        if (serviceWorker && serviceWorker.showNotification) {
+        try {
+            return new Notification(message, config);
+        } catch (e) {
             // android doesn't support "new Notification" if service worker is installed
+            if (!serviceWorker || !serviceWorker.showNotification) return;
             return serviceWorker.showNotification(message, config);
-        } else {
-            return new Notification(message, config);
         }
+
     }
 
     _messageNotification(message) {
         if (isURL(message)) {
             const notification = this._notify(message, 'Click to open link');
-            notification.onclick = e => window.open(message, '_blank', null, true);
+            this._bind(notification, e => window.open(message, '_blank', null, true));
         } else {
             const notification = this._notify(message, 'Click to copy text');
-            notification.onclick = e => document.copy(message);
+            this._bind(notification, e => this._copyText(message, notification));
         }
     }
 
     _downloadNotification(message) {
         const notification = this._notify(message, 'Click to download');
-        if (window.isDownloadSupported) return;
-        notification.onclick = e => {
-            document.querySelector('x-dialog [download]').click();
-        };
+        if (!window.isDownloadSupported) return;
+        this._bind(notification, e => this._download(notification));
     }
 
+    _download(notification) {
+        document.querySelector('x-dialog [download]').click();
+        notification.close();
+    }
+
+    _copyText(message, notification) {
+        document.copy(message);
+        notification.close();
+        this._notify('Copied text to clipboard');
+    }
+
+    _bind(notification, handler) {
+        if (notification.then) {
+            notification.then(e => serviceWorker.getNotifications().then(notifications => {
+                serviceWorker.addEventListener('notificationclick', handler);
+            }));
+        } else {
+            notification.onclick = handler;
+        }
+    }
 }
 
 class Snapdrop {