Improved Cache Size Updating

example/views/about.html

@@ -4,6 +4,7 @@ <h1>About</h1>
 	<li>The navbar is not changed between pages. That means that while the rest of the page is loading, the navbar stays persistent and doesn't disappear, just like any normal app navbar. This persistence is not just limited to the navbar, anything outside the main changing view (like a persistent header or footer) can also stay across pages.</li>
 	<li>You can serve custom 403 forbidden and 404 not found error messages and pages right from your client, since all routing is done in the client.</li>
 	<li>Caching allows your tApp to be blazingly fast. You can set custom cache size and time limits in your code, and tApp will save loaded pages in the cache so that they load instantly the next time the user navigates to that section of the tApp.</li>
+	<li>This tApp utilizes persistent caching, so after the very first page load, all requests are redirected to the cache until the cache time expires.</li>
 	<li>Routes can be specified to automatically load and cache asynchronously in the background when the user first loads your tApp, making the next page loads instantaneous.</li>
 	<li>tApps can work offline, just like normal apps. Since all server-like routing and computation can be handled in the client through tApp, users can browse the tApp offline. This offline functionality is not fully implemented but will be integrated in a later release of the library.</li>
 </ul>

tApp.js

@@ -6,7 +6,7 @@ class tApp {
 	static started = false;
 	static database;
 	static get version() {
-		return "v0.4.0";
+		return "v0.4.1";
 	}
 	static configure(params) {
 		if(params == null) {
@@ -198,6 +198,25 @@ class tApp {
 		});
 
 	}
+	static updateCacheSize() {
+		return new Promise(async (resolve, reject) => {
+			let cachedData = await tApp.getCachedPages();
+			let keys = Object.keys(cachedData);
+			let size = 0;
+			for(let i = 0; i < keys.length; i++) {
+				size += new Blob([cachedData[keys[i]].data]).size;
+			}
+			while(size > tApp.config.caching.maxBytes) {
+				let num = Math.floor(Math.random() * keys.length);
+				if(num < keys.length) {
+					let removedPage = await tApp.removeCachedPage(keys[num]);
+					size -= new Blob([removedPage.data]).size;
+				}
+			}
+			tApp.cacheSize = size;
+			resolve();
+		});
+	}
 	static get(path) {
 		return new Promise(async (resolve, reject) => {
 			let fullPath = new URL(path, window.location.href).href;
@@ -207,22 +226,11 @@ class tApp {
 				xhr.onreadystatechange = async () => {
 					if (xhr.readyState === 4) {
 						if (xhr.status === 200) {
-							if(cachedPage != null) {
-								tApp.cacheSize -= new Blob([cachedPage.data]).size;
-							}
-							let size = new Blob([xhr.responseText]).size;
-							while(tApp.cacheSize + size > tApp.config.caching.maxBytes) {
-								let keys = await tApp.getCachedPaths();
-								let num = Math.floor(Math.random() * keys.length);
-								if(num < keys.length) {
-									let removedPage = await tApp.removeCachedPage(keys[num]);
-									tApp.cacheSize -= new Blob([removedPage.data]).size;											}
-							}
-							tApp.cacheSize += size;
 							tApp.setCachedPage(fullPath, {
 								data: xhr.responseText,
 								cachedAt: new Date().getTime()
 							});
+							tApp.updateCacheSize();
 							resolve(xhr.responseText);
 						} else {
 							reject({
@@ -306,7 +314,7 @@ class tApp {
 					Object.defineProperty(window, 'IDBKeyRange', {
 						value: window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
 					});
-					let request = window.indexedDB.open("tAppCache", 2);
+					let request = window.indexedDB.open("tAppCache", 4);
 					request.onerror = (event) => {
 						console.warn("tAppWarning: Persistent caching is not available in this browser.");
 						tApp.config.caching.persistent = false;
@@ -316,18 +324,21 @@ class tApp {
 						tApp.updatePage(window.location.hash);
 						tApp.loadBackgroundPages();
 					};
-					request.onsuccess = (event) => {
+					request.onsuccess = async (event) => {
 						tApp.database = request.result;
+						await tApp.updateCacheSize();
 						window.addEventListener("hashchange", () => {
 							tApp.updatePage(window.location.hash);
 						}, false);
 						tApp.updatePage(window.location.hash);
 						tApp.loadBackgroundPages();
-
+						
 					};
 					request.onupgradeneeded = (event) => {
 						tApp.database = request.result;
-						tApp.database.createObjectStore("cachedPages");
+						if(!tApp.database.objectStoreNames.contains("cachedPages")) {
+							tApp.database.createObjectStore("cachedPages");
+						}
 					};
 				} else {
 					window.addEventListener("hashchange", () => {