fix(service worker): removed overbloated files

Author: nerdeveloper

README.md

@@ -61,7 +61,7 @@ The Node-Typescript/Express Hackathon Starter Kit is production ready with authe
 - Node.js clusters support
 - Webpack
 - Css stylesheets
-- Bootstrap 4 
+- Bootstrap 4
 - Contact Form (powered by Sendgrid)
 - PWA Support
 - Google reCAPTCHA

public/sw.js

@@ -1,64 +1,162 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
+//This is the service worker with the Advanced caching
 
-const CACHE = "pwabuilder-offline-page";
+const CACHE = "pwabuilder-adv-cache";
+const precacheFiles = [
+    /* Add an array of files to precache for your app */
+];
 
 // TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
-const offlineFallbackPage = "/";
+const offlineFallbackPage = "ToDo-replace-this-name.html";
+
+const networkFirstPaths = [
+    /* Add an array of regex of paths that should go network first */
+    // Example: /\/api\/.*/
+];
+
+const avoidCachingPaths = [
+    /* Add an array of regex of paths that shouldn't be cached */
+    // Example: /\/api\/.*/
+    /\/Images\/.*/,
+    /\/free\/.*/,
+    /\/bootstrap\/.*/,
+    /\/user\/.*/,
+    /\/ajax\/.*/,
+    /\/repos\/.*/,
+    /\/recaptcha\/.*/,
+    /\/auth\/.*/,
+    /\/socket.io\/.*/,
+    /\/avatar\/.*/,
+
+    "https://source.unsplash.com",
+    "https://code.jquery.com/jquery-3.2.1.slim.min.js",
+    "https://buttons.github.io/buttons.js",
+];
+
+function pathComparer(requestUrl, pathRegEx) {
+    return requestUrl.match(new RegExp(pathRegEx));
+}
+
+function comparePaths(requestUrl, pathsArray) {
+    if (requestUrl) {
+        for (let index = 0; index < pathsArray.length; index++) {
+            const pathRegEx = pathsArray[index];
+            if (pathComparer(requestUrl, pathRegEx)) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
 
-// Install stage sets up the offline page in the cache and opens a new cache
 self.addEventListener("install", function(event) {
     console.log("[PWA Builder] Install Event processing");
 
+    console.log("[PWA Builder] Skip waiting on install");
+    self.skipWaiting();
+
     event.waitUntil(
         caches.open(CACHE).then(function(cache) {
-            console.log("[PWA Builder] Cached offline page during install");
-
-            if (offlineFallbackPage === "ToDo-replace-this-name.html") {
-                return cache.add(
-                    new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."),
-                );
-            }
+            console.log("[PWA Builder] Caching pages during install");
+
+            return cache.addAll(precacheFiles).then(function() {
+                if (offlineFallbackPage === "ToDo-replace-this-name.html") {
+                    return cache.add(
+                        new Response(
+                            "TODO: Update the value of the offlineFallbackPage constant in the serviceworker.",
+                        ),
+                    );
+                }
 
-            return cache.add(offlineFallbackPage);
+                return cache.add(offlineFallbackPage);
+            });
         }),
     );
 });
 
+// Allow sw to control of current page
+self.addEventListener("activate", function(event) {
+    console.log("[PWA Builder] Claiming clients for current page");
+    event.waitUntil(self.clients.claim());
+});
+
 // If any fetch fails, it will look for the request in the cache and serve it from there first
 self.addEventListener("fetch", function(event) {
     if (event.request.method !== "GET") return;
 
+    if (comparePaths(event.request.url, networkFirstPaths)) {
+        networkFirstFetch(event);
+    } else {
+        cacheFirstFetch(event);
+    }
+});
+
+function cacheFirstFetch(event) {
+    event.respondWith(
+        fromCache(event.request).then(
+            function(response) {
+                // The response was found in the cache so we responde with it and update the entry
+
+                // This is where we call the server to get the newest version of the
+                // file to use the next time we show view
+                event.waitUntil(
+                    fetch(event.request).then(function(response) {
+                        return updateCache(event.request, response);
+                    }),
+                );
+
+                return response;
+            },
+            function() {
+                // The response was not found in the cache so we look for it on the server
+                return fetch(event.request)
+                    .then(function(response) {
+                        // If request was success, add or update it in the cache
+                        event.waitUntil(updateCache(event.request, response.clone()));
+
+                        return response;
+                    })
+                    .catch(function(error) {
+                        // The following validates that the request was for a navigation to a new document
+                        if (event.request.destination !== "document" || event.request.mode !== "navigate") {
+                            return;
+                        }
+
+                        console.log("[PWA Builder] Network request failed and no cache." + error);
+                        // Use the precached offline page as fallback
+                        return caches.open(CACHE).then(function(cache) {
+                            cache.match(offlineFallbackPage);
+                        });
+                    });
+            },
+        ),
+    );
+}
+
+function networkFirstFetch(event) {
     event.respondWith(
         fetch(event.request)
             .then(function(response) {
-                console.log("[PWA Builder] add page to offline cache: " + response.url);
-
                 // If request was success, add or update it in the cache
                 event.waitUntil(updateCache(event.request, response.clone()));
-
                 return response;
             })
             .catch(function(error) {
                 console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
                 return fromCache(event.request);
             }),
     );
-});
+}
 
 function fromCache(request) {
     // Check to see if you have it in the cache
     // Return response
-    // If not in the cache, then return the offline page
+    // If not in the cache, then return error page
     return caches.open(CACHE).then(function(cache) {
         return cache.match(request).then(function(matching) {
             if (!matching || matching.status === 404) {
-                // The following validates that the request was for a navigation to a new document
-                if (request.destination !== "document" || request.mode !== "navigate") {
-                    return Promise.reject("no-match");
-                }
-
-                return cache.match(offlineFallbackPage);
+                return Promise.reject("no-match");
             }
 
             return matching;
@@ -67,9 +165,13 @@ function fromCache(request) {
 }
 
 function updateCache(request, response) {
-    return caches.open(CACHE).then(function(cache) {
-        return cache.put(request, response);
-    });
+    if (!comparePaths(request.url, avoidCachingPaths)) {
+        return caches.open(CACHE).then(function(cache) {
+            return cache.put(request, response);
+        });
+    }
+
+    return Promise.resolve();
 }
 
 // This is an event that can be fired from your page to tell the SW to update the offline page

src/routes/index.ts

@@ -23,6 +23,7 @@ function wrapAsync(fn: any) {
 }
 
 router.get("/", indexController.home);
+router.get("/home", indexController.home); // this route will be used by the service worker to cache the homepage
 router.get("/contact", indexController.contact);
 router.get("/404", indexController.notFound);