From d819008df2f832ff8bc3da942e5b1be6fc546079 Mon Sep 17 00:00:00 2001
From: David Reed <reedswork@proton.me>
Date: Sat, 19 Nov 2022 18:02:15 -0500
Subject: [PATCH] rework SW registration

---
 public/404.html         | 13 +++++------
 public/error.js         | 50 +++++++++++++----------------------------
 public/index.css        | 16 ++++++++-----
 public/index.html       |  3 +++
 public/index.js         | 35 ++++++++++++++++-------------
 public/register-sw.html | 15 -------------
 public/register-sw.js   | 30 +++++++++----------------
 7 files changed, 64 insertions(+), 98 deletions(-)
 delete mode 100644 public/register-sw.html

diff --git a/public/404.html b/public/404.html
index b957879..58bf1b1 100644
--- a/public/404.html
+++ b/public/404.html
@@ -28,14 +28,12 @@
     </div>
     <div class="desc left-margin">
       <p>The server could not route your request.</p>
-      <p class="error"></p>
-      <input
-        type="button"
-        class="register-sw"
-        value="Register service worker"
-      />
+      <p id="error"></p>
+      <code id="error-code"></code>
+      <button id="register-sw" value="Register service worker">
+        Register ServiceWorker
+      </button>
     </div>
-
     <footer>
       <a
         title="For privacy implications related to Ultraviolet."
@@ -47,6 +45,7 @@
     </footer>
     <script src="uv/uv.bundle.js"></script>
     <script src="uv/uv.config.js"></script>
+    <script src="register-sw.js"></script>
     <script src="error.js"></script>
   </body>
 </html>
diff --git a/public/error.js b/public/error.js
index 85754fd..3f9e19e 100644
--- a/public/error.js
+++ b/public/error.js
@@ -1,39 +1,19 @@
-const errorContainer = document.querySelector(".error");
-const registerButton = document.querySelector(".register-sw");
-let registrarOpen = false;
+const error = document.querySelector("#error");
+const errorCode = document.querySelector("#error-code");
+const registerButton = document.querySelector("#register-sw");
 
-if (window.location.pathname.startsWith(__uv$config.prefix)) {
-  errorContainer.textContent += "The service worker is not registered. Click the button below to register the service worker.";
-  registerButton.style.display = "block";
+if (location.pathname.startsWith(__uv$config.prefix)) {
+  error.textContent = "Error: The service worker is not registered.";
+  registerButton.classList.add("show");
 }
 
-function registrarResponse(response) {
-  if (response == "success") {
-    registerButton.style.display = "none";
-    let span = document.createElement("span");
-    span.className = "error-green";
-    span.textContent = "\n\nSuccess. Reloading now...";
-    errorContainer.appendChild(span);
-    window.location.reload();
+registerButton.addEventListener("click", async () => {
+  try {
+    await registerSW();
+    location.reload();
+  } catch (err) {
+    error.textContent = "Failed to register service worker.";
+    errorCode.textContent = err.toString();
+    registerButton.classList.remove("show");
   }
-  if (response == "failure")
-    errorContainer.textContent += "\n\nFailed to register service worker.";
-}
-
-registerButton.onclick = () => {
-  if (!registrarOpen) {
-    registrarOpen = true;
-    let registrarFrame = document.createElement("iframe");
-    registrarFrame.style.display = "none";
-    registrarFrame.src = "./register-sw.html";
-    document.body.appendChild(registrarFrame);
-    function messageHandler(event) {
-      window.removeEventListener("message", messageHandler);
-      registrarFrame.removeAttribute("src");
-      document.body.removeChild(registrarFrame);
-      registrarOpen = false;
-      registrarResponse(event.data);
-    }
-    window.addEventListener("message", messageHandler);
-  }
-}
+});
diff --git a/public/index.css b/public/index.css
index e96969c..b373680 100644
--- a/public/index.css
+++ b/public/index.css
@@ -43,16 +43,18 @@ body {
   margin: 0px 16px;
 }
 
-.error {
+#error {
   color: #ff6666 !important;
   white-space: pre-wrap;
 }
 
-.error-green {
-  color: #66ff66 !important;
+#error-code {
+  font-size: 12px;
+  color: #fff;
+  font-family: "Courier New", Courier, monospace;
 }
 
-.register-sw {
+#register-sw {
   color: white;
   background: #555555;
   cursor: pointer;
@@ -64,10 +66,14 @@ body {
   display: none;
 }
 
-.register-sw:active {
+#register-sw:active {
   background: #333333;
 }
 
+#register-sw.show {
+  display: block;
+}
+
 .logo {
   width: 150px;
 }
diff --git a/public/index.html b/public/index.html
index 7870622..b42f44b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -83,6 +83,8 @@
     <form class="flex-center">
       <input placeholder="Search the web freely" />
     </form>
+    <p id="error"></p>
+    <code id="error-code"></code>
     <footer>
       <a
         title="Ultraviolet is a web proxy service maintained by TitaniumNetwork!"
@@ -115,6 +117,7 @@
     </footer>
     <script src="uv/uv.bundle.js"></script>
     <script src="uv/uv.config.js"></script>
+    <script src="register-sw.js"></script>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/public/index.js b/public/index.js
index 0a080a9..753c49b 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,21 +1,7 @@
 const form = document.querySelector("form");
 const input = document.querySelector("input");
-
-form.addEventListener("submit", async (event) => {
-  event.preventDefault();
-  window.navigator.serviceWorker
-    .register("./sw.js", {
-      scope: __uv$config.prefix,
-    })
-    .then(() => {
-      let url = input.value.trim();
-      if (!isUrl(url)) url = "https://www.google.com/search?q=" + url;
-      else if (!(url.startsWith("https://") || url.startsWith("http://")))
-        url = "http://" + url;
-
-      window.location.href = __uv$config.prefix + __uv$config.encodeUrl(url);
-    });
-});
+const error = document.querySelector("#error");
+const errorCode = document.querySelector("#error-code");
 
 function isUrl(val = "") {
   if (
@@ -25,3 +11,20 @@ function isUrl(val = "") {
     return true;
   return false;
 }
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  try {
+    await registerSW();
+  } catch (err) {
+    error.textContent = "Failed to register service worker.";
+    errorCode.textContent = err.toString();
+    throw err;
+  }
+  let url = input.value.trim();
+  if (!isUrl(url)) url = "https://www.google.com/search?q=" + url;
+  else if (!(url.startsWith("https://") || url.startsWith("http://")))
+    url = "http://" + url;
+
+  window.location.href = __uv$config.prefix + __uv$config.encodeUrl(url);
+});
diff --git a/public/register-sw.html b/public/register-sw.html
deleted file mode 100644
index 4b3f5e6..0000000
--- a/public/register-sw.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>Registering Service Worker...</title>
-  </head>
-
-  <body>
-    <h1>Registering Service Worker...</h1>
-    <p id="state"></p>
-    <script src="uv/uv.bundle.js"></script>
-    <script src="uv/uv.config.js"></script>
-    <script src="register-sw.js"></script>
-  </body>
-</html>
diff --git a/public/register-sw.js b/public/register-sw.js
index 8198cd7..6b92f04 100644
--- a/public/register-sw.js
+++ b/public/register-sw.js
@@ -1,22 +1,12 @@
-const stateContainer = document.getElementById("state");
+/**
+ * Global util
+ * Used in 404.html and index.html
+ */
+async function registerSW() {
+  if (!navigator.serviceWorker)
+    throw new Error("Your browser doesn't support service workers.");
 
-function finish(state) {
-  stateContainer.textContent = state;
-  console.log("Registering ultraviolet service worker... " + state);
-  window.parent.postMessage(state, "*");
-}
-
-try {
-  window.navigator.serviceWorker
-    .register("./sw.js", {
-      scope: __uv$config.prefix,
-    })
-    .then(() => {
-      finish("success");
-    })
-    .catch(() => {
-      finish("failure");
-    });
-} catch (e) {
-  finish("failure");
+  await navigator.serviceWorker.register("./sw.js", {
+    scope: __uv$config.prefix,
+  });
 }