v1.4.11 Add dynamic Cache

This commit is contained in:
victor 2020-11-27 11:27:21 +01:00
parent 6d0cb5333d
commit 520aa99ff5
4 changed files with 98 additions and 12 deletions

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>@yield("title")</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/css/webappdark.css">
<link type="text/css" rel="stylesheet" href="/css/webapp.css">
<script type="text/javascript">
function setMain() {
var main = document.getElementsByTagName("main")[0];
var header = document.getElementsByTagName("header")[0];
main.style.minHeight = 'calc(100% - ' + header.clientHeight + 'px)';
}
</script>
</head>
<body>
<main style="height: 100%; justify-content: unset">
<h1 class="sde-blue" style="font-size: 12vw; text-align: center">ERROR: NO NETWORK</h1>
<p class="mb-0" style="text-align: center; font-size: 4vw;">Du har ikke cachet denne side</p>
<button onclick="window.history.back()" class="btn-sde-blue btn w-100 mt-auto mb-1">Tilbage</button>
</main>
<script src="/js/app.js"></script>
</body>
</html>

View File

@ -1,14 +1,31 @@
const staticCacheName = 'site-static-v2';
const dynamicCacheName = 'site-dynamic-v1';
const assets = [
'/',
'/offline.html',
'/css/app.css',
'/css/normalize.css',
'/css/webapp.css',
'/css/webappdark.css',
'/home',
'/events',
'/login'
'/images/icons/Vagttelefon-normal.svg',
'/images/icons/Vagttelefon-hvid.svg',
'/images/icons/about.svg',
'/images/icons/Aktiviteter.svg',
'/images/icons/Home.svg',
'/images/icons/Kontoret.svg',
'/images/icons/location.svg',
'/images/icons/Menuplan.svg',
'/images/icons/news.svg',
'/images/icons/phone.svg',
'/images/icons/questionmark.svg',
'/images/icons/settings-hvid.svg',
'/images/icons/user.svg',
'/images/icons/user-hvid.svg',
'/images/icons/Vejledninger.svg',
'/images/icons/watermelon.svg',
'/images/logos/Logo-hvid.svg',
'/images/logos/Logo-normal.svg',
'/images/icons/Logout.svg'
];
// install event
@ -18,6 +35,8 @@ self.addEventListener('install', evt => {
caches.open(staticCacheName).then((cache) => {
//console.log('caching shell assets');
return cache.addAll(assets);
}).catch((r) => {
console.log("I dont workkkkk");
})
);
});
@ -37,7 +56,7 @@ self.addEventListener('activate', evt => {
});
// fetch event
/*
self.addEventListener('fetch', evt => {
console.log('fetch event');
evt.respondWith(
@ -47,12 +66,52 @@ self.addEventListener('fetch', evt => {
cache.put(evt.request.url, fetchRes.clone()).then(r => {
return fetchRes;
});
}).catch((r) => {
console.log("I dont work");
});
});
})
);
});*/
self.addEventListener('fetch', evt => {
console.log('fetch event', evt);
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request).then(fetchRes => {
return caches.open(dynamicCacheName).then(cache => {
cache.put(evt.request.url, fetchRes.clone());
return fetchRes;
})
});
}).catch(function () {
return caches.match('/offline.html');
})
);
});
/*
self.addEventListener('fetch', evt => {
console.log("ARGHHHH");
if(navigator.onLine) {
evt.respondWith(async function() {
return fetch(evt.request).then((fetchRes) => {
caches.open(dynamicCacheName).then(cache => {
cache.put(evt.request.url, fetchRes.clone());
})
})
});
} else {
console.log('fetch event');
evt.respondWith(async function () {
let cachedResponse = await caches.match(evt.request);
if(cachedResponse) return cachedResponse;
else return caches.match("/offline.html");
});
}
});*/
/*

View File

@ -14,7 +14,7 @@
<meta name="msapplication-navbutton-color" content="00788a">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/login">
<link rel="apple-touch-icon" type="images/svg" sizes="150x150" href="appIcon.svg">
<link rel="apple-touch-icon" type="images/svg" sizes="150x150" href="/images/icons/appIcon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="images/svg" sizes="72x72" href="/images/icons/img72x72.svg">
<link rel="shortcut icon" type="images/svg" sizes="96x96" href="/images/icons/img96x96.svg">

View File

@ -24,13 +24,13 @@
<link rel="shortcut icon" type="images/svg" sizes="192x192" href="/images/icons/img192x192.svg">
<link rel="shortcut icon" type="images/svg" sizes="383x383" href="/images/icons/img383x383.svg">
<link rel="shortcut icon" type="images/svg" sizes="512x512" href="/images/icons/img512X512.svg">
<link rel="apple-touch-icon" type="images/svg" sizes="150x150" href="appIcon.svg">
<link rel="apple-touch-icon" type="images/svg" sizes="150x150" href="/images/icons/appIcon.svg">
</head>
<body style="background-color: #00788a;">
@yield("content")
<script src="{{ mix("/js/app.js") }}"></script>
<script src="/serviceWorkerRegistration.js"></script>
<!--<script src="/serviceWorkerRegistration.js"></script>-->
@yield("scripts")
</body>
</html>