push notifications seem to work in FF and Chrome

GroupManager methods fix

README.md

@@ -2,18 +2,25 @@
 
 Single-page web chat application built with [Tinode](https://github.com/tinode/chat/). The app uses
 [React](https://facebook.github.io/react/), Google's material design [fonts](https://www.google.com/fonts/)
-and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). The [Tinode javascript library](https://github.com/tinode/tinode-js/) has no external dependencies. Overall it's a lot like open source WhatsApp or Telegram web apps.
+and [icons](https://google.github.io/material-design-icons/#icon-font-for-the-web). The [Tinode javascript SDK](https://github.com/tinode/tinode-js/) has no external dependencies.
+Overall it's a lot like open source WhatsApp or Telegram web apps.
+
+The app is about 200KB minified and gzipped. That includes all dependencies (React, ReactDOM), fonts, graphics, css etc.
 
 Although the app is generally usable, keep in mind that this is work in progress. Some bugs probably exist. The app was tested in the latest Chrome & Firefox only. NPM [is available](https://www.npmjs.com/package/tinode-webapp).
 
-Try possibly newer or older version live at https://api.tinode.co/. Login as one of `alice`, `bob`, `carol`, `dave`, `frank`. Password is `<login>123`, e.g. password for `alice` is `alice123`. You can discover other users by email or phone by prefixing them with `email:` or `tel:` respectively. Emails are `<login>@example.com`, e.g. `alice@example.com`, phones are `17025550001` through `17025550009`. The demo is reset every night at 2:15am Pacific time.
+Try possibly newer or older version live at https://api.tinode.co/. For login and other instructions [see here](https://github.com/tinode/chat/#demo).
 
-License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
-
-Sample avatar photos from https://www.pexels.com/ under [CC0 license](https://www.pexels.com/photo-license/).
+Demo avatar photos are from https://www.pexels.com/ under [CC0 license](https://www.pexels.com/photo-license/).
 
 Background pattern from http://subtlepatterns.com/, commercial and non-commercial use allowed with attribution.
 
+## Getting support
+
+* Read [client-side](http://tinode.github.io/js-api/) and [server-side](https://github.com/tinode/chat/blob/master/docs/API.md) API documentation.
+* For support, general questions, discussions post to [https://groups.google.com/d/forum/tinode](https://groups.google.com/d/forum/tinode).
+* For bugs and feature requests [open an issue](https://github.com/tinode/webchat/issues/new).
+
 ## Missing functionality
 
 * Previews not generated for videos, audio, links or docs.

css/base.css

@@ -1164,15 +1164,15 @@ i.search {
   margin-right: 0.8rem;
 }
 
-.chat-box .bubble p {
+.chat-box .bubble div.message-content {
   color: #212121;
   margin: 0;
   max-width: 36rem;
   overflow-wrap: break-word;
 }
-/* The timestamp is a floating element. Need to ensure p is expanded
+/* The timestamp is a floating element. Need to ensure div.message-content is expanded
  * to accomodate it. It's usually called clearfix. */
-.chat-box .bubble p:after {
+.chat-box .bubble div.message-content:after {
   content: ".";
   display: block;
   height: 0;
@@ -1339,14 +1339,15 @@ ul.tabbar > li {
 ul.tabbar > li > a {
   position: relative;
   padding-top: 0.75rem;
-  text-decoration: none;
-  text-transform: uppercase;
+  padding-left: 1rem;
+  padding-right: 1rem;
   display: block;
-  min-width: 6rem;
   text-align: center;
   line-height: 2rem;
   font-weight: 400;
-  font-size: 1.1rem;
+  font-size: 1.3rem;
+  font-variant: small-caps;
+  text-decoration: none;
   color: rgba(33,150,243,0.6);
   overflow: hidden;
   box-shadow: inset 0 -2px 2.5px -1px rgba(0,0,0,0.25);

index-dev.html

@@ -9,8 +9,8 @@
     <title>Tinode</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="application-name" content="Tinode">
-    <meta name="description" content="Instant messenger">
+    <meta name="application-name" content="TinodeWeb">
+    <meta name="description" content="Tinode instant messenger">
     <meta name="application-url" content="https://api.tinode.co/">
     <!-- Browser styling for Chrome, FF, Opera -->
     <meta name="theme-color" content="#3949AB">
@@ -28,17 +28,31 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <!-- Styles for local elements -->
     <link rel="stylesheet" href="css/base.css" />
-
     <!-- ReactJs scripts -->
-    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-    <!-- core tinode library -->
-    <script src="tinode.js"></script>
-    <!-- the application -->
-    <script type="text/babel" src="index.js"></script>
+    <!-- Firebase push notifications. -->
+    <script crossorigin src="https://unpkg.com/firebase@5/firebase-app.js"></script>
+    <script crossorigin src="https://unpkg.com/firebase@5/firebase-messaging.js"></script>
   </head>
+
   <body>
     <div id="mountPoint"></div>
+    <script>
+    // Shim to imitate modules.
+    var module = {};
+    </script>
+    <!-- core tinode libraries -->
+    <script src="src/drafty.js"></script>
+    <script src="src/tinode.js"></script>
+    <!-- the application -->
+    <script type="text/babel" src="src/webapp.jsx"></script>
+    <script type="text/babel">
+      ReactDOM.render(
+        <TinodeWeb />,
+        document.getElementById('mountPoint')
+      );
+    </script>
   </body>
 </html>

index.html

@@ -4,8 +4,8 @@
     <title>Tinode</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="application-name" content="Tinode">
-    <meta name="description" content="Instant messaging">
+    <meta name="application-name" content="TinodeWeb">
+    <meta name="description" content="Tinode instant messaging">
     <meta name="application-url" content="https://api.tinode.co/">
     <!-- Browser styling for Chrome, FF, Opera -->
     <meta name="theme-color" content="#3949AB">
@@ -23,15 +23,9 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <!-- Styles for local elements -->
     <link rel="stylesheet" href="css/base.min.css" />
-
-    <!-- ReactJs scripts -->
-    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-    <!-- core tinode library -->
-    <script src="tinode.js"></script>
   </head>
   <body>
     <div id="mountPoint"></div>
-    <script src="index.min.js"></script>
+    <script src="umd/index.prod.js"></script>
   </body>
 </html>

manifest.json

@@ -1,6 +1,6 @@
 {
   "short_name": "Tinode chat",
-  "name": "Tinode chat",
+  "name": "Tinode Web chat",
   "icons": [
     {
       "src":"img/logo96.png",
@@ -18,8 +18,9 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": "/x/example-react-js/",
+  "start_url": "/",
   "background_color": "silver",
   "theme_color": "#3949AB",
-  "display": "standalone"
+  "display": "standalone",
+  "gcm_sender_id": "103953800507"
 }

package.json

@@ -1,26 +1,31 @@
 {
   "name": "tinode-webapp",
-  "description": "Tinode Web Client",
-  "version": "0.15.5-rc2",
+  "description": "Tinode messenger for the web",
+  "version": "0.15.6-rc4",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-minify": "^0.4.3",
     "babel-preset-env": "^1.7.0",
-    "babel-preset-minify": "^0.4.3",
     "babel-preset-react": "^6.24.1",
-    "cssnano": "^4.0.5"
+    "cssnano": "^4.0.5",
+    "uglify-es": "^3.3.9"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/tinode/example-react-js.git"
   },
   "scripts": {
-    "build": "npm run build:js && npm run build:css",
-    "build:js": "babel ./index.js --presets react,minify --out-file ./index.min.js",
+    "build": "npm run build:babel && npm run build:prod && npm run build:dev && npm run build:css",
+    "build:prod": "browserify ./src/index.js --standalone Webapp | uglifyjs --compress --mangle > ./umd/index.prod.js",
+    "build:dev": "browserify ./src/index.js --standalone Webapp > ./umd/index.dev.js",
+    "build:babel": "babel ./src/webapp.jsx --presets react --out-file ./src/webapp.js",
     "build:css": "postcss css/base.css > css/base.min.css",
-    "babel-version": "babel --version"
+    "vers": "echo \"{\\\"version\\\": \\\"`node -p -e \"require('./package.json').version\"`\\\"}\" > version.json"
   },
   "files": [
+    "src/index.js",
+    "src/webapp.jsx",
+    "umd/index.prod.js",
+    "umd/index.dev.js",
     "audio/msg.mp3",
     "css/base.css",
     "css/base.min.css",
@@ -49,11 +54,17 @@
     "react",
     "web"
   ],
-  "main": "index.js",
+  "main": "umd/index.prod.js",
   "bugs": {
     "url": "https://github.com/tinode/example-react-js/issues"
   },
   "homepage": "https://github.com/tinode/chat",
-  "email": "gene@tinode.co",
-  "license": "Apache-2.0"
+  "email": "info@tinode.co",
+  "author": "Tinode Authors <info@tinode.co>",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "react": "^16.5.1",
+    "react-dom": "^16.4.2",
+    "tinode-sdk": "^0.15.6-rc3"
+  }
 }

service-worker.js

@@ -0,0 +1,23 @@
+// Must be located at the root.
+'use strict';
+
+importScripts("https://unpkg.com/firebase@5.5.0/firebase-app.js");
+importScripts("https://unpkg.com/firebase@5.5.0/firebase-messaging.js");
+
+const FIREBASE_PUBLIC_API_KEY = "AIzaSyD6X4ULR-RUsobvs1zZ2bHdJuPz39q2tbQ";
+const FIREBASE_SENDER_ID = "114126160546";
+
+firebase.initializeApp({
+  apiKey: FIREBASE_PUBLIC_API_KEY,
+  messagingSenderId: FIREBASE_SENDER_ID
+});
+
+firebase.messaging().setBackgroundMessageHandler(function(payload) {
+  let title = payload.notification.title || "New message";
+  let options = {
+    body: payload.notification.body || "",
+    icon: '/img/logo96.png'
+  };
+
+  return self.registration.showNotification(title, options);
+});

src/index.js

@@ -0,0 +1,11 @@
+// Put all packages together.
+// Used to generate umd/index.prod.js
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var TinodeWeb = require('./webapp.js');
+
+ReactDOM.render(
+  React.createElement(TinodeWeb, null),
+  document.getElementById('mountPoint')
+);