rework SW registration

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>
+      <p id="error"></p>
-      <input
+      <code id="error-code"></code>
-        type="button"
+      <button id="register-sw" value="Register service worker">
-        class="register-sw"
+        Register ServiceWorker
-        value="Register service worker"
+      </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>

public/error.js

@@ -1,39 +1,19 @@
-const errorContainer = document.querySelector(".error");
+const error = document.querySelector("#error");
-const registerButton = document.querySelector(".register-sw");
+const errorCode = document.querySelector("#error-code");
-let registrarOpen = false;
+const registerButton = document.querySelector("#register-sw");
 
-if (window.location.pathname.startsWith(__uv$config.prefix)) {
+if (location.pathname.startsWith(__uv$config.prefix)) {
-  errorContainer.textContent += "The service worker is not registered. Click the button below to register the service worker.";
+  error.textContent = "Error: The service worker is not registered.";
-  registerButton.style.display = "block";
+  registerButton.classList.add("show");
 }
 
-function registrarResponse(response) {
+registerButton.addEventListener("click", async () => {
-  if (response == "success") {
+  try {
-    registerButton.style.display = "none";
+    await registerSW();
-    let span = document.createElement("span");
+    location.reload();
-    span.className = "error-green";
+  } catch (err) {
-    span.textContent = "\n\nSuccess. Reloading now...";
+    error.textContent = "Failed to register service worker.";
-    errorContainer.appendChild(span);
+    errorCode.textContent = err.toString();
-    window.location.reload();
+    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);
-  }
-}

public/index.css

@@ -43,16 +43,18 @@ body {
   margin: 0px 16px;
 }
 
-.error {
+#error {
   color: #ff6666 !important;
   white-space: pre-wrap;
 }
 
-.error-green {
+#error-code {
-  color: #66ff66 !important;
+  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;
 }

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>

public/index.js

@@ -1,21 +1,7 @@
 const form = document.querySelector("form");
 const input = document.querySelector("input");
-
+const error = document.querySelector("#error");
-form.addEventListener("submit", async (event) => {
+const errorCode = document.querySelector("#error-code");
-  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);
-    });
-});
 
 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);
+});

public/register-sw.html

@@ -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>

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) {
+  await navigator.serviceWorker.register("./sw.js", {
-  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");
 }