Feat: PWA support in chromeOS and better splash screen ux/progress displays for version upgrade

src/index.html

@@ -39,6 +39,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="styles/images/favicons/favicon-16x16.png">
     <link rel="mask-icon" href="styles/images/favicons/safari-pinned-tab.svg" color="#da532c">
     <meta name="msapplication-TileColor" content="#47484B">
+    <link rel="manifest" href="manifest.json">
     <title>Phoenix Code</title>
     <!--    boot-time styles only here-->
     <style>
@@ -362,6 +363,15 @@
             if(!window.caches){
                 console.error("CacheStorage: API not supported by browser.");
             }
+
+            function _showUpdateMessage(message) {
+                let splashScreenFrame = document.getElementById("splash-screen-frame");
+                if(splashScreenFrame){
+                    let displayText2 = splashScreenFrame.contentDocument.getElementById("load-status-display-text");
+                    displayText2 && (displayText2.textContent = message);
+                }
+            }
+
             async function computeSHA256(response) {
                 try {
                     if (!response.ok) {
@@ -383,8 +393,9 @@
                     const newCacheOpen = await caches.open(newCache);
                     const oldCacheOpen = await caches.open(oldCache);
                     const oldCacheKeys = await oldCacheOpen.keys();
-                    let count = 0;
+                    let count = 0, totalCount = 0;
                     for(let request of oldCacheKeys){
+                        totalCount++;
                         let newResponseCached = await newCacheOpen.match(request);
                         let relativePath = (new URL(request.url)).pathname.slice(1);
                         const newSHA = newCacheManifest[relativePath];
@@ -394,14 +405,15 @@
                             if(!oldResponse){
                                 continue;
                             }
+                            _showUpdateMessage(`${count} of ${totalCount} files unchanged...`);
                             const oldSHA = await computeSHA256(oldResponse);
                             if(newSHA === oldSHA) {
                                 count++;
                                 await newCacheOpen.put(request, oldResponseClone);
                             }
                         }
                     }
-                    console.log("cache-upgrade: reused entries from old cache: ", count);
+                    console.log("cache-upgrade: reused entries from old cache: ", count, "of", totalCount);
                     await caches.delete(oldCache);
                 } catch (e) {
                     console.error("cache-upgrade: Error while migrating cache", e);
@@ -411,9 +423,11 @@
             async function updateCache(newCacheName, oldCacheName, defaultCacheName) {
                 let newCacheManifest = await fetch(`web-cache/${newCacheName}/cacheManifest.json`);
                 newCacheManifest = await newCacheManifest.json();
+                _showUpdateMessage("Migrating default caches...");
                 if(await caches.has(defaultCacheName)){
                     await migrate(defaultCacheName, newCacheName, newCacheManifest);
                 }
+                _showUpdateMessage("Migrating last version caches...");
                 if(oldCacheName && await caches.has(oldCacheName)){
                     await migrate(oldCacheName, newCacheName, newCacheManifest);
                 }
@@ -584,8 +598,8 @@
                         }
                         let displayBtn1 = splashScreenFrame.contentDocument.getElementById("load-status-display-btn");
                         let displayText2 = splashScreenFrame.contentDocument.getElementById("load-status-display-text");
-                        displayBtn1.textContent = "Updating app...";
-                        displayText2.textContent = "Page will reload after update";
+                        displayBtn1 && (displayBtn1.textContent = "Updating app...");
+                        displayText2 && (displayText2.textContent = "Please wait....");
                         return;
                     }
                 }
@@ -664,6 +678,49 @@
         }
     </style>
 
+    <script type="text/javascript">
+        function _chromeOSPWAHandle() {
+            let deferredPrompt;
+            const PWA_PROMPTED_BEFORE_KEY = "PWA_PROMPTED_BEFORE";
+            function isChromeOS() {
+                return /CrOS/.test(navigator.userAgent);
+            }
+            function showPWAInstallIcon() {
+                if(!window.$ || !window.Strings){
+                    setTimeout(showPWAInstallIcon, 5000);
+                    return;
+                }
+                let $updateIcon = window.$("#update-notification");
+                $updateIcon.removeClass("forced-hidden");
+                $updateIcon.attr("title", Strings.INSTALL_WEBAPP);
+                $updateIcon.click(()=>{
+                    deferredPrompt.prompt();
+                    deferredPrompt.userChoice.then((choiceResult) => {
+                        if (choiceResult.outcome === 'accepted') {
+                            deferredPrompt = null;
+                            $updateIcon.addClass("forced-hidden");
+                        } else {
+                            console.log('User dismissed the A2HS prompt');
+                        }
+                    });
+                });
+                if(!localStorage.getItem(PWA_PROMPTED_BEFORE_KEY)){
+                    localStorage.setItem(PWA_PROMPTED_BEFORE_KEY, "yes");
+                    deferredPrompt.prompt();
+                }
+            }
+            window.addEventListener("beforeinstallprompt", (event) => {
+                event.preventDefault(); // no install prompts in any other browser.
+                if(!isChromeOS()){
+                    return;
+                }
+                deferredPrompt = event;
+                showPWAInstallIcon();
+            });
+        }
+        _chromeOSPWAHandle();
+    </script>
+
 </head>
 <body id="Phoenix-Main" onload="_loadPhoenixAfterSplashScreen()">
 <div id="phoenix-loading-splash-screen-overlay" class="forced-hidden" onload="_addOrRemoveSplashScreenIfNeeded()">

src/manifest.json

@@ -1,21 +1,35 @@
 {
-    "name": "Phoenix",
-    "short_name": "Phoenix",
-    "start_url": "index.html",
-    "scope": "./",
+    "short_name": "Phoenix Code",
+    "name": "Install Phoenix Code Editor?",
+    "description": "A text editor designed to make coding as intuitive and fun as playing a video game - specially crafted for web developers, designers, and students.",
+    "start_url": "/",
+    "scope": "/",
     "icons": [
       {
-        "src": "./styles/images/icon_128.png",
-        "sizes": "192x192",
+        "src": "assets/pwa/32x32.png",
+        "sizes": "32x32",
         "type": "image/png"
       },
       {
-        "src": "./styles/images/icon_512.png",
-        "sizes": "512x512",
+        "src": "assets/pwa/128x128.png",
+        "sizes": "128x128",
+        "type": "image/png"
+      },
+      {
+        "src": "assets/pwa/Square284x284Logo.png",
+        "sizes": "284x284",
         "type": "image/png"
       }
     ],
     "theme_color": "#47484B",
     "background_color": "#bbb",
-    "display": "standalone"
-  }
+    "display": "standalone",
+  "screenshots": [
+    {
+      "src": "assets/pwa/phoenix.png",
+      "type": "image/png",
+      "sizes": "1235x763",
+      "form_factor": "wide"
+    }
+  ]
+}

src/nls/root/strings.js

@@ -589,6 +589,7 @@ define({
     "UPDATE_RESTART": "Restart to apply updates",
     "UPDATE_RESTART_INSTALL": "Restart to install updates",
     "UPDATE_DOWNLOADING": "Downloading Installer",
+    "INSTALL_WEBAPP": "Install {APP_NAME} on Your Device",
     "UPDATE_DOWNLOAD_PROGRESS": "Downloading- {0} of {1} MB",
     "UPDATING_APP": "Updating {APP_NAME}",
     "UPDATING_APP_MESSAGE": "This may take a while",