upgrade, bump version, and rebuild

.well-known/assetlinks.json

@@ -0,0 +1,25 @@
+[{
+  "relation": ["delegate_permission/common.handle_all_urls"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroid",
+    "sha256_cert_fingerprints":
+    ["AA:0A:FF:C4:F3:1F:58:83:F3:8E:69:03:2E:B9:AA:1A:C4:62:65:F1:1E:50:F9:7E:AD:35:56:55:32:B7:1A:C6"]
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "web",
+    "site": "https://api.tinode.co"
+  }
+},
+{
+  "relation": ["delegate_permission/common.get_login_creds"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "co.tinode.tindroid",
+    "sha256_cert_fingerprints":
+    ["AA:0A:FF:C4:F3:1F:58:83:F3:8E:69:03:2E:B9:AA:1A:C4:62:65:F1:1E:50:F9:7E:AD:35:56:55:32:B7:1A:C6"]
+  }
+}]

README.md

@@ -7,7 +7,7 @@ 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).
+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 package is available at https://www.npmjs.com/package/tinode-webapp.
 
 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).
 
@@ -24,7 +24,6 @@ Background pattern from http://subtlepatterns.com/, commercial and non-commercia
 ## Missing functionality
 
 * Previews not generated for videos, audio, links or docs.
-* Browser push notifications are not implemented.
 * No end-to-end encryption.
 * Editing chat permissions is incomplete.
 * Emoji support is weak.

css/base.css

@@ -31,11 +31,6 @@ a:focus {
   color: #0a6ebd;
   text-decoration: underline;
 }
-a:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
 
 a.red:hover,
 a.red:focus {
@@ -180,17 +175,26 @@ textarea {
 input[type="text"],
 input[type="email"],
 input[type="password"],
+input[type="search"],
 textarea {
   height: 2.5rem;
   border-bottom: 1px solid #ccc;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   transition: all 0.1s ease-in-out;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
   width: 100%;
 }
+
 textarea:focus,
 input[type="text"]:focus,
 input[type="email"]:focus,
-input[type="password"]:focus {
+input[type="password"]:focus,
+input[type="search"]:focus {
   border-bottom: 1px solid #2196f3;
   box-shadow: 0 1px 0 rgba(33, 150, 243, 0.25);
 }
@@ -198,10 +202,17 @@ input[type="password"]:focus {
 input[type="text"]::placeholder,
 input[type="email"]::placeholder,
 input[type="password"]::placeholder,
+input[type="search"]::placeholder,
 textarea::placeholder {
   color: #bbb;
 }
 
+input[type="text"].with-visibility,
+input[type="password"].with-visibility {
+  margin-right:-2rem;
+  padding-right:2rem;
+}
+
 /* Scrollbar styling for Chrome. Firefox does not support scrollbar styling.  */
 ::-webkit-scrollbar {
 	width: 0.6rem;
@@ -295,6 +306,10 @@ li.right:hover .menuTrigger {
   color: #757575;
 }
 
+.light-gray {
+  color: #bbb;
+}
+
 .small {
   font-size: 90%;
 }
@@ -309,6 +324,11 @@ li.right:hover .menuTrigger {
     inset 0 -0.25rem 0.25rem -0.25rem rgba(0,0,0,0.15);
 }
 
+/* Element which can take focus but shows no outline */
+.group-focus {
+  outline: none;
+}
+
 /* END generic text colors */
 
 /* END of basic elements */
@@ -401,7 +421,7 @@ li.right:hover .menuTrigger {
 
 /* Quoted div */
 .quoted {
-  padding-left: 1.5rem;
+  margin-left: 1.5rem;
 }
 
 /* BEGIN InPlaceEdit styles */
@@ -410,7 +430,7 @@ li.right:hover .menuTrigger {
   font-family: inherit;
   font-size: 1.1rem;
   height: 2.5rem;
-  line-height: 1.5;
+  line-height: 2.25;
   margin: 0.25rem 0.125rem;
   width: 100%;
   vertical-align: baseline;
@@ -1078,13 +1098,6 @@ i.search {
   text-align: left;
 
   border-radius: 0.5rem;
-	-webkit-border-radius: 0.5rem;
-	-moz-border-radius: 0.5rem;
-
-  /* tested in chrome 47 on mac - performance sucks
-  -webkit-filter: drop-shadow(0px 1px 1px -1px rgba(0,0,0,0.3));
-  -filter: drop-shadow(0px 1px 1px -1px rgba(0,0,0,0.3));
-  */
 }
 
 .chat-box li.single {

firebase-init.js

@@ -0,0 +1,9 @@
+// Get these values for your project from the https://console.firebase.google.com/
+const FIREBASE_INIT = {
+  // Project Settings -> Cloud Messaging, "Sender ID".
+  messagingSenderId: "114126160546",
+  // Project Settings -> Cloud Messaging -> Web configuration -> Web Push certificates.
+  // This value IS NOT included in the generated js config you can download from
+  // the firebase console. It needs to be added separately.
+  messagingVapidKey: "BOgQVPOMzIMXUpsYGpbVkZoEBc0ifKY_f2kSU5DNDGYI6i6CoKqqxDd7w7PJ3FaGRBgVGJffldETumOx831jl58"
+};

index-dev.html

@@ -33,8 +33,8 @@
     <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>
     <!-- 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>
+    <script crossorigin src="https://unpkg.com/firebase@5.5.2/firebase-app.js"></script>
+    <script crossorigin src="https://unpkg.com/firebase@5.5.2/firebase-messaging.js"></script>
   </head>
 
   <body>
@@ -47,6 +47,7 @@
     <script src="src/drafty.js"></script>
     <script src="src/tinode.js"></script>
     <!-- the application -->
+    <script src="/firebase-init.js"></script>
     <script type="text/babel" src="src/webapp.jsx"></script>
     <script type="text/babel">
       ReactDOM.render(

index.html

@@ -26,6 +26,7 @@
   </head>
   <body>
     <div id="mountPoint"></div>
+    <script src="/firebase-init.js"></script>
     <script src="umd/index.prod.js"></script>
   </body>
 </html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tinode-webapp",
   "description": "Tinode messenger for the web",
-  "version": "0.15.6-rc4",
+  "version": "0.15.7",
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.7.0",
@@ -14,10 +14,10 @@
     "url": "https://github.com/tinode/example-react-js.git"
   },
   "scripts": {
-    "build": "npm run build:babel && npm run build:prod && npm run build:dev && npm run build:css",
+    "build": "npm run vers && 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:babel": "babel ./src/webapp.jsx --presets react,env --out-file ./src/webapp.es5.js",
     "build:css": "postcss css/base.css > css/base.min.css",
     "vers": "echo \"{\\\"version\\\": \\\"`node -p -e \"require('./package.json').version\"`\\\"}\" > version.json"
   },
@@ -35,11 +35,14 @@
     "img/logo32x32a.png",
     "img/logo96.png",
     "img/logo192.png",
+    "img/badge96.png",
     "index-dev.html",
     "index.html",
     "index.js",
     "index.min.js",
     "manifest.json",
+    "service-worker.js",
+    "firebase-init.js",
     "web-desktop-2.png",
     "web-mob-chat-1.png",
     "web-mob-contacts-1.png",
@@ -63,8 +66,9 @@
   "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"
+    "firebase": "^5.5.4",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "tinode-sdk": "^0.15.7"
   }
 }

service-worker.js

@@ -1,23 +1,69 @@
 // Must be located at the root.
-'use strict';
+importScripts("https://unpkg.com/firebase@5.5.4/firebase-app.js");
+importScripts("https://unpkg.com/firebase@5.5.4/firebase-messaging.js");
+importScripts("/firebase-init.js")
 
-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.initializeApp(FIREBASE_INIT);
 
+// This method shows the notifications.
 firebase.messaging().setBackgroundMessageHandler(function(payload) {
-  let title = payload.notification.title || "New message";
+  let title = payload.data.title || "New message";
   let options = {
-    body: payload.notification.body || "",
-    icon: '/img/logo96.png'
+    body: payload.data.content || "",
+    icon: '/img/logo96.png',
+    badge: '/img/badge96.png',
+    tag: payload.data.topic || undefined,
+    data: {
+      topic: payload.data.topic
+    }
   };
-
   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) {
+  const notification = event.notification;
+  notification.close();
+
+  const urlHash = '#/' + notification.data.topic;
+
+  const promises = self.clients.matchAll({
+    type: 'window',
+    includeUncontrolled: true
+  }).then((windowClients) => {
+    let matchingClient = null;
+    let anyClient = null;
+    for (let i = 0; i < windowClients.length; i++) {
+      const url = new URL(windowClients[i].url);
+      if (url.hash.includes(notification.data.topic)) {
+        matchingClient = windowClients[i];
+        break;
+      } else {
+        anyClient = windowClients[i];
+      }
+    }
+
+    // Found browser tab with the topic already open.
+    if (matchingClient) {
+      return matchingClient.focus();
+    }
+
+    // Found browser tab with Tinode on a different topic,
+    // navigate to the right topic.
+    if (anyClient) {
+      const url = new URL(anyClient.url);
+      url.hash = '#/' + notification.data.topic;
+      return anyClient.navigate(url).then(() => { return anyClient.focus(); });
+    }
+
+    // Did not find a Tinode browser tab. Open one.
+    const url = new URL(self.location.origin);
+    url.hash = '#/' + notification.data.topic;
+    return clients.openWindow(url);
+
+  });
+
+  event.waitUntil(promises);
+});

src/index.js

@@ -3,7 +3,7 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var TinodeWeb = require('./webapp.js');
+var TinodeWeb = require('./webapp.es5.js');
 
 ReactDOM.render(
   React.createElement(TinodeWeb, null),