Skip to content

Instantly share code, notes, and snippets.

@Chaphasilor
Created October 17, 2019 08:23
Show Gist options
  • Save Chaphasilor/a7708f85341cdbfe8819e3431f27bb3f to your computer and use it in GitHub Desktop.
Save Chaphasilor/a7708f85341cdbfe8819e3431f27bb3f to your computer and use it in GitHub Desktop.
Some code for twelve70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#121212">
<title>Example Page for twelve70</title>
<link rel="manifest" href="./manifest.webmanifest">
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('./sw.js').then(function (registration) {
// Registration was successful
// console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
// registration failed :(
console.error('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>
{
"short_name": "twelve70",
"name": "twelve70 - mens outfit calculator",
"description": "A tool to help you pick an outfit that matches in color and style!",
"icons": [
{
"src": "android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"background_color": "#f3f3f3",
"theme_color": "#121212",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait-primary"
}
var cacheName = 'siteCache';
var urlsToCache = [
'/',
'/js/app.js?id=26497c63fc3241f91fe6',
'/css/app.css?id=405c791f984aee167ca3',
'/css/shared.css?id=436b54b159887bac1dfc',
'/css/main.css?id=f4aed1a982eb3149c8b9',
'/js/myscript.js?id=e895ac1c23c2ad01e0bc',
];
// on installation of the service worker, create a new cache an load all configured urls into it
self.addEventListener('install', function (event) {
// Perform install steps
event.waitUntil(
caches.open(cacheName)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// if content is loaded, the service worker will act as a proxy and respond with the cached resource if available
//! it is possible, that changes you make to the files in urlsToCache won't be reflected to the user until their cache is wiped. maybe look for a different caching strategy, or don't use caching at all?
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request)
.then(function (response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
@Chaphasilor
Copy link
Author

Chaphasilor commented Dec 28, 2019

Technically, yes. I don't have too much time at hand and honestly havent used the site in weeks, but I'm still interested :D
You have a Discord or Slack?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment