Add connection fail message and auto cache refresh for service worker

This commit is contained in:
Sebastien 2018-09-15 11:54:34 +03:00
parent da7dac5b59
commit 65e231588d
3 changed files with 91 additions and 8 deletions

View File

@ -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');
});
}

View File

@ -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));
});
});
}
}
});

View File

@ -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"/>