Skip to content

GitLab

Commit 5e038c66 authored by mdsecurity's avatar mdsecurity
Browse files

service worker order changes 

sw now serves from cache then asynchronously updates cache and serves new changes
parent 029baae5
Hide whitespace changes
Inline Side-by-side
src/sw.js
View file @ 5e038c66
var CACHE_NAME = 'whats-open-cache';
var CACHE = 'whats-open-cache';
var urlsToCache = [
'/',
'/assets/Bking.jpg',
......@@ -10,65 +10,88 @@ var urlsToCache = [
'/main.bundle.js'
];
self.addEventListener('install', function (event) {
self.addEventListener('install', function (evt) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
evt.waitUntil(precache());
console.log('The service worker is being installed.');
});
// self.addEventListener('foreignfetch', event => {
// event.respondWith(fetch(event.request).then(response => {
// return {
// response: response,
// origin: event.origin,
// headers: ['Content-Type']
// }
// }));
// });
self.addEventListener('fetch', function (event) {
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.
// if (event.request.url === 'https://whatsopen.gmu.edu/api/facilities/') {
var fetchRequest = event.request.clone();
fetchRequest.cache = 'only-if-cached';
return fetch(fetchRequest).then(
(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;
}
function precache() {
return caches.open(CACHE).then(function (cache) {
return cache.addAll(urlsToCache);
});
}
// self.addEventListener('fetch', function (event) {
// 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(
// (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.
// if(event.request.url.search('sockjs-node') === -1){
// var responseToCache = response.clone();
// caches.open(CACHE_NAME)
// .then(function (cache) {
// cache.put(event.request, responseToCache);
// });
// }
// return response;
// }
// );
// // }
// })
// );
// });
self.addEventListener('fetch', function (evt) {
console.log('The service worker is serving the asset.');
evt.respondWith(fromCache(evt.request));
);
// }
})
);
evt.waitUntil(update(evt.request));
});
function fromCache(request) {
return caches.open(CACHE).then(function (cache) {
return cache.match(request).then(function (matching) {
if(matching){
return matching || null;
}
return fetch(request).then(function (response) {
return response;
});
});
});
}
function update(request) {
if (request.url.search('sockjs-node') === -1) {
return caches.open(CACHE).then(function (cache) {
return fetch(request).then(function (response) {
return cache.put(request, response);
});
});
}
return Promise.resolve();
}
// this probably wont be used but this whitelists caches so if i want to use multiple they are not destroyed
// when a new service worker takes control
self.addEventListener('activate', function (event) {
......@@ -87,101 +110,3 @@ self.addEventListener('activate', function (event) {
// })
// );
});
// function Load(url) {
// return new Promise(function (resolve, reject) {
// var request = new HttpRequest();
// request.open('GET', url);
// request.responseType = 'blob';
// request.onload = function () {
// if (request.status == 200) {
// resolve(request.response);
// } else {
// reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
// }
// };
// request.onerror = function () {
// reject(Error('There was a network error.'));
// };
// request.send();
// });
// }
/*
* Callbacks for network and cache fetches
*/
function handleFetchCompletion(res) {
var resClone = res.clone();
caches.open(cacheName).then(function (cache) {
cache.put(dataUrl, resClone);
});
}
function handleCacheFetchCompletion(res) {
}
/*
* This is the heart of the demo. Whenever the user clicks the
* button, we'll make simultaneous (or nearly-simultaneous) requests
* of the cache and the network for data. In a real application, this
* would probably happen on page load rather than as a result of
* user action, but to make the page more illustrative and allow
* for user-specified delays, we've got a button.
*/
// getDataButton.addEventListener('click', function handleClick() {
// var networkFetch = fetch(dataUrl, {
// mode: 'cors',
// cache: 'no-cache',
// }).then(function (res) {
// return new Promise(function (resolve, reject) {
// setTimeout(function () {
// try {
// handleFetchCompletion(res);
// resolve();
// } catch (err) {
// reject(err);
// }
// }, 0);
// });
// });
// var cacheFetch = caches.open(cacheName).then(function (cache) {
// return cache.match(dataUrl).then(function (res) {
// var cacheDelay = cach9eDelayInput.value || 0;
// return new Promise(function (resolve, reject) {
// setTimeout(function () {
// try {
// handleCacheFetchCompletion(res);
// resolve();
// } catch (err) {
// reject(err);
// }
// }, cacheDelay);
// });
// }).then(function () {
// var now = Date.now();
// var elapsed = now - cacheFetchStartTime;
// cacheStatus.textContent = 'Success after ' + elapsed + 'ms';
// }).catch(function (err) {
// var now = Date.now();
// var elapsed = now - cacheFetchStartTime;
// cacheStatus.textContent = err + ' after ' + elapsed + 'ms';
// });
// });
// Promise.all([networkFetch, cacheFetch]).then(enableUI);
// });
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment