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

Yes, depending on how you access/save the favorites, you really could save those offline. Although this would likely have nothing to do with service workers, instead you would use IndexedDB for this (again, this depends on how you access the favorites).

what I mean by needing the files is I'd need the links to all the static content on your page, images, home pages, faq site, anything that is static. Then I could include those files in the cached pages.
Alternatively you could also send me the source code of the site, just make sure to remove any api keys or other secrets...

@rubanraj7
Copy link

Hey, are you still around to assist with this?

@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