refactor

assets/service-worker.js

@@ -19,10 +19,11 @@ self.addEventListener("install", function (e) {
   );
 });
 
-self.addEventListener("fetch", function (event) {
-  event.respondWith(
-    caches.match(event.request).then(function (response) {
-      return response || fetch(event.request);
+self.addEventListener("fetch", function (e) {
+  console.log("loading:", e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function (response) {
+      return response || fetch(e.request);
     })
   );
 });

docs/service-worker.js

@@ -19,10 +19,11 @@ self.addEventListener("install", function (e) {
   );
 });
 
-self.addEventListener("fetch", function (event) {
-  event.respondWith(
-    caches.match(event.request).then(function (response) {
-      return response || fetch(event.request);
+self.addEventListener("fetch", function (e) {
+  console.log("loading:", e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function (response) {
+      return response || fetch(e.request);
     })
   );
 });

docs/styles/github.css

@@ -5,18 +5,20 @@
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
-  -webkit-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
-  -moz-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
-  box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
   color: rgba(255, 255, 255, 0.90);
   display: block;
   padding: .6em 3.5em;
   position: absolute;
   font: bold .82em "Open Sans";
   text-align: center;
   text-decoration: none;
-  text-shadow: 1px -1px 8px rgba(0, 0, 0, 0.60);
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+  transition: background-color 0.2s ease-out;
+  outline: none;
+}
+
+.ribbon.highlighted {
+  background-color: #b2e200;
 }

src/homescreen.ts

@@ -1,4 +1,4 @@
-export type PromptEvent = Event & { prompt(): void };
+export type PromptEvent = Event & { prompt(): void, userChoice: Promise<any> };
 
 export class Homescreen {
   promptEvent: PromptEvent;
@@ -21,8 +21,9 @@ export class Homescreen {
     });
   }
 
-  prompt() {
+  async prompt() {
     this.promptEvent.prompt();
+    return await this.promptEvent.userChoice;
   }
 }
 

src/index.ts

@@ -46,9 +46,30 @@ async function init() {
   jsGBCui.loading = false;
 
   homescreen.bind().then(() => {
-    ask();
+    setAddToHomescreen();
   });
 
+  const ribbonElement = document.querySelector(".ribbon") as HTMLElement;
+  let ribbonText = ribbonElement.textContent;
+
+  function setAddToHomescreen() {
+    ribbonElement.textContent = "Add to Homescreen";
+    ribbonElement.addEventListener("click", addToHomescreen);
+    ribbonElement.classList.add("highlighted");
+  }
+
+  function unsetAddToHomescreen() {
+    ribbonElement.textContent = ribbonText;
+    ribbonElement.removeEventListener("click", addToHomescreen);
+    ribbonElement.classList.remove("highlighted");
+  }
+
+  async function addToHomescreen(e) {
+    e.preventDefault();
+    await homescreen.prompt();
+    unsetAddToHomescreen();
+  }
+
   function toggleFullscreen() {
     if (fullscreen.isActive) {
       Fullscreen.exitFullscreen();
@@ -58,13 +79,4 @@ async function init() {
       pointerLock.requestPointerLock();
     }
   }
-}
-
-function ask() {
-  const element = document.querySelector(".ribbon") as HTMLElement;
-  element.textContent = "Add to Homescreen";
-  element.addEventListener("click", e => {
-    e.preventDefault();
-    homescreen.prompt();
-  });
 }

styles/github.css

@@ -5,18 +5,20 @@
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   transform: rotate(-45deg);
-  -webkit-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
-  -moz-box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
-  box-shadow: 0 0 0 1px #1d212e inset, 0 0 2px 1px #fff inset, 0 0 1em #888;
   color: rgba(255, 255, 255, 0.90);
   display: block;
   padding: .6em 3.5em;
   position: absolute;
   font: bold .82em "Open Sans";
   text-align: center;
   text-decoration: none;
-  text-shadow: 1px -1px 8px rgba(0, 0, 0, 0.60);
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+  transition: background-color 0.2s ease-out;
+  outline: none;
+}
+
+.ribbon.highlighted {
+  background-color: #b2e200;
 }