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 staticCacheName = 'site-static-v2';
const dynamicCacheName = 'site-dynamic-v1'; const dynamicCacheName = 'site-dynamic-v1';
const assets = [ const assets = [
'/', '/offline.html',
'/css/app.css', '/css/app.css',
'/css/normalize.css', '/css/normalize.css',
'/css/webapp.css', '/css/webapp.css',
'/css/webappdark.css', '/css/webappdark.css',
'/home', '/images/icons/Vagttelefon-normal.svg',
'/events', '/images/icons/Vagttelefon-hvid.svg',
'/login' '/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 // install event
@ -18,6 +35,8 @@ self.addEventListener('install', evt => {
caches.open(staticCacheName).then((cache) => { caches.open(staticCacheName).then((cache) => {
//console.log('caching shell assets'); //console.log('caching shell assets');
return cache.addAll(assets); return cache.addAll(assets);
}).catch((r) => {
console.log("I dont workkkkk");
}) })
); );
}); });
@ -37,22 +56,62 @@ self.addEventListener('activate', evt => {
}); });
// fetch event // fetch event
/*
self.addEventListener('fetch', evt => { self.addEventListener('fetch', evt => {
console.log('fetch event'); console.log('fetch event');
evt.respondWith(
caches.match(evt.request).then(async function (cacheRes) {
return cacheRes || fetch(evt.request).then(fetchRes => {
return caches.open(dynamicCacheName).then(cache => {
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( evt.respondWith(
caches.match(evt.request).then( async function (cacheRes){ caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request).then(fetchRes => { return cacheRes || fetch(evt.request).then(fetchRes => {
return caches.open(dynamicCacheName).then(cache => { return caches.open(dynamicCacheName).then(cache => {
cache.put(evt.request.url, fetchRes.clone()).then(r => { cache.put(evt.request.url, fetchRes.clone());
return fetchRes; 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="msapplication-navbutton-color" content="00788a">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/login"> <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"> <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="72x72" href="/images/icons/img72x72.svg">
<link rel="shortcut icon" type="images/svg" sizes="96x96" href="/images/icons/img96x96.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="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="383x383" href="/images/icons/img383x383.svg">
<link rel="shortcut icon" type="images/svg" sizes="512x512" href="/images/icons/img512X512.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> </head>
<body style="background-color: #00788a;"> <body style="background-color: #00788a;">
@yield("content") @yield("content")
<script src="{{ mix("/js/app.js") }}"></script> <script src="{{ mix("/js/app.js") }}"></script>
<script src="/serviceWorkerRegistration.js"></script> <!--<script src="/serviceWorkerRegistration.js"></script>-->
@yield("scripts") @yield("scripts")
</body> </body>
</html> </html>