Create a gist now

Instantly share code, notes, and snippets.

@caraya /sw.js
Created Sep 16, 2017

What would you like to do?
/* eslint-disable no-undef */
const PRECACHE = 'precache-v1';
const RUNTIME = 'runtime-v1';
const IMAGES = 'images-v1';
const PRECACHE_URLS = [
'./', // Alias for index.html
'styles/main.css',
'scripts/main.js',
'/offline.html'
];
// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
event.waitUntil(caches
.open(PRECACHE)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(self.skipWaiting())
.catch(err => {
console.log("error precaching resources", err);
}));
});
// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
const currentCaches = [PRECACHE, RUNTIME, IMAGES];
event.waitUntil(
caches.keys()
.then(cacheNames => {
return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
})
.then(cachesToDelete => {
return Promise.all(cachesToDelete.map(cacheToDelete => {
return caches.delete(cacheToDelete);
}));
})
.then(() => self.clients.claim())
.catch(err => {
console.log('error removing old caches', err);
})
);
});
self.addEventListener('fetch', event => {
if (request.headers.get('Accept').includes('html')) {
event.respondWith(() => {
caches.match(event.request)
.then(response => {
// Fall back to network
return response || fetch(event.request);
})
.then(response => {
return caches.open('RUNTIME')
.then(cache => {
cache.put(event.request, response.clone());
return response;
});
})
.catch(() => {
return caches.match('/offline.html');
}); // closes catch
}); // closes respondWith
} // closes if
if (request.headers.get('Accept').includes('image')) {
event.respondWith(() => {
caches.match(event.request)
.then(response => {
return response || fetch(evennt.request);
})
.then(reponse => {
return caches.open('IMAGES');
})
.then(cache => {
cache.put(event.request, response.clone());
return response;
})
.catch(() => {
return new Response(
'<svg role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>',
{
headers: {
"Content-Type": "image/svg+xml",
"Cache-Control": "no-store"
}
}
);
});
});
}// closes if
if (request.headers.get('Accept').include('video')) {
event.respondWith(() => {
fetch(event.request);
})
.catch(() => {
return new Response(
'<svg role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>',
{
headers: {
"Content-Type": "image/svg+xml",
"Cache-Control": "no-store"
}
}
);
});
}// closes if
// If the request doesn't match our special cases then use default
event.respondWith(() => {
caches.match(event.request).then(response => {
// Fall back to network
return response || fetch(event.request);
})
.then(response => {
return caches.open('RUNTIME')
.then(cache => {
cache.put(event.request, response.clone());
return response;
})
.catch(() => {
return caches.match('/offline.html');
}); // closes catch
});
}); // Closes respondWith
}); // closes fetch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment