add "update is available" check

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>
     );