add "update is available" check

css/base.css

@@ -625,17 +625,21 @@ i.search {
   display: flex;
   background-color: #fff9c4;
   border-bottom: 1px solid #fff59d;
-  color: #607d8b;
+  color: #6d4c41;
+}
+.alert-box.info {
+  display: flex;
+  background-color: #e1f5fe;
+  border-bottom: 1px solid #4fc3f7;
+  color: #0288d1;
 }
 .alert-box .cancel .material-icons {
   font-size: 1rem;
+  color: #757575;
 }
 .alert-box.error .cancel .material-icons {
   color: #b71c1c;
 }
-.alert-box.warning .cancel .material-icons {
-  color: #757575;
-}
 .alert-box .icon {
   display: block;
   margin-right: 0.5rem;
@@ -649,7 +653,9 @@ i.search {
 .alert-box.error .icon .material-icons {
   color: #ef5350;
 }
-
+.alert-box.info .icon .material-icons {
+  color: #0288d1;
+}
 /* List of contacts */
 .flex-column {
   display: flex;

service-worker.js

@@ -20,7 +20,6 @@ firebase.messaging().setBackgroundMessageHandler(function(payload) {
   return self.registration.showNotification(title, options);
 });
 
-
 // This code handles a click on notification: takes
 // the user to the browser tab with the chat or opens a new tab.
 self.addEventListener('notificationclick', function(event) {

src/i18n/en.json

@@ -63,6 +63,7 @@
   "sidepanel_title_newtpk": "Start New Chat",
   "sidepanel_title_cred": "Confirm Credentials",
   "sidepanel_title_reset": "Reset Password",
+  "update_available": "Update available. <a href=\"\">Reload</a>.",
   "phone_dative": "phone",
   "email_dative": "email",
   "enter_confirmation_code_prompt": "Enter confirmation code sent to you by {method}:",

src/i18n/ru.json

@@ -117,5 +117,6 @@
   "topic_name_editing_placeholder": "Название чата",
   "button_create": "Создать",
   "badge_you": "вы",
-  "badge_owner": "влад."
+  "badge_owner": "влад.",
+  "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>."
 }

src/messages.json

@@ -64,6 +64,7 @@
     "sidepanel_title_newtpk": "Start New Chat",
     "sidepanel_title_cred": "Confirm Credentials",
     "sidepanel_title_reset": "Reset Password",
+    "update_available": "Update available. <a href=\"\">Reload</a>.",
     "phone_dative": "phone",
     "email_dative": "email",
     "enter_confirmation_code_prompt": "Enter confirmation code sent to you by {method}:",
@@ -239,6 +240,7 @@
     "topic_name_editing_placeholder": "Название чата",
     "button_create": "Создать",
     "badge_you": "вы",
-    "badge_owner": "влад."
+    "badge_owner": "влад.",
+    "update_available": "Есть новая версия приложения. <a href=\"\">Обновить</a>."
   }
 }

src/views/tinode-web.jsx

@@ -1,7 +1,7 @@
 // The top-level class to hold all functionality together.
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import * as firebase from 'firebase/app';
 import 'firebase/messaging';
@@ -24,6 +24,14 @@ import { updateFavicon } from '../lib/utils.js';
 // Sound to play on message received.
 const POP_SOUND = new Audio('audio/msg.mp3');
 
+const messages = defineMessages({
+  update_available: {
+    id: 'update_available',
+    defaultMessage: 'Update available. <a href="">Reload</a>.',
+    description: 'Message shown when an app update is available.'
+  }
+});
+
 class TinodeWeb extends React.Component {
   constructor(props) {
     super(props);
@@ -33,6 +41,7 @@ class TinodeWeb extends React.Component {
     this.handleResize = this.handleResize.bind(this);
     this.handleHashRoute = this.handleHashRoute.bind(this);
     this.handleOnline = this.handleOnline.bind(this);
+    this.checkForAppUpdate = this.checkForAppUpdate.bind(this);
     this.handleAppVisibility = this.handleAppVisibility.bind(this);
     this.handleReadTimer = this.handleReadTimer.bind(this);
     this.handleVisibilityEvent = this.handleVisibilityEvent.bind(this);
@@ -159,6 +168,7 @@ class TinodeWeb extends React.Component {
         this.fbPush = firebase.initializeApp(FIREBASE_INIT, APP_NAME).messaging();
         this.fbPush.usePublicVapidKey(FIREBASE_INIT.messagingVapidKey);
         navigator.serviceWorker.register('/service-worker.js').then((reg) => {
+          this.checkForAppUpdate(reg, () => {});
           this.fbPush.useServiceWorker(reg);
           this.initDesktopAlerts();
           if (this.state.desktopAlerts) {
@@ -226,6 +236,19 @@ class TinodeWeb extends React.Component {
     }
   }
 
+  // Check if a newer version of TinodeWeb app is available at the server.
+  checkForAppUpdate(reg) {
+    const {formatHTMLMessage} = this.props.intl;
+    reg.onupdatefound = () => {
+      const installingWorker = reg.installing;
+      installingWorker.onstatechange = () => {
+        if (installingWorker.state == 'installed' && navigator.serviceWorker.controller) {
+          this.handleError(formatHTMLMessage(messages.update_available), 'info');
+        }
+      }
+    }
+  }
+
   // Handle for hashchange event: display appropriate panels.
   handleHashRoute() {
     var hash = HashNavigation.parseUrlHash(window.location.hash);

src/widgets/error-panel.jsx

@@ -27,13 +27,13 @@ export default class ErrorPanel extends React.PureComponent {
   }
 
   render() {
-    var icon = this.props.level == 'err' ? 'error': 'warning';
+    const icons = {err: 'error', warn: 'warning', info: 'info'}
+    const level = icons[this.props.level] || '';
+    const className = 'alert-box ' + level;
     return (
-      <div className={this.state.show ?
-        (this.props.level == 'err' ? 'alert-box error' : 'alert-box warning') :
-        "alert-box"}>
-        <div className="icon"><i className="material-icons">{icon}</i></div>
-        {this.props.text}
+      <div className={className}>
+        <div className="icon"><i className="material-icons">{level}</i></div>
+        <span dangerouslySetInnerHTML={{__html: this.props.text}} />
         <div className="cancel"><MenuCancel onCancel={this.hide} /></div>
       </div>
     );