saving backup of add-post (to idb) for offline or posting failure

Author: getify

web/add-post.html

@@ -32,6 +32,7 @@ <h1>Add Post</h1>
 		</p>
 	</main>
 
+	<script src="/js/external/idb-keyval-iife.min.js"></script>
 	<script src="/js/blog.js"></script>
 	<script src="/js/add-post.js"></script>
 </body>

web/js/add-post.js

@@ -10,19 +10,42 @@
 
 	// **********************************
 
-	function ready() {
+	async function ready() {
 		titleInput = document.getElementById("new-title");
 		postInput = document.getElementById("new-post");
 		addPostBtn = document.getElementById("btn-add-post");
 
 		addPostBtn.addEventListener("click",addPost,false);
+		titleInput.addEventListener("change",backupPost,false);
+		postInput.addEventListener("change",backupPost,false);
+
+		// restore a backup?
+		var addPostBackup = await idbKeyval.get("add-post-backup");
+		if (addPostBackup) {
+			titleInput.value = addPostBackup.title || "";
+			postInput.value = addPostBackup.post || "";
+		}
+	}
+
+	// save backup of post (in case posting fails or offline)
+	async function backupPost() {
+		await idbKeyval.set("add-post-backup",{
+			title: titleInput.value,
+			post: postInput.value
+		});
 	}
 
 	async function addPost() {
 		if (
 			titleInput.value.length > 0 &&
 			postInput.value.length > 0
 		) {
+			// don't try posting while offline
+			if (!isBlogOnline()) {
+				alert("You seem to be offline currently. Please try posting once you come back online.");
+				return;
+			}
+
 			try {
 				let res = await fetch("/api/add-post",{
 					method: "POST",

web/js/blog.js

@@ -1,4 +1,4 @@
-(function Blog(){
+(function Blog(global){
 	"use strict";
 
 	var offlineIcon;
@@ -12,6 +12,8 @@
 		initServiceWorker().catch(console.error);
 	}
 
+	global.isBlogOnline = isBlogOnline;
+
 	document.addEventListener("DOMContentLoaded",ready,false);
 
 
@@ -36,6 +38,10 @@
 		},false);
 	}
 
+	function isBlogOnline() {
+		return isOnline;
+	}
+
 	async function initServiceWorker() {
 		swRegistration = await navigator.serviceWorker.register("/sw.js",{
 			updateViaCache: "none",
@@ -82,4 +88,4 @@
 		}
 	}
 
-})();
+})(window);

web/js/sw.js

@@ -1,6 +1,8 @@
 "use strict";
 
-var version = 7;
+importScripts("/js/external/idb-keyval-iife.min.js");
+
+var version = 8;
 var isOnline = true;
 var isLoggedIn = false;
 var cacheName = `ramblings-${version}`;
@@ -19,6 +21,7 @@ var urlsToCache = {
 		"/js/home.js",
 		"/js/login.js",
 		"/js/add-post.js",
+		"/js/external/idb-keyval-iife.min.js",
 		"/images/logo.gif",
 		"/images/offline.png"
 	]
@@ -242,6 +245,10 @@ async function router(req) {
 				if (req.method == "GET") {
 					await cache.put(reqURL,res.clone());
 				}
+				// clear offline-backup of successful post?
+				else if (reqURL == "/api/add-post") {
+					await idbKeyval.del("add-post-backup");
+				}
 				return res;
 			}
 
@@ -370,6 +377,9 @@ async function router(req) {
 					if (!res.headers.get("X-Not-Found")) {
 						await cache.put(reqURL,res.clone());
 					}
+					else {
+						await cache.delete(reqURL);
+					}
 					return res;
 				}