Created
July 12, 2017 11:07
-
-
Save jacobovidal/b891b4adf28e0be1a55ffc77ce178efd to your computer and use it in GitHub Desktop.
Install Service Worker and cache new requests cumulatively (Only GET method)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var CACHE_NAME = 'example-cache-v1'; | |
var urlsToCache = []; | |
self.addEventListener('install', function(event) { | |
// Perform install steps | |
event.waitUntil( | |
caches.open(CACHE_NAME) | |
.then(function(cache) { | |
console.log('Opened cache'); | |
return cache.addAll(urlsToCache); | |
}) | |
); | |
}); | |
self.addEventListener('fetch', function(event) { | |
// Only cache GET method | |
if(event.request.method === 'GET') { | |
event.respondWith( | |
caches.match(event.request) | |
.then(function (response) { | |
// Cache hit - return response | |
if (response) { | |
return response; | |
} | |
// IMPORTANT: Clone the request. A request is a stream and | |
// can only be consumed once. Since we are consuming this | |
// once by cache and once by the browser for fetch, we need | |
// to clone the response. | |
var fetchRequest = event.request.clone(); | |
return fetch(fetchRequest).then( | |
function (response) { | |
// Check if we received a valid response | |
if (!response || response.status !== 200 || response.type !== 'basic') { | |
return response; | |
} | |
// IMPORTANT: Clone the response. A response is a stream | |
// and because we want the browser to consume the response | |
// as well as the cache consuming the response, we need | |
// to clone it so we have two streams. | |
var responseToCache = response.clone(); | |
caches.open(CACHE_NAME) | |
.then(function (cache) { | |
cache.put(event.request, responseToCache); | |
}); | |
return response; | |
} | |
); | |
}) | |
); | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment