fix service worker and notifications init for FF and Safari

service-worker.js

@@ -111,35 +111,35 @@ self.addEventListener('notificationclick', event => {
 
   event.waitUntil(self.clients.matchAll({
     type: 'window',
-    includeUncontrolled: true
+    includeUncontrolled: true})
-  }).then(windowClients => {
+    .then(windowClients => {
-    let anyClient = null;
+      let anyClient = null;
-    for (let i = 0; i < windowClients.length; i++) {
+      for (let i = 0; i < windowClients.length; i++) {
-      const url = new URL(windowClients[i].url);
+        const url = new URL(windowClients[i].url);
-      if (url.hash.includes(data.topic)) {
+        if (url.hash.includes(data.topic)) {
-        // Found the Tinode tab with the right topic open.
+          // Found the Tinode tab with the right topic open.
-        return windowClients[i].focus();
+          return windowClients[i].focus();
-      } else {
+        } else {
-        // This will be the least recently used tab.
+          // This will be the least recently used tab.
-        anyClient = windowClients[i];
+          anyClient = windowClients[i];
+        }
       }
-    }
 
-    // Found tab with Tinode on a different topic,
+      // Found tab with Tinode on a different topic,
-    // navigate to the right topic.
+      // navigate to the right topic.
-    if (anyClient) {
+      if (anyClient) {
-      const url = new URL(anyClient.url);
+        const url = new URL(anyClient.url);
+        url.hash = urlHash;
+        return anyClient.focus().then(thisClient => {
+          return thisClient.navigate(url);
+        });
+      }
+
+      // Did not find a Tinode browser tab. Open one.
+      const url = new URL(self.location.origin);
       url.hash = urlHash;
-      return anyClient.focus().then(thisClient => {
+      return clients.openWindow(url);
-        return thisClient.navigate(url);
+    }));
-      });
-    }
-
-    // Did not find a Tinode browser tab. Open one.
-    const url = new URL(self.location.origin);
-    url.hash = urlHash;
-    return clients.openWindow(url);
-  }));
 });
 
 // This is needed for 'Add to Home Screen'.

src/views/tinode-web.jsx

@@ -299,11 +299,7 @@ class TinodeWeb extends React.Component {
     }).then(_ => {
       // Initialize desktop alerts.
       if (this.state.desktopAlertsEnabled) {
-        this.initFCMessaging().then(_ => {
+        this.initFCMessaging().catch(_ => {
-          if (this.state.desktopAlerts) {
-            this.tinode.setDeviceToken(this.state.firebaseToken);
-          }
-        }).catch(_ => {
           // do nothing: handled earlier.
           // catch needed to pervent unnecessary logging of error.
         });
@@ -370,20 +366,27 @@ class TinodeWeb extends React.Component {
     const onError = (msg, err) => {
       console.error(msg, err);
       this.handleError(formatMessage(messages.push_init_failed), 'err');
-      this.setState({desktopAlertsEnabled: false, firebaseToken: null});
+      this.setState({firebaseToken: null});
       LocalStorageUtil.updateObject('settings', {desktopAlerts: false});
     }
 
     try {
       this.fcm = firebaseGetMessaging(firebaseInitApp(FIREBASE_INIT, APP_NAME));
-      return navigator.serviceWorker.register('/service-worker.js').then((reg) => {
+      return navigator.serviceWorker.getRegistration('/service-worker.js').then(reg => {
-        this.checkForAppUpdate(reg);
+        if (reg) {
-        reg.active.postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));
+          return reg
-        return reg;
+        }
-      }).then((reg) => {
+        return navigator.serviceWorker.register('/service-worker.js').then(reg => {
+          this.checkForAppUpdate(reg);
+          return reg;
+        });
+      }).then(reg => {
+        // Pass locale and version config to the service worker.
+        console.log("SW active:", reg.active, "installing:", reg.installing);
+        (reg.active || reg.installing).postMessage(JSON.stringify({locale: locale, version: PACKAGE_VERSION}));
         // Request token.
         return TinodeWeb.requestFCMToken(this.fcm, reg);
-      }).then((token) => {
+      }).then(token => {
         const persist = LocalStorageUtil.getObject('keep-logged-in');
         if (token != this.state.firebaseToken) {
           this.tinode.setDeviceToken(token);
@@ -416,17 +419,17 @@ class TinodeWeb extends React.Component {
     return firebaseGetToken(fcm, {
       serviceWorkerRegistration: sw,
       vapidKey: FIREBASE_INIT.messagingVapidKey
-    }).then((token) => {
+    }).then(token => {
       if (token) {
         return token;
       } else {
         // Try to request permissions.
-        return Notification.requestPermission().then((permission) => {
+        return Notification.requestPermission().then(permission => {
           if (permission === 'granted') {
             return firebaseGetToken(fcm, {
               serviceWorkerRegistration: reg,
               vapidKey: FIREBASE_INIT.messagingVapidKey
-            }).then((token) => {
+            }).then(token => {
               if (token) {
                 return token;
               } else {
@@ -576,6 +579,12 @@ class TinodeWeb extends React.Component {
         this.handleError(err.message, 'err');
       });
     }
+
+    if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) {
+      // Firefox and Safari: "The Notification permission may only be requested from inside a
+      // short running user-generated event handler".
+      this.initFCMessaging();
+    }
   }
 
   // Enable or disable saving the password and IndexedDB.
@@ -1920,15 +1929,16 @@ class TinodeWeb extends React.Component {
           :
           null
         }
-        <Alert
+        {this.state.alertVisible ?
-          visible={this.state.alertVisible}
+          <Alert
-          title={this.state.alertParams.title}
+            visible={this.state.alertVisible}
-          content={this.state.alertParams.content}
+            title={this.state.alertParams.title}
-          onReject={this.state.alertParams.onReject ? (_ => this.setState({alertVisible: false})) : null}
+            content={this.state.alertParams.content}
-          reject={this.state.alertParams.reject}
+            onReject={this.state.alertParams.onReject ? (_ => this.setState({alertVisible: false})) : null}
-          onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}}
+            reject={this.state.alertParams.reject}
-          confirm={this.state.alertParams.confirm}
+            onConfirm={_ => {this.setState({alertVisible: false}); this.state.alertParams.onConfirm();}}
-          />
+            confirm={this.state.alertParams.confirm}
+            /> : null}
         <SidepanelView
           tinode={this.tinode}
           connected={this.state.connected}

src/widgets/alert.jsx

@@ -3,26 +3,23 @@ import { FormattedMessage } from 'react-intl';
 
 export default class Alert extends React.PureComponent {
   render() {
-    return this.props.visible ?
+    <div className="alert-container">
-      <div className="alert-container">
+      <div className="alert">
-        <div className="alert">
+        <div className="title">{this.props.title}</div>
-          <div className="title">{this.props.title}</div>
+        <div className="content">{this.props.content}</div>
-          <div className="content">{this.props.content}</div>
+        <div className="dialog-buttons">
-          <div className="dialog-buttons">
+          {this.props.onReject ?
-            {this.props.onReject ?
+            <button className="outline" onClick={this.props.onReject}>
-              <button className="outline" onClick={this.props.onReject}>
+              {this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
-                {this.props.reject || <FormattedMessage id="button_cancel" defaultMessage="Cancel" description="Button [Cancel]" />}
-              </button>
-              :
-              null
-            }
-            <button className="primary" onClick={this.props.onConfirm}>
-              {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
             </button>
-          </div>
+            :
+            null
+          }
+          <button className="primary" onClick={this.props.onConfirm}>
+            {this.props.confirm || <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]"  />}
+          </button>
         </div>
       </div>
-    :
+    </div>
-    null;
   }
 };

umd/index.dev.js

@@ -7961,11 +7961,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       this.tinode.onDataMessage = this.handleDataMessage;
     }).then(_ => {
       if (this.state.desktopAlertsEnabled) {
-        this.initFCMessaging().then(_ => {
+        this.initFCMessaging().catch(_ => {});
-          if (this.state.desktopAlerts) {
-            this.tinode.setDeviceToken(this.state.firebaseToken);
-          }
-        }).catch(_ => {});
       }
       const parsedNav = _lib_navigation_js__WEBPACK_IMPORTED_MODULE_18__["default"].parseUrlHash(window.location.hash);
       this.resetContactList();
@@ -8023,7 +8019,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       console.error(msg, err);
       this.handleError(formatMessage(messages.push_init_failed), 'err');
       this.setState({
-        desktopAlertsEnabled: false,
         firebaseToken: null
       });
       _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].updateObject('settings', {
@@ -8032,14 +8027,20 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     };
     try {
       this.fcm = (0,firebase_messaging__WEBPACK_IMPORTED_MODULE_3__.getMessaging)((0,firebase_app__WEBPACK_IMPORTED_MODULE_2__.initializeApp)(FIREBASE_INIT, _config_js__WEBPACK_IMPORTED_MODULE_12__.APP_NAME));
-      return navigator.serviceWorker.register('/service-worker.js').then(reg => {
+      return navigator.serviceWorker.getRegistration('/service-worker.js').then(reg => {
-        this.checkForAppUpdate(reg);
+        if (reg) {
-        reg.active.postMessage(JSON.stringify({
+          return reg;
+        }
+        return navigator.serviceWorker.register('/service-worker.js').then(reg => {
+          this.checkForAppUpdate(reg);
+          return reg;
+        });
+      }).then(reg => {
+        console.log("SW active:", reg.active, "installing:", reg.installing);
+        (reg.active || reg.installing).postMessage(JSON.stringify({
           locale: locale,
           version: _version_js__WEBPACK_IMPORTED_MODULE_14__.PACKAGE_VERSION
         }));
-        return reg;
-      }).then(reg => {
         return TinodeWeb.requestFCMToken(this.fcm, reg);
       }).then(token => {
         const persist = _lib_local_storage_js__WEBPACK_IMPORTED_MODULE_17__["default"].getObject('keep-logged-in');
@@ -8229,6 +8230,9 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         this.handleError(err.message, 'err');
       });
     }
+    if (this.state.desktopAlertsEnabled && !this.state.firebaseToken) {
+      this.initFCMessaging();
+    }
   }
   handlePersistenceChange(persist) {
     if (persist) {
@@ -9387,7 +9391,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
       onRinging: this.handleCallRinging,
       onAcceptCall: this.handleCallAccept,
       onReject: this.handleCallHangup
-    }) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_alert_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    }) : null, this.state.alertVisible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_alert_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
       visible: this.state.alertVisible,
       title: this.state.alertParams.title,
       content: this.state.alertParams.content,
@@ -9402,7 +9406,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         this.state.alertParams.onConfirm();
       },
       confirm: this.state.alertParams.confirm
-    }), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidepanel_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
+    }) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_sidepanel_view_jsx__WEBPACK_IMPORTED_MODULE_11__["default"], {
       tinode: this.tinode,
       connected: this.state.connected,
       displayMobile: this.state.displayMobile,
@@ -9718,7 +9722,7 @@ __webpack_require__.r(__webpack_exports__);
 
 class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
   render() {
-    return this.props.visible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "alert-container"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "alert"
@@ -9746,7 +9750,7 @@ class Alert extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent)
         "type": 0,
         "value": "OK"
       }]
-    }))))) : null;
+    })))));
   }
 }
 ;