@chat21/chat21-ionic 3.0.52-beta → 3.0.55-RC6

package/src/chat21-core/providers/firebase/firebase-auth-service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
-
+import { ConnectionService } from 'ng-connection-service';
 // firebase
 // import * as firebase from 'firebase/app';
 import firebase from "firebase/app";
@@ -30,6 +30,9 @@ import { LoggerInstance } from '../logger/loggerInstance';
 import { LoggerService } from '../abstract/logger.service';
 
 
+import { Observable, Observer, fromEvent, merge } from 'rxjs';
+import { map } from 'rxjs/operators'
+import { Network } from '@ionic-native/network/ngx';
 // @Injectable({ providedIn: 'root' })
 @Injectable()
 export class FirebaseAuthService extends MessagingAuthService {
@@ -53,9 +56,15 @@ export class FirebaseAuthService extends MessagingAuthService {
   // private imageRepo: ImageRepoService = new FirebaseImageRepoService();
 
   private firebaseToken: string;
-  private logger:LoggerService = LoggerInstance.getInstance()
+  private logger: LoggerService = LoggerInstance.getInstance()
+
+  status = 'ONLINE';
+  isConnected = true;
+
   constructor(
-    public http: HttpClient
+    public http: HttpClient,
+    private network: Network,
+    private connectionService: ConnectionService
   ) {
     super();
   }
@@ -64,7 +73,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    *
    */
   initialize() {
-   
+
     this.SERVER_BASE_URL = this.getBaseUrl();
     this.URL_TILEDESK_CREATE_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'chat21/firebase/auth/createCustomToken';
     this.logger.info('[FIREBASEAuthSERVICE] - initialize URL_TILEDESK_CREATE_CUSTOM_TOKEN ', this.URL_TILEDESK_CREATE_CUSTOM_TOKEN)
@@ -72,9 +81,66 @@ export class FirebaseAuthService extends MessagingAuthService {
     // this.URL_TILEDESK_SIGNIN_ANONYMOUSLY = this.SERVER_BASE_URL + 'auth/signinAnonymously'
     // this.URL_TILEDESK_SIGNIN_WITH_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'auth/signinWithCustomToken';
     // this.checkIsAuth();
+
+    // this.createOnline$().subscribe((isOnline) =>{
+    //   console.log('FIREBASEAuthSERVICE] isOnline ', isOnline);
+    //   if (isOnline === true ) {
+    //     this.onAuthStateChanged();
+    //   }
+    // }) 
+    this.checkInternetConnection()
+
     this.onAuthStateChanged();
   }
 
+  checkInternetConnection () {
+    this.logger.log('[FIREBASEAuthSERVICE] - checkInternetConnection');
+    // let connectSubscription = this.network.onConnect().subscribe(() => {
+    //   this.logger.log('[FIREBASEAuthSERVICE] - network connected!');
+    //   // We just got a connection but we need to wait briefly
+    //    // before we determine the connection type. Might need to wait.
+    //   // prior to doing any api requests as well.
+    //   setTimeout(() => {
+    //     if (this.network.type === 'wifi') {
+    //       this.logger.log('[FIREBASEAuthSERVICE] - we got a wifi connection, woohoo!');
+    //     }
+    //   }, 3000);
+    // });
+
+   
+      this.connectionService.monitor().subscribe(isConnected => {
+        this.isConnected = isConnected;
+        this.logger.log('[FIREBASEAuthSERVICE] - checkInternetConnection isConnected', isConnected);
+        if (this.isConnected) {
+          this.status = "ONLINE";
+
+          // this.onAuthStateChanged();
+          firebase.auth().onAuthStateChanged(user => {
+            this.logger.log('[FIREBASEAuthSERVICE] checkInternetConnection onAuthStateChanged', user)
+          })
+        }
+        else {
+          this.status = "OFFLINE";
+          // this.onAuthStateChanged();
+          firebase.auth().onAuthStateChanged(user => {
+            this.logger.log('[FIREBASEAuthSERVICE] checkInternetConnection onAuthStateChanged', user)
+          })
+        }
+      })
+    
+  
+  }
+
+  // createOnline$() {
+  //   return merge<boolean>(
+  //     fromEvent(window, 'offline').pipe(map(() => false)),
+  //     fromEvent(window, 'online').pipe(map(() => true)),
+  //     new Observable((sub: Observer<boolean>) => {
+  //       sub.next(navigator.onLine);
+  //       sub.complete();
+  //     }));
+  // }
+
   /**
    * checkIsAuth
    */
@@ -113,12 +179,12 @@ export class FirebaseAuthService extends MessagingAuthService {
   onAuthStateChanged() {
     const that = this;
     firebase.auth().onAuthStateChanged(user => {
-      this.logger.debug('[FIREBASEAuthSERVICE] onAuthStateChanged', user)
+      this.logger.log('[FIREBASEAuthSERVICE] onAuthStateChanged', user)
       if (!user) {
-        this.logger.debug('[FIREBASEAuthSERVICE] 1 - PASSO OFFLINE AL CHAT MANAGER')
+        this.logger.log('[FIREBASEAuthSERVICE] 1 - PASSO OFFLINE AL CHAT MANAGER')
         that.BSAuthStateChanged.next('offline');
       } else {
-        this.logger.debug('[FIREBASEAuthSERVICE] 2 - PASSO ONLINE AL CHAT MANAGER')
+        this.logger.log('[FIREBASEAuthSERVICE] 2 - PASSO ONLINE AL CHAT MANAGER')
         that.BSAuthStateChanged.next('online');
       }
     });
@@ -131,6 +197,7 @@ export class FirebaseAuthService extends MessagingAuthService {
   signInFirebaseWithCustomToken(token: string): Promise<any> {
     const that = this;
     let firebasePersistence;
+    console.log('FB-AUTH firebasePersistence', this.getPersistence()) 
     switch (this.getPersistence()) {
       case 'SESSION': {
         firebasePersistence = firebase.auth.Auth.Persistence.SESSION;
@@ -149,13 +216,13 @@ export class FirebaseAuthService extends MessagingAuthService {
         break;
       }
     }
-    return firebase.auth().setPersistence(firebasePersistence).then( async () => {
-      return firebase.auth().signInWithCustomToken(token).then( async () => {
-                // that.firebaseSignInWithCustomToken.next(response);
-              }).catch((error) => {
-                that.logger.error('[FIREBASEAuthSERVICE] signInFirebaseWithCustomToken Error: ', error);
-                  // that.firebaseSignInWithCustomToken.next(null);
-              });
+    return firebase.auth().setPersistence(firebasePersistence).then(async () => {
+      return firebase.auth().signInWithCustomToken(token).then(async () => {
+        // that.firebaseSignInWithCustomToken.next(response);
+      }).catch((error) => {
+        that.logger.error('[FIREBASEAuthSERVICE] signInFirebaseWithCustomToken Error: ', error);
+        // that.firebaseSignInWithCustomToken.next(null);
+      });
     }).catch((error) => {
       that.logger.error('[FIREBASEAuthSERVICE] signInFirebaseWithCustomToken Error: ', error);
     });
@@ -200,7 +267,7 @@ export class FirebaseAuthService extends MessagingAuthService {
   private signOut() {
     const that = this;
     firebase.auth().signOut().then(() => {
-      that.logger.debug('[FIREBASEAuthSERVICE] firebase-sign-out');
+      that.logger.log('[FIREBASEAuthSERVICE] signOut firebase-sign-out');
       // cancello token
       // this.appStorage.removeItem('tiledeskToken');
       //localStorage.removeItem('firebaseToken');
@@ -244,12 +311,12 @@ export class FirebaseAuthService extends MessagingAuthService {
       //localStorage.setItem('firebaseToken', that.firebaseToken);
       that.signInFirebaseWithCustomToken(data)
     }, error => {
-      that.logger.error('[FIREBASEAuthSERVICE] createFirebaseCustomToken ERR ', error) 
+      that.logger.error('[FIREBASEAuthSERVICE] createFirebaseCustomToken ERR ', error)
     });
   }
 
   logout() {
-    this.logger.debug('[FIREBASEAuthSERVICE] logout');
+    this.logger.log('[FIREBASEAuthSERVICE] logout');
     // cancello token firebase dal local storage e da firebase
     // dovrebbe scattare l'evento authchangeStat
     this.signOut();

package/src/chat21-core/providers/firebase/firebase-conversations-handler.ts

@@ -47,7 +47,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
     private loggedUserId: string;
     private translationMap: Map<string, string>;
     private isConversationClosingMap: Map<string, boolean>;
-    private logger:LoggerService = LoggerInstance.getInstance()
+    private logger: LoggerService = LoggerInstance.getInstance()
     private ref: firebase.database.Query;
     private BASE_URL: string;
     // private audio: any;
@@ -127,7 +127,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
         this.ref.on('child_added', (childSnapshot) => {
             that.added(childSnapshot);
         });
-        
+
         setTimeout(() => {
             callback()
         }, 2000);
@@ -263,22 +263,27 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
 
     public getConversationDetail(conversationId: string, callback: (conv: ConversationModel) => void): void {
         // fare promise o callback ??
+        this.logger.log('[FIREBASEConversationsHandlerSERVICE]  getConversationDetail *****: ', conversationId)
         const conversation = this.conversations.find(item => item.uid === conversationId);
-        this.logger.debug('[FIREBASEConversationsHandlerSERVICE]  conversations *****: ', this.conversations)
-        this.logger.debug('[FIREBASEConversationsHandlerSERVICE]  getConversationDetail *****: ', conversation)
+        this.logger.log('[FIREBASEConversationsHandlerSERVICE]  conversations *****: ', this.conversations)
+        this.logger.log('[FIREBASEConversationsHandlerSERVICE]  getConversationDetail *****: ', conversation)
         if (conversation) {
             callback(conversation)
             // return conversationSelected
             // this.BSConversationDetail.next(conversationSelected);
         } else {
+            this.logger.log('[FIREBASEConversationsHandlerSERVICE]  getConversationDetail ***** ELSE')
             // const urlNodeFirebase = '/apps/' + this.tenant + '/users/' + this.loggedUserId + '/conversations/' + conversationId;
             const urlNodeFirebase = conversationsPathForUserId(this.tenant, this.loggedUserId) + '/' + conversationId;
-            this.logger.debug('[FIREBASEConversationsHandlerSERVICE] conversationDetail urlNodeFirebase *****', urlNodeFirebase)
+            this.logger.log('[FIREBASEConversationsHandlerSERVICE] conversationDetail urlNodeFirebase *****', urlNodeFirebase)
             const firebaseMessages = firebase.database().ref(urlNodeFirebase);
             firebaseMessages.on('value', (childSnapshot) => {
                 const childData: ConversationModel = childSnapshot.val();
-                this.logger.debug('[FIREBASEConversationsHandlerSERVICE] conversationDetail childSnapshot *****', childSnapshot.val())
-                if (childSnapshot && childSnapshot.key && childData.uid) {
+                this.logger.log('[FIREBASEConversationsHandlerSERVICE] conversationDetail childSnapshot.val() *****', childSnapshot.val());
+                this.logger.log('[FIREBASEConversationsHandlerSERVICE] conversationDetail childSnapshot *****', childSnapshot)
+                // && childData.uid
+                if (childSnapshot && childSnapshot.key) {
+                // if (childData) {
                     childData.uid = childSnapshot.key;
                     const conversation = this.completeConversation(childData);
                     if (conversation) {
@@ -472,7 +477,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
             conversation_with_fullname = conv.recipient_fullname;
             conv.sender_fullname = this.translationMap.get('YOU')
             // conv.last_message_text = YOU + conv.last_message_text;
-        // } else if (conv.channel_type === TYPE_GROUP) {
+            // } else if (conv.channel_type === TYPE_GROUP) {
         } else if (isGroup(conv)) {
             // conversation_with_fullname = conv.sender_fullname;
             // conv.last_message_text = conv.last_message_text;
@@ -482,7 +487,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
         conv.conversation_with = conversation_with;
         conv.conversation_with_fullname = conversation_with_fullname;
         conv.status = this.setStatusConversation(conv.sender, conv.uid);
-        conv.time_last_message = this.getTimeLastMessage(conv.timestamp);
+        // conv.time_last_message = this.getTimeLastMessage(conv.timestamp); // evaluate if is used
         conv.avatar = avatarPlaceholder(conversation_with_fullname);
         conv.color = getColorBck(conversation_with_fullname);
         //conv.image = this.imageRepo.getImagePhotoUrl(conversation_with);
@@ -490,7 +495,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
         return conv;
     }
 
- 
+
 
     /** */
     private setStatusConversation(sender: string, uid: string): string {

package/src/chat21-core/providers/firebase/firebase-notifications.ts

@@ -12,47 +12,148 @@ import 'firebase/auth';
 @Injectable({ providedIn: 'root' })
 
 export class FirebaseNotifications extends NotificationsService {
-    
-    public BUILD_VERSION: string;
+
+    // public BUILD_VERSION: string;
     private FCMcurrentToken: string;
     private userId: string;
     private tenant: string;
+    private vapidkey: string;
     private logger: LoggerService = LoggerInstance.getInstance();
     constructor() {
         super();
     }
 
-    initialize(tenant: string): void{
+    initialize(tenant: string, vapId: string): void {
         this.tenant = tenant
+        this.vapidkey = vapId
         this.logger.info('[FIREBASE-NOTIFICATIONS] initialize - tenant ', this.tenant)
-        
+
+
+        if (!('serviceWorker' in navigator)) {
+            // , disable or hide UI.
+            this.logger.error("[FIREBASE-NOTIFICATIONS] initialize - Service Worker isn't supported on this browser", navigator)
+            return;
+        }
+        if (('serviceWorker' in navigator)) {
+            // this.logger.log("[FIREBASE-NOTIFICATIONS] initialize - Service Worker is supported on this browser ", navigator)
+            navigator.serviceWorker.getRegistrations().then((serviceWorkerRegistrations) => {
+                this.logger.log("[FIREBASE-NOTIFICATIONS] initialize - Service Worker is supported on this browser serviceWorkerRegistrations", serviceWorkerRegistrations)
+                if (serviceWorkerRegistrations.length > 0) {
+                    serviceWorkerRegistrations.forEach(registrations => {
+
+                        this.logger.log("[FIREBASE-NOTIFICATIONS] initialize - Service Worker is supported on this browser registrations scriptURL", registrations.active.scriptURL)
+                        this.logger.log("[FIREBASE-NOTIFICATIONS] initialize - Service Worker is supported on this browser registrations state", registrations.active.state)
+
+                    });
+                } else {
+                    this.logger.log("[FIREBASE-NOTIFICATIONS] initialize - Service Worker is supported on this browser - !not registered",)
+                    // navigator.serviceWorker.register('http://localhost:8101/firebase-messaging-sw.js')
+                    //     .then(function (registration) {
+                    //         console.log('Service worker successfully registered.');
+                    //         return registration;
+                    //     }).catch(function (err) {
+                    //         console.error('Unable to register service worker.', err);
+                    //     });
+                }
+            });
+        }
     }
 
+
+
     getNotificationPermissionAndSaveToken(currentUserUid) {
         // this.tenant = this.getTenant();
         this.logger.log('[FIREBASE-NOTIFICATIONS] calling requestPermission - tenant ', this.tenant)
         this.logger.log('[FIREBASE-NOTIFICATIONS] calling requestPermission - currentUserUid ', currentUserUid)
         this.userId = currentUserUid;
+        // Service Worker explicit registration to explicitly define sw location at a path
+        // const swRegistration = async () => {
+        //     try {
+        //         await navigator.serviceWorker.register('http://localhost:8101/firebase-messaging-sw.js');
+        //     } catch (error) {
+        //         console.error(error);
+        //     }
+        // }
+
+
         const messaging = firebase.messaging();
         if (firebase.messaging.isSupported()) {
             // messaging.requestPermission()
-            Notification.requestPermission()
-                .then(() => {
+            Notification.requestPermission().then((permission) => {
+                if (permission === 'granted') {
                     this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> requestPermission Notification permission granted.');
-                    return messaging.getToken()
-                })
-                .then(FCMtoken => {
-                    this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> requestPermission FCMtoken', FCMtoken)
-                    // Save FCM Token in Firebase
-                    this.FCMcurrentToken = FCMtoken;
-                    this.updateToken(FCMtoken, currentUserUid)
-                })
-                .catch((err) => {
-                    this.logger.error('[FIREBASE-NOTIFICATIONS] >>>> requestPermission ERR: Unable to get permission to notify.', err);
-                });
+
+                    return messaging.getToken({ vapidKey: this.vapidkey })
+                }
+            }).then(FCMtoken => {
+                this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> requestPermission FCMtoken', FCMtoken)
+                // Save FCM Token in Firebase
+                this.FCMcurrentToken = FCMtoken;
+                this.updateToken(FCMtoken, currentUserUid)
+            }).catch((err) => {
+                this.logger.error('[FIREBASE-NOTIFICATIONS] >>>> requestPermission ERR: Unable to get permission to notify.', err);
+            });
+        } else {
+            this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> FIREBASE MESSAGING IS NOT SUPPORTED')
         }
     }
 
+
+    // getNotificationPermissionAndSaveToken(currentUserUid) {
+    //     // this.tenant = this.getTenant();
+    //     this.logger.log('[FIREBASE-NOTIFICATIONS] calling requestPermission - tenant ', this.tenant)
+    //     this.logger.log('[FIREBASE-NOTIFICATIONS] calling requestPermission - currentUserUid ', currentUserUid)
+    //     this.userId = currentUserUid;
+    //     const messaging = firebase.messaging();
+    //     if (firebase.messaging.isSupported()) {
+    //         // messaging.requestPermission()
+    //         Notification.requestPermission().then((permission) => {
+    //             if (permission === 'granted') {
+    //                 this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> requestPermission Notification permission granted.');
+    //                 messaging.getToken({ vapidKey: 'BOsgS2ADwspKdWAmiFDZXEYqY1HSYADVfJT3j67wsySh3NxaViJqoabPJH8WM02wb5r8cQIm5TgM0UK047Z1D1c'}).then((currentToken) => {
+    //                     if (currentToken) {
+    //                         this.sendTokenToServer(currentToken);
+    //     // updateUIForPushEnabled(currentToken);
+
+    //                     } else {
+    //                       // Show permission request UI
+    //                       console.log('No registration token available. Request permission to generate one.');
+    //                       // ...
+    //                     }
+    //                   }).catch((err) => {
+    //                     console.log('An error occurred while retrieving token. ', err);
+    //                     // ...
+    //                   });
+
+    //                 resetUI()
+
+    //             } else {
+    //                 this.logger.error('Unable to get permission to notify.');
+    //             }
+    //         })
+
+    //     }
+    // }
+
+    //  sendTokenToServer(currentToken) {
+    //     if (!this.isTokenSentToServer()) {
+    //       console.log('Sending token to server...');
+    //       // TODO(developer): Send the current token to your server.
+    //       this.setTokenSentToServer(true);
+    //     } else {
+    //       console.log('Token already sent to server so won\'t send it again ' +
+    //           'unless it changes');
+    //     }
+    //   }
+
+    //   isTokenSentToServer() {
+    //     return window.localStorage.getItem('sentToServer') === '1';
+    //   }
+
+    //   setTokenSentToServer(sent) {
+    //     window.localStorage.setItem('sentToServer', sent ? '1' : '0');
+    //   }
+
     removeNotificationsInstance(callback: (string) => void) {
         var self = this;
         firebase.auth().onAuthStateChanged(function (user) {
@@ -72,7 +173,7 @@ export class FirebaseNotifications extends NotificationsService {
         this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> connectionsRefinstancesId ', connectionsRefinstancesId);
         let connectionsRefURL = '';
         if (connectionsRefinstancesId) {
-            connectionsRefURL = connectionsRefinstancesId  + this.FCMcurrentToken;
+            connectionsRefURL = connectionsRefinstancesId + this.FCMcurrentToken;
             const connectionsRef = firebase.database().ref().child(connectionsRefURL);
             this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> connectionsRef ', connectionsRef);
             this.logger.log('[FIREBASE-NOTIFICATIONS] >>>> connectionsRef url ', connectionsRefURL);

package/src/chat21-core/providers/localSessionStorage.ts

@@ -17,6 +17,7 @@ export class LocalSessionStorage extends AppStorageService{
       this.storagePrefix = storagePrefix;
       this.projectID = projectID;
       this.persistence = persistence;
+      // this.persistence = 'LOCAL';
       this.logger.info('[LocalSessionStorage] - initialize ', this.storagePrefix, this.persistence, this.projectID)
   }
 
@@ -30,7 +31,7 @@ export class LocalSessionStorage extends AppStorageService{
           // prefix = prefix + sv;
           prefix = this.storagePrefix + '_';
       } catch (e) {
-          this.logger.error('[LocalSessionStorage] getItem >Error :' + e);
+          this.logger.error('[LocalSessionStorage] getItem - Error :' + e);
       }
       const newKey = prefix + this.projectID + '_' + key;
       return this.getValueForKey(newKey);

package/src/chat21-core/utils/utils-user.ts

@@ -3,7 +3,8 @@
  * @param str
  */
 export function getColorBck(str: string): string {
-    const arrayBckColor = ['#fba76f', '#80d066', '#73cdd0', '#ecd074', '#6fb1e4', '#f98bae'];
+    // const arrayBckColor = ['#fba76f', '#80d066', '#73cdd0', '#ecd074', '#6fb1e4', '#f98bae'];
+    const arrayBckColor = ['#E17076', '#7BC862', '#65aadd', '#a695e7', '#ee7aae', '#6ec9cb', '#faa774'];
     let num = 0;
     if (str) {
         const code = str.charCodeAt((str.length - 1));

package/src/index.html

@@ -5,25 +5,105 @@
   <meta charset="utf-8" />
   <title>Tiledesk - Open Source Live Chat</title>
 
-  <base href="./"/>
+  <base href="./" />
   <!-- <base href="/"/>  -->
   <!-- <base href="./"/>  quando rilascio in prod sostituisco questo base con quello sopra -->
 
   <!-- <meta name="color-scheme" content="light dark" /> disable dark mode: Note in theme/variable.scss is also commented all the code that referts to dark-mode -->
   <meta name="color-scheme" content="light" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.ico" />
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
-  
+
   <link rel="manifest" href="./manifest.json">
   <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
-  
+
   <!-- <script src="./assets/js/chat21client.js"></script> -->
   <!-- <script src="https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js"></script> -->
 
+  <script>
+    console.log('index.html  script version 0.1');
+    // window.onload = (event) => {
+    //   console.log('index.html  page is fully loaded');
+    // };
+
+    // window.addEventListener('online', (event) => {
+    //   console.log("index.html You are now connected to the network.");
+    // });
+
+    // // ononline version
+    window.ononline = (event) => {
+      console.log("index.html You are now connected to the network.");
+    };
+
+    // // addEventListener version
+    // window.addEventListener('offline', (event) => {
+    //   console.log("The network connection has been lost.");
+    // });
+
+    // // onoffline version
+    window.onoffline = (event) => {
+      console.log("The network connection has been lost.");
+    };
+    console.log('index.html window.navigator.onLine is ' + window.navigator.onLine);
+
+    if (window.navigator.onLine === false) {
+      let app_root_el = document.getElementsByTagName('app-root');
+      console.log('index.html app_root_el ', app_root_el);
+
+      setTimeout(function () {
+        console.log('index.html app_root_el > childNodes ', app_root_el[0].childNodes);
+        if (app_root_el[0].childNodes.length > 0) { // Or just `if (element.childNodes.length)`
+          console.log('index.html app_root_el has child', app_root_el[0].childNodes);
+          // window.ononline = (event) => {
+          //   console.log("index.html You are now connected to the network.");
+          //   location.reload(true);
+          // };
+        } else {
+          console.log('index.html app_root_el not has child', app_root_el[0].childNodes);
+          // if (window.navigator.onLine === true) {
+          //   location.reload(true);
+          // }
+          window.ononline = (event) => {
+            console.log("index.html You are now connected to the network.");
+            location.reload(true);
+          };
+        }
+
+      }, 3000);
+
+
+    }
+
+
+    // document.addEventListener('DOMContentLoaded', (event) => {
+    //   // log.textContent = log.textContent + `DOMContentLoaded\n`;
+    //   console.log("index.html DOMContentLoaded event ", event);
+    //   console.log('index.html window.navigator.onLine is ' + window.navigator.onLine);
+    //   let app_root_el = document.getElementsByTagName('app-root');
+    //   console.log('index.html app_root_el ', app_root_el);
+
+    //   setTimeout(function () {
+    //     console.log('index.html app_root_el > childNodes ', app_root_el[0].childNodes);
+    //     if (app_root_el[0].childNodes.length > 0) { // Or just `if (element.childNodes.length)`
+    //       console.log('index.html app_root_el has child', app_root_el[0].childNodes);
+    //     } else {
+    //       console.log('index.html app_root_el not has child', app_root_el[0].childNodes);
+    //       if (window.navigator.onLine === true) {
+    //         location.reload(true);
+    //       }
+    //     }
+
+    //   }, 3000);
+
+    // });
+
+  </script>
+
 
 
 
@@ -37,5 +117,6 @@
   <app-root></app-root>
 </body>
 
-</script>  
-</html>
+</script>
+
+</html>