Added text editor PWA support

bit-turtle · Nov 1, 2024 · 9150b60 · 9150b60
1 parent 01e971a
commit 9150b60
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/texteditor.html b/texteditor.html
@@ -2,6 +2,14 @@
 <html>
 <head>
 <title>Text Editor</title>
+
+<!-- PWA -->
+<link rel="manifest" href="texteditor.manifest.json" />
+<!-- ios support -->
+<link rel="apple-touch-icon" href="texteditor.png" />
+<meta name="apple-mobile-web-app-status-bar" content="cornflowerblue" />
+<meta name="theme-color" content="cornflowerblue" />
+
 <style>
 * { margin: 0; }
 html { height: 95%; }
@@ -248,9 +256,9 @@
     el.value += text;
   }
 };
-document.querySelector("#editor").addEventListener("keydown", function(e) {
+textdom.addEventListener("keydown", function(e) {
     var TABKEY = 9;
-    if(e.keyCode == TABKEY) {
+    if(e.keyCode == TABKEY && document.activeElement == textdom) {
         insertAtCursor(this, "\t");
     if(e.preventDefault) {
         e.preventDefault();
@@ -259,6 +267,15 @@
     }
 }, false);
 
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", function() {
+    navigator.serviceWorker
+      .register("/texteditor.service.js")
+      .then(e=>{})
+      .catch(e=>{})
+  })
+}
+
 </script>
 
 </body>

diff --git a/texteditor.manifest.json b/texteditor.manifest.json
@@ -0,0 +1,15 @@
+{
+	"name": "Text Editor",
+	"short_name": "Text",
+	"start_url": "texteditor.html",
+	"display": "standalone",
+	"theme_color": "cornflowerblue",
+	"background_color": "lightblue",
+	"orientation": "portrait-primary",
+	"icons": [
+		{
+			"src": "/texteditor.png",
+			"type": "image/png", "sizes": "72x72"
+		}
+	]
+}
diff --git a/texteditor.png b/texteditor.png
diff --git a/texteditor.service.js b/texteditor.service.js
@@ -0,0 +1,21 @@
+const staticDevCoffee = "dev-coffee-site-v1";
+const assets = [
+	"/texteditor.html",
+	"/texteditor.png"
+];
+
+self.addEventListener("install", installEvent => {
+	installEvent.waitUntil(
+			caches.open(staticDevCoffee).then(cache => {
+			cache.addAll(assets)
+		})
+	)
+});
+
+self.addEventListener("fetch", fetchEvent => {
+	fetchEvent.respondWith(
+		caches.match(fetchEvent.request).then(res => {
+			return res || fetch(fetchEvent.request)
+		})
+	)
+});