Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
5e038c66
Commit
5e038c66
authored
Feb 26, 2017
by
mdsecurity
Browse files
service worker order changes
sw now serves from cache then asynchronously updates cache and serves new changes
parent
029baae5
Changes
1
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
(
ev
en
t
)
{
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);
// });
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment