Merge pull request #26 from ZhengLinLei/fix_task_pwa_fetch

Optimizated PWA algorithm

CHANGELOG

@@ -1,3 +1,7 @@
+v0.1.5 -> 09/10/2023 -----------------------------------> TAG: v0.1.5-alpha
+    - Added randomization of colors
+    - Fixed pwa update problem
+
 v0.1.4 -> 08/10/2023
     - Added PWA installation modal
 

index.html

@@ -66,7 +66,7 @@ <h3 class="score">BEST SCORE</h3>
     <script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
     <script src="./js/script.min.js"></script>
     <script>
-        const V = "1.0.4";
+        const V = "1.0.5";
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
                 navigator.serviceWorker.register(`./sw.js?v=${V}`)

js/script.js

@@ -13,8 +13,8 @@ let GAME_ = {
 // ==================================
 // DEFINE STACK COLOR
 const colorDesign = [
-    [120, 80, 60],
     [30, 70, 50],
+    [120, 80, 60],
     [224, 68, 62],
     [251, 50, 60],
     [339, 62, 48],
@@ -451,7 +451,6 @@ window.addEventListener('load', ()=>{
     let eventType = supportsTouch ? 'touchstart' : 'mousedown';
     window.addEventListener(eventType, e => {
         if (!e.target.className.split(' ').some((c) => { return /pwa-.*/.test(c); })) {
-            e.preventDefault();
             fncStart();
         }
     }); // ADD FNC

sw.js

@@ -1,16 +1,21 @@
 //GET VERSION
-const CACHE_VERSION = "1.0.4";
+const CACHE_VERSION = "1.0.5";
 const CURRENT_CACHE = `sbio-v${CACHE_VERSION}`;
 let filesToCache = [
   "./manifest.json",
   "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500&display=swap",
+  "https://fonts.gstatic.com/s/sourcecodepro/v23/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2",
   "./css/style.css",
   "./source/ico.ico",
   "./source/ico.png",
   "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js",
   "https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js",
   "https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js",
-  "./js/script.min.js"
+  "./js/script.min.js",
+  `./sw.js?v=${CACHE_VERSION}`,
+  "./js/pwa.min.js",
+  "./index.html",
+  "./",
 ];
 //INSTALL
 self.addEventListener("install", eo => {
@@ -39,36 +44,38 @@ self.addEventListener('activate', evt => {
     })
   );
 });
-const updateCache = request => {
+
+const updateRequest = (request, response) => {
   if (!request.url.includes(".woff")) {
     caches.open(CURRENT_CACHE)
-      .then(cache => {
-        cache.match(request)
-          .then(response => {
-            if (response) {
-              fetch(request)
-                .then(res => {
-                  cache.put(request, res.clone());
-                });
-            }
-          })
-      })
+    .then(cache => {
+      cache.match(request)
+        .then(res => {
+          if (res) {
+            cache.put(request, response);
+          }
+        })
+    })
   }
 }
 
 self.addEventListener('fetch', event => {
   event.respondWith(
-    caches.open(CURRENT_CACHE)
-      .then(cache => {
-        return cache.match(event.request.url)
-          .then(response => {
-            return (response) ? response : fetch(event.request);
-          })
-      })
-      .catch(e => {
-        console.log("Error getting resource: ", e);
-        return fetch(event.request);
-      })
+    (async () => {
+      if(navigator.onLine) {
+        // Fetch the resource from the network. And update cache.
+        const response = await fetch(event.request);
+
+        if (response) {
+          updateRequest(event.request, response.clone());
+        }
+
+        return response;
+      }
+
+      // Otherwise return cache if error found or item not found 
+      // Ask for refresh the page
+      return await caches.match(event.request);
+    })()
   );
-  updateCache(event.request);
 });