Commit 029baae5 authored by mdsecurity's avatar mdsecurity
Browse files

Performance Improvements

improved service worker(still needs work)
cached facilities in local storage (still needs work)
both the service worker and local storage caching need a good way to check if there is a change in the data so ill work on this next time
parent 81fc8086
......@@ -22,7 +22,7 @@
"styles.scss"
],
"scripts": [
"sw-loader.js"
"./sw-loader.js"
],
"environments": {
"source": "environments/environment.ts",
......
......@@ -21,8 +21,10 @@ export class ContextBarComponent implements OnInit {
);
}
tempf() {
if(localStorage.getItem('facilities')){
console.log(localStorage.getItem('facilities'))
}else{
localStorage.setItem('facilities','hi');
}
}
}
......@@ -27,8 +27,7 @@ export class TimeRangeComponent implements OnInit {
// }
}
ngOnChanges(change: SimpleChange) {
console.log('changed');
this.days = [];
this.days = [];
for (let i = 0; i < this.place.main_schedule_times.length; i++) {
for (let e = 0; e < this.place.main_schedule_times.length; e++) {
if (this.place.main_schedule_times[e].start_day === i) {
......
......@@ -30,16 +30,25 @@ export class DataProviderService {
} else if (this.placesObs) {
return this.placesObs;
} else {
this.placesObs = this.http.get(this.Url)
.map((data) => {
this.placesObs = null;
this.places = this.extractData(data);
this.contextPlace = this.places[0];
// console.log(this.contextPlace);
return this.places;
})
.catch(this.handleError).share();
return this.placesObs;
const facilities = localStorage.getItem('facilities');
if (facilities){
this.places = this.extractData(JSON.parse(facilities));
this.placesObs = Observable.of(this.places);
return this.placesObs;
} else {
this.placesObs = this.http.get(this.Url)
.map((data) => {
this.placesObs = null;
data = data.json();
this.places = this.extractData(data);
this.contextPlace = this.places[0];
localStorage.setItem('facilities',JSON.stringify(data));
// console.log(this.contextPlace);
return this.places;
})
.catch(this.handleError).share();
return this.placesObs;
}
}
}
getContext(): Observable<Place> {
......@@ -49,7 +58,7 @@ export class DataProviderService {
this.contextPlace = place;
this.contextSubj.next(place);
}
private extractData(res: Response): Place[] {
private extractData(data: any): Place[] {
const parseTime = function (time: string): Time {
const timeArr = time.split(':');
const hour = Number(timeArr[0]);
......@@ -58,7 +67,7 @@ export class DataProviderService {
return new Time(hour, minute, second);
}
const places: Place[] = [];
const data = res.json();
// const data = res.json();
for (let i = 0; i < data.length; i++) {
const main_schedule_times: Day[] = [];
......
var CACHE_NAME = 'my-site-cache-v1';
var CACHE_NAME = 'whats-open-cache';
var urlsToCache = [
'/',
'/assets/Bking.jpg'
'/',
'/assets/Bking.jpg',
'/inline.bundle.js',
'/polyfills.bundle.js',
'/scripts.bundle.js',
'/styles.bundle.js',
'/vendor.bundle.js',
'/main.bundle.js'
];
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('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) {
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;
// 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 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;
}
);
})
// 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;
}
);
// }
})
);
});
// 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) {
self.addEventListener('activate', function (event) {
var cacheWhitelist = ['pages-cache-v1'];
// var cacheWhitelist = ['whats-open-cache'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
// event.waitUntil(
// caches.keys().then(function (cacheNames) {
// return Promise.all(
// cacheNames.map(function (cacheName) {
// if (cacheWhitelist.indexOf(cacheName) === -1) {
// return caches.delete(cacheName);
// }
// })
// );
// })
// );
});
// 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