merge init

web/firebase-messaging-sw.js

@@ -0,0 +1,30 @@
+importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
+
+   /*Update with yours config*/
+  const firebaseConfig = {
+    apiKey: "AIzaSyDlJQaEV9aPnPFeFA7QeiVijoGZXqemCRw",
+    authDomain: "telmessenger-d3935.firebaseapp.com",
+    databaseURL: "https://telmessenger-d3935.firebaseio.com",
+    projectId: "telmessenger-d3935",
+    storageBucket: "telmessenger-d3935.appspot.com",
+    messagingSenderId: "647562261340",
+    appId: "1:647562261340:web:01b97a27460e4bfd5b0799",
+    measurementId: "G-BFCBWCK70H"
+  };
+  firebase.initializeApp(firebaseConfig);
+  const messaging = firebase.messaging();
+
+  /*messaging.onMessage((payload) => {
+  console.log('Message received. ', payload);*/
+  messaging.onBackgroundMessage(function(payload) {
+    console.log('Received background message ', payload);
+
+    const notificationTitle = payload.notification.title;
+    const notificationOptions = {
+      body: payload.notification.body,
+    };
+
+    self.registration.showNotification(notificationTitle,
+      notificationOptions);
+  });

web/index.html

@@ -18,21 +18,214 @@
 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
+  <meta name="description" content="Datacom Solusindo">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="telnow_mobile_new">
+  <meta name="apple-mobile-web-app-title" content="TelNow Application">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
   <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="icon" type="image/png" href="favicon.ico"/>
 
-  <title>telnow_mobile_new</title>
+  <title>TelNow Application</title>
   <link rel="manifest" href="manifest.json">
+  <style>
+    .loader {
+      border: 5px solid #f3f3f3;
+      border-radius: 50%;
+      border-top: 5px solid #01beb5;
+      width: 40px;
+      height: 40px;
+      -webkit-animation: spin 2s linear infinite; /* Safari */
+      animation: spin 2s linear infinite;
+    }
+
+    .center {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -60px;
+      margin-left: -120px;
+      width: 240px;
+      height: 40px;
+      text-align: center;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+
+    .center-align {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: 20px;
+      margin-left: -60px;
+      width: 40px;
+      height: 40px;
+    }
+
+    .center-count {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -30px;
+      margin-left: -120px;
+      width: 240px;
+      height: 40px;
+      font-size: 20px;
+      font-weight: bold;
+      text-align: center;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+
+    /* Safari */
+    @-webkit-keyframes spin {
+      0% { -webkit-transform: rotate(0deg); }
+      100% { -webkit-transform: rotate(360deg); }
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    .countdown {
+        display: inline-block;
+        text-indent: -100vw;
+        position:relative;
+        width: 1ch;
+    }
+
+    .countdown::after {
+        content: '10';
+        position:absolute;
+        top:0;
+        left:0;
+        text-indent: 0;
+        animation: 18s countdown 1s forwards;
+    }
+
+    @keyframes countdown {
+        0% { content: '10'; }
+        10% { content: '9'; }
+        20% { content: '8'; }
+        30% { content: '7'; }
+        35% { content: '7'; }
+        40% { content: '6'; }
+        45% { content: '6'; }
+        50% { content: '5'; }
+        55% { content: '5'; }
+        60% { content: '4'; }
+        65% { content: '4'; }
+        70% { content: '3'; }
+        75% { content: '2'; }
+        80% { content: '2'; }
+        85% { content: '2'; }
+        90% { content: '1'; }
+        95% { content: '1'; }
+        100% { content: '0'; }
+    }
+  </style>
 </head>
 <body>
   <script src="flutter_bootstrap.js" async></script>
+
+  <div class="center">
+    <h4 id="label">Loading TelNow page</h4>
+  </div>
+  <div class="center-align">
+    <img src="cat.gif" width="120" height="120">
+  </div>
+  <div class="center-count">
+    <span class="countdown"></span>
+  </div>
+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
+
+  <script>
+    var serviceWorkerVersion = null;
+    var scriptLoaded = false;
+    function loadMainDartJs() {
+      if (scriptLoaded) {
+        return;
+      }
+      scriptLoaded = true;
+      var scriptTag = document.createElement('script');
+      scriptTag.src = 'main.dart.js';
+      scriptTag.type = 'application/javascript';
+      document.body.append(scriptTag);
+    }
+
+    if ('serviceWorker' in navigator) {
+      // Service workers are supported. Use them.
+      window.addEventListener('load', function () {
+        // Wait for registration to finish before dropping the <script> tag.
+        // Otherwise, the browser will load the script multiple times,
+        // potentially different versions.
+        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
+        navigator.serviceWorker.register(serviceWorkerUrl)
+          .then((reg) => {
+            function waitForActivation(serviceWorker) {
+              serviceWorker.addEventListener('statechange', () => {
+                if (serviceWorker.state == 'activated') {
+                  console.log('Installed new service worker.');
+                  loadMainDartJs();
+                }
+              });
+            }
+            if (!reg.active && (reg.installing || reg.waiting)) {
+              // No active web worker and we have installed or are installing
+              // one for the first time. Simply wait for it to activate.
+              waitForActivation(reg.installing || reg.waiting);
+            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+              // When the app updates the serviceWorkerVersion changes, so we
+              // need to ask the service worker to update.
+              console.log('New service worker available.');
+              reg.update();
+              waitForActivation(reg.installing);
+            } else {
+              // Existing service worker is still good.
+              console.log('Loading app from service worker.');
+              loadMainDartJs();
+            }
+          });
+
+		navigator.serviceWorker.register("firebase-messaging-sw.js").then((reg) => {
+			if (!reg.active && (reg.installing || reg.waiting)) {
+              // No active web worker and we have installed or are installing
+              // one for the first time. Simply wait for it to activate.
+			  console.log('Firebase messaging has been installing.');
+            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
+              // When the app updates the serviceWorkerVersion changes, so we
+              // need to ask the service worker to update.
+              console.log('Firebase messaging is available.');
+            } else {
+              // Existing service worker is still good.
+              console.log('Firebase messaging has been running.');
+            }
+		});
+
+        // If service worker doesn't succeed in a reasonable amount of time,
+        // fallback to plaint <script> tag.
+        setTimeout(() => {
+          if (!scriptLoaded) {
+            console.warn(
+              'Failed to load app from service worker. Falling back to plain <script> tag.',
+            );
+            loadMainDartJs();
+          }
+        }, 4000);
+      });
+    } else {
+      // Service workers not supported. Just drop the <script> tag.
+      loadMainDartJs();
+    }
+
+  </script>
 </body>
 </html>

web/manifest.json

@@ -1,11 +1,11 @@
 {
-    "name": "telnow_mobile_new",
-    "short_name": "telnow_mobile_new",
+    "name": "TelNow Application",
+    "short_name": "TelNow Application",
     "start_url": ".",
     "display": "standalone",
     "background_color": "#0175C2",
     "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
+    "description": "Datacom Solusindo",
     "orientation": "portrait-primary",
     "prefer_related_applications": false,
     "icons": [

web/splash/splash.js

@@ -0,0 +1,5 @@
+function removeSplashFromWeb() {
+  document.getElementById("splash")?.remove();
+  document.getElementById("splash-branding")?.remove();
+  document.body.style.background = "transparent";
+}

web/splash/style.css

@@ -0,0 +1,56 @@
+html {
+  height: 100%
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  background-color: #078C84;
+  background-size: 100% 100%;
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.contain {
+  display:block;
+  width:100%; height:100%;
+  object-fit: contain;
+}
+
+.stretch {
+  display:block;
+  width:100%; height:100%;
+}
+
+.cover {
+  display:block;
+  width:100%; height:100%;
+  object-fit: cover;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+
+.bottomLeft {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.bottomRight {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}