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

angular-cli.json

@@ -22,7 +22,7 @@
         "styles.scss"
       ],
       "scripts": [
-        "sw-loader.js"
+        "./sw-loader.js"
       ],
       "environments": {
         "source": "environments/environment.ts",

src/app/context-bar/context-bar.component.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');
+		}
 	}
-
 }

src/app/context-bar/time-range/time-range.component.ts

@@ -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) {

src/app/data-provider.service.ts

@@ -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[] = [];
 

src/sw.js

-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);
+// });