README.md

@@ -32,7 +32,7 @@ This is a list of files which "Normalization" should be disabled in them if poss
 ## Thanks to
  - God for giving me the ability to code and do programming
  - Ivan Pasev and Xean for helping me test the app
- - [Ahmad Malik](https://github.com/arma7x) for providing a good example of how Push API is used
+ - [Ahmad Malik](https://github.com/arma7x) for providing a good example of how Push API is used, how to use Notification API inside SW and for good hints
  - [BananaHackers](http://bananahackers.net) community
  - [#! aka hashbang](https://hashbang.sh) admins and sponsors for providing a good web app hosting
  - [thunix](https://thunix.net) for providing a good server which I develop this app on it

src/Login.js

@@ -1,6 +1,6 @@
 import { Component, createRef } from "inferno";
 import * as matrixcs from "matrix-js-sdk";
-import * as localforage from "localforage";
+import { setItem } from "localforage";
 import Header from "./ui/Header";
 import TextInput from "./ui/TextInput";
 import SoftKey from "./ui/SoftKey";
@@ -93,7 +93,7 @@ class Login extends Component {
             this.state.loginData
           )
           .then((result) => {
-            localforage.setItem("login", result).then(() => {
+            setItem("login", result).then(() => {
               alert(`Logged in as ${this.state.username}`);
               window.location = window.location; // eslint-disable-line no-self-assign
             });

src/Matrix.js

@@ -11,7 +11,7 @@ import requestFunc from "./requestFunc";
 import CallScreen from "./CallScreen";
 import personIcon from "./person_icon.png";
 import { setPushGateway } from "./utils.js";
-import * as localforage from "localforage";
+import { getItem, setItem, removeItem } from "localforage";
 import * as matrixcs from "matrix-js-sdk";
 
 function makeCallScreen(call, softKeyRef, callEndCb, incoming) {
@@ -117,7 +117,7 @@ class Matrix extends Component {
       />
     );
     this.callScreen = null;
-    localforage.getItem("pushregistered").then((value) => {
+    getItem("pushregistered").then((value) => {
       if (navigator.serviceWorker && window.PushManager && !value) {
         navigator.serviceWorker
           .register("/service-worker.js")
@@ -141,7 +141,7 @@ class Matrix extends Component {
                     data: { url: window.pushGateway, format: "event_id_only" },
                   })
                   .then(() => {
-                    localforage.setItem("pushregistered", true).then(() => {
+                    setItem("pushregistered", true).then(() => {
                       console.log("Finally did the push notification job!");
                     });
                   })
@@ -196,7 +196,7 @@ class Matrix extends Component {
     });
     client.on("Session.logged_out", () => {
       console.log("Logging out"); // FIXME
-      localforage.removeItem("login").then(() => {
+      removeItem("login").then(() => {
         window.location = window.location; // eslint-disable-line no-self-assign
       });
     });

src/index.js

@@ -1,7 +1,7 @@
 import { render, Component } from "inferno";
 import Login from "./Login";
 import Matrix from "./Matrix";
-import * as localforage from "localforage";
+import { getItem } from "localforage";
 import "./index.css";
 
 class App extends Component {
@@ -10,7 +10,7 @@ class App extends Component {
     this.state = {
       login: null,
     };
-    localforage.getItem("login").then((login) => {
+    getItem("login").then((login) => {
       this.setState({ login: login });
     });
   }

src/serviceWorker.js

@@ -12,11 +12,21 @@ self.onpush = event => {
     } else {
       title = "Call";
     }
+    // We don't check for permission since we have `desktop-notification` in manifest.webapp
+    let timeoutID = self.setTimeout(() => {
+      self.registration.getNotifications({ tag: timeoutID.toString() }).then(notifList => {
+        for (let notif of notifList) {
+          if (notif.tag === timeoutID.toString())
+            notif.close();
+        }
+      });
+    }, data.content.lifetime || 60000);
     self.registration.showNotification(title, {
       body: "You have a voice call" + sender? ` from ${sender}`:"",
       dir: "auto",
       vibrate: [200, 100, 200, 100],
       data: data,
+      tag: timeoutID.toString(),
       actions: [{
         action: "accept",
         title: "Accept"
@@ -32,6 +42,7 @@ self.onpush = event => {
 
 self.onnotificationclick = event => {
   event.notification.close();
+  self.clearTimeout(parseInt(event.notification.tag));
   if (event.action === "accept") {
     event.waitUntil(clients.matchAll({
       type: "window"
@@ -44,6 +55,10 @@ self.onnotificationclick = event => {
       if (clients.openWindow) {
         return clients.openWindow("/#call");
       }
+
+      if (clients.openApp) {
+        return clients.openApp();
+      }
     });
   }
 }