const CACHE_NAME = 'leibovitz-cache-v1'; const urlsToCache = [ '/', './', 'index.html', 'leibovitz.js', 'blur.js', 'contrast.js', 'color.js', 'balance.js', 'dither.js', 'service-worker.js', 'ChicagoFLF.ttf', 'manifest.json', // Icons 'android-icon-192x192.png', 'android-icon-512x512.png', 'favicon.ico', 'favicon-16x16.png', 'favicon-32x32.png', 'favicon-96x96.png', 'apple-icon-57x57.png', 'apple-icon-60x60.png', 'apple-icon-72x72.png', 'apple-icon-76x76.png', 'apple-icon-114x114.png', 'apple-icon-120x120.png', 'apple-icon-144x144.png', 'apple-icon-152x152.png' ]; // Install event - cache all necessary files self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { return cache.addAll(urlsToCache); }) ); }); // Activate event - clean up old caches self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== CACHE_NAME) { return caches.delete(cacheName); } }) ); }) ); }); // Fetch event - serve from cache, fallback to network self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // Return cached response if found if (response) { return response; } // Clone the request because it can only be used once const fetchRequest = event.request.clone(); // Try to fetch from network return fetch(fetchRequest).then(response => { // Check if we received a valid response if (!response || response.status !== 200 || response.type !== 'basic') { return response; } // Clone the response because it can only be used once const responseToCache = response.clone(); // Cache the fetched response caches.open(CACHE_NAME) .then(cache => { cache.put(event.request, responseToCache); }); return response; }); }) ); });