From f771cb36d6b893ad3d3e797610ddaa25040dc777 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Sun, 13 Aug 2023 18:10:17 -0400
Subject: [PATCH] Add PWA section to about page, with install button

Also, improve the electron app section, make the framing more positive.
---
 .vscode/settings.json    |   3 ++
 about.html               |  72 ++++++++++++++++++++++++++++++++++++---
 images/about/monitor.png | Bin 0 -> 144 bytes
 styles/about.css         |   4 ++-
 4 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 images/about/monitor.png

diff --git a/.vscode/settings.json b/.vscode/settings.json
index bcbb7b7..9c332cb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -25,6 +25,7 @@
 		"anypalette",
 		"apng",
 		"APNGs",
+		"appinstalled",
 		"Aragonés",
 		"Asụsụ",
 		"autosave",
@@ -38,6 +39,7 @@
 		"Bahasa",
 		"Bamanankan",
 		"Basa",
+		"beforeinstallprompt",
 		"bepis",
 		"Bgau",
 		"bgcolor",
@@ -361,6 +363,7 @@
 		"Runa",
 		"Rundi",
 		"Sami",
+		"sandboxed",
 		"sandboxing",
 		"Sango",
 		"Sardu",
diff --git a/about.html b/about.html
index c352658..a5fa66c 100644
--- a/about.html
+++ b/about.html
@@ -176,17 +176,48 @@
 		<h2>Desktop Version</h2>
 		<img src="images/about/atombgwht.gif" width="60" height="65" alt="built with Electron" style="float: right;">
 		<p>
-			Now, I don't know why you would want to use this rather than MS Paint, Paint.NET, or Krita,
-			but if you want to, you can <del>download</del> <a href="https://github.com/1j01/jspaint#desktop-app"
-				target="_blank">manually
-				install</a> the desktop version of JS Paint.
+			There is demand for a desktop version of JS Paint.
+			I have put in 99% of the work on this (integration with the file system, wallpaper setting,
+			inter-process communication, etc.), but I have not released it yet.
+		</p>
+		<p>
+			If you are motivated, you can
+			<a href="https://github.com/1j01/jspaint#desktop-app" target="_blank">manually install</a>
+			the desktop app, by cloning the repository and following development setup
+			instructions.
 		</p>
 		<a href="https://github.com/1j01/jspaint/issues/2" target="_blank">
 			<img src="images/about/download5.gif" width="100" height="40" alt="Download">
 			<img src="images/about/conpaint.gif" width="350" height="50" alt="Under Construction">
 		</a>
 	</section>
-
+	<section id="pwa-section">
+		<h2>Progressive Web App</h2>
+		<img src="images/meta/mobipaint.png" width="308" height="193" alt="JS Paint on a phone" style="float: right;">
+		<p>
+			Alternatively, you can install JS Paint as a PWA (Progressive Web App),
+			but this does not <b>yet</b> support offline use
+			(as it doesn't include a Service Worker).
+			It's more like a bookmark (for now), except it runs in a special window.
+		</p>
+		<p>
+			The user interface for installing PWAs differs by browser and operating system.
+		</p>
+		<p>
+			<q>On most desktop browsers, the install prompt is in the URL bar.
+				On mobile, the install prompt is generally found in the menu of browser options.</q>
+			See <a
+				href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing#installing_pwas"
+				target="_blank">
+				Installing PWAs</a> for visual guidance.
+		</p>
+		<button id="install-pwa" hidden style="padding: 10px 30px; margin-bottom: 1em;">
+			<img src="images/about/monitor.png" width="16" height="16" alt="" style="vertical-align: middle;">
+			Install JS Paint
+		</button>
+		<!-- prevent floated image overlapping next section -->
+		<div style="clear: both;"></div>
+	</section>
 	<section id="textual-paint-section">
 		<h2>Textual Paint</h2>
 		<p>
@@ -325,6 +356,37 @@
 		});
 		document.querySelector("#feeding-text").removeAttribute("hidden");
 	</script>
+	<!-- split script to keep above ES5-only -->
+	<script>
+		// PWA install button
+		// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt
+		const installButton = document.querySelector("#install-pwa");
+		let installPrompt = null;
+
+		window.addEventListener("beforeinstallprompt", (event) => {
+			event.preventDefault();
+			installPrompt = event;
+			installButton.removeAttribute("hidden");
+		});
+
+		installButton.addEventListener("click", async () => {
+			if (!installPrompt) {
+				return;
+			}
+			const result = await installPrompt.prompt();
+			console.log(`Install prompt was: ${result.outcome}`);
+			disableInAppInstallPrompt();
+		});
+
+		function disableInAppInstallPrompt() {
+			installPrompt = null;
+			installButton.setAttribute("hidden", "");
+		}
+
+		window.addEventListener("appinstalled", () => {
+			disableInAppInstallPrompt();
+		});
+	</script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/images/about/monitor.png b/images/about/monitor.png
new file mode 100644
index 0000000000000000000000000000000000000000..4984da3c24675a2150f96228e3feeb2dffaf52e9
GIT binary patch
literal 144
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9oB=)|u0R?H8X6k5<i6AfvY1PP
z{DK+&|91(vrU>L3d%8G=RLn^h;N|5_I1#lqi_<wPBZJGCi<w!DX${L7i8Z~BA{~+z
j(hV(HOw7#585+zCPt63T7w>*K1!S<NtDnm{r-UW|>x?8>

literal 0
HcmV?d00001

diff --git a/styles/about.css b/styles/about.css
index a40e7e6..33b6de5 100644
--- a/styles/about.css
+++ b/styles/about.css
@@ -56,8 +56,10 @@ a[href^="https://98.js.org"]:focus #wooden-window-frame {
 	background-repeat: repeat;
 }
 
-#desktop-app-section * {
+#desktop-app-section h2,
+#desktop-app-section p {
 	background-color: yellow;
+	padding: 5px;
 }
 
 .os-icon {