Add connection fail message and auto cache refresh for service worker

src/main/resources/static/js/navabar.js

@@ -22,6 +22,13 @@ $(document).ready(function() {
         dismissible: false // Modal can be dismissed by clicking outside of the modal
     });
 
+    $('#modal_internet').modal({
+        dismissible: false // Modal can be dismissed by clicking outside of the modal
+    });
+
+
+
+
 
     nav_bar_account_link = $("#nav-bar-account");
     input_name = $("#user_input");
@@ -37,6 +44,8 @@ $(document).ready(function() {
         connected();
     }
 
+    checkConnection();
+
 
 });
 
@@ -200,3 +209,19 @@ function getGuild(){
 
     });
 }
+
+
+function checkConnection() {
+    $.ajax({
+        type: "GET",
+        url: "/api/isReady",
+        success: function (data) {
+            console.log("Connection Ok");
+        }
+
+    }).fail(function (data) {
+        console.error("Connection fail!");
+        $('#modal_internet').modal('open');
+
+    });
+}

src/main/resources/static/sw.js

@@ -1,5 +1,4 @@
-
-var CACHE_NAME = 'Clap-Trap-Bot-V1';
+var CACHE_NAME = 'Clap-Trap-Bot-V0.1';
 var urlsToCache = [
     '/',
     '/music',
@@ -12,23 +11,22 @@ var urlsToCache = [
 ];
 
 
-
-
-self.addEventListener('install', function(event) {
+self.addEventListener('install', function (event) {
     // Perform install steps
     event.waitUntil(
         caches.open(CACHE_NAME)
-            .then(function(cache) {
+            .then(function (cache) {
                 console.log('Opened cache');
                 return cache.addAll(urlsToCache);
             })
     );
 });
 
-self.addEventListener('fetch', function(event) {
+self.addEventListener('fetch', function (event) {
+    console.log("fetch");
     event.respondWith(
         caches.match(event.request)
-            .then(function(response) {
+            .then(function (response) {
                     // Cache hit - return response
                     if (response) {
                         return response;
@@ -37,4 +35,46 @@ self.addEventListener('fetch', function(event) {
                 }
             )
     );
+
+    event.waitUntil(
+        update(event.request)
+            .then(refresh)
+    );
+
+    function update(request) {
+        console.log(request);
+        console.log(caches.match(request));
+        return caches.match(request).then(
+            function (response) {
+                if (response) {
+                    return caches.open(CACHE_NAME).then(function (cache) {
+                        return fetch(request).then(function (response) {
+                            return cache.put(request, response.clone()).then(function () {
+                                return response;
+                            });
+                        });
+                    });
+                }
+            }
+        );
+    }
+
+    function refresh(response) {
+        if(response){
+            console.log("refresh");
+            return self.clients.matchAll().then(function (clients) {
+                clients.forEach(function (client) {
+                    var message = {
+                        type: 'refresh',
+                        url: response.url,
+                        eTag: response.headers.get('eTag')
+                    };
+                    client.postMessage(JSON.stringify(message));
+                });
+            });
+        }
+
+    }
+
+
 });

src/main/resources/templates/header.html

@@ -162,6 +162,24 @@
         </div>
     </div>
 
+
+
+    <div id="modal_internet" class="modal">
+        <div class="modal-content" style="padding-bottom: 0px">
+            <div class="row" style="margin-bottom: 0px">
+                <h3 class="col l12 m 12 s12 center red-text">Can't connect to server!</h3>
+                <div class="col l6 offset-l3 offset-m1 m10 offset-s1 s10 center">
+                    <p> Please check your connection and reload the app!</p>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+        </div>
+    </div>
+
+
+
+
     <p id="radioTemplateGuild" class="" style="visibility: hidden; display: none ">
         <label>
             <input name="guildRadio" class="with-gap" type="radio" value="@id" id="@id"/>