-
-
Save Chaphasilor/a7708f85341cdbfe8819e3431f27bb3f to your computer and use it in GitHub Desktop.
| <!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); | |
| } | |
| ) | |
| ); | |
| }); |
Sorry for the delayed reply, things have ramped up in the sense that we are making decisions as to which way we take this thing.
That is all making sense the more I read into it and understand what is happening behind the scenes.
I wonder if a good start is to make the user's favourites available offline since these are tied to user accounts.
When you say that you need the homepage from me, do you need the actual file?
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...
Hey, are you still around to assist with this?
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?
Hey, no problem at all! I enjoy doing this stuff and it would make me happy to see you implementing this on your page :)
I think I also found a better solution to our caching problem, if you are building your scripts anyway an are appending a custom id, you could simply do the same with the service worker! I discovered that the browser always checks for a new service worker version and ignored the cache for that check, so if you change any of your files and rebuild the code, just increment the service worker's version and all files will be cached again! I'm currently not caching any other files or requests, so if you are loading new fashion data from the server, it will always be the latest version.
To answer your second question, no, not really. Because you would still need the actual fashion data from your server, so there would still be requests. You'd need to preconfigure all combinations and download them to the users device, with is neither practical nor possible in you case. BUT, if you would use an API and load your data in the background through JavaScript, then your site would feel much more like an app! You could cache all sites (excluding images or other, dynamic files) and simply load the needed data once the page is opened. The nice thing about this approach is that you could show loading animations or other eye-candy while you're retrieving the data.
For now, only the homepage and a few static pages would be cached (which btw I still need from you), but all pages showing results would be fetched from the server. That's not such a big deal because your page is rather light-weight. But in order to be able to install the site as an app we need a service worker that handles network requests one way or another, and if we need to handle this anyway why not just cache a few things ;)
I hope this wasn't too complicated to understand, but if it was just say it and I'll try to make it a bit less abstract :)