Make good job team a PWA

sburba · Aug 9, 2019 · 1b15351 · 1b15351
1 parent 342cefb
commit 1b15351
Show file tree

Hide file tree

Showing 10 changed files with 482 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,10 @@
     <title>Good Job Team!</title>
     <meta name="viewport" content="width=device-width initial-scale=1" />
     <meta name="description" content="The congratulations we rightly deserve" />
-    <link rel="shortcut icon" href="static/favicon.png" />
+    <meta name="theme-color" content="#2a3340">
+    <link rel="manifest" href="/manifest.webmanifest">
+    <link rel="shortcut icon" href="/static/favicon.png" />
+    <link rel="apple-touch-icon" href="/static/party-icon-apple-touch.png"/>
     <script src="src/index.js" defer></script>
   </head>
   <body>
@@ -28,8 +31,9 @@ <h1 id="sentence-bottom" class="tracking-in">
     </div>
     <img src="./static/yoshiba.png" id="yoshiba" alt="Matt's Dog" />
     <div id="link-list">
-      <button id="new-sentence">another</button>
-      <a id="about" href="https://github.com/sburba/goodjobteam">about</a>
+      <button class="text-button hidden" id="add-to-homescreen">add to homescreen</button>
+      <button class="text-button" id="new-sentence">another</button>
+      <a id="about" target="_blank" href="https://github.com/sburba/goodjobteam">about</a>
     </div>
   </body>
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -0,0 +1,21 @@
+{
+  "short_name": "gooodjob",
+  "name": "Good job, team!",
+  "icons": [
+    {
+      "src": "/static/party-icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/static/party-icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#2a3340",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#2a3340"
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "only-test": "cypress open",
     "test": "start-server-and-test only-start http://localhost:1234 only-test",
     "ci-test": "cypress run --record",
-    "ci":  "start-server-and-test only-start http://localhost:1234 ci-test",
+    "ci": "start-server-and-test only-start http://localhost:1234 ci-test",
     "checkstyle": "prettier --check src/**/*.js index.html",
     "now-build": "yarn run build"
   },
@@ -21,8 +21,13 @@
     "since 2017-06"
   ],
   "devDependencies": {
-    "start-server-and-test": "^1.9.2",
     "cypress": "^3.4.1",
-    "prettier": "^1.18.2"
+    "parcel-plugin-sw-cache": "^0.3.1",
+    "prettier": "^1.18.2",
+    "start-server-and-test": "^1.9.2"
+  },
+  "cache": {
+    "inDev": true,
+    "swDest": "sw.js"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,2 +1,16 @@
 import "./styles.css";
 import "./motivational_sentence.js";
+import "./prompt_add_to_homescreen.js";
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function() {
+    const sw = 'sw.js';
+    navigator.serviceWorker.register(sw).then(function(registration) {
+      // Registration was successful
+      console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }, function(err) {
+      // registration failed :(
+      console.log('ServiceWorker registration failed: ', err);
+    });
+  });
+}
diff --git a/src/prompt_add_to_homescreen.js b/src/prompt_add_to_homescreen.js
@@ -0,0 +1,21 @@
+window.addEventListener("beforeinstallprompt", async e => {
+  if (
+    document.readyState === "complete" ||
+    document.readyState === "loaded" ||
+    document.readyState === "interactive"
+  ) {
+    await revealAddToHomescreenBtn(e);
+  } else {
+    window.addEventListener("DOMContentLoaded", revealAddToHomescreenBtn);
+  }
+});
+
+async function revealAddToHomescreenBtn(beforeInstallPromptEvent) {
+  beforeInstallPromptEvent.preventDefault();
+  let addToHomescreenBtn = document.getElementById("add-to-homescreen");
+  addToHomescreenBtn.classList.remove("hidden");
+  addToHomescreenBtn.addEventListener('click', async () => {
+    addToHomescreenBtn.classList.add('hidden');
+    beforeInstallPromptEvent.prompt();
+  })
+}
diff --git a/src/styles.css b/src/styles.css
@@ -14,6 +14,22 @@ body {
   width: 100%;
 }
 
+#motivational-sentence {
+  font-size: 1vw;
+}
+
+@media screen and (min-width: 320px) {
+  #motivational-sentence {
+    font-size: 4vw;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  #motivational-sentence {
+    font-size: calc(20px + 1vw);
+  }
+}
+
 #motivational-sentence {
   margin: 0;
   position: absolute;
@@ -22,7 +38,6 @@ body {
   text-align: center;
   text-shadow: 0 1px 0.25ex rgba(0, 0, 0, 0.3);
   color: white;
-  font-size: calc(20px + 1vw);
   line-height: calc(1.7em + 0.5vw);
 }
 
@@ -114,7 +129,7 @@ body {
   margin: 0 0.5em;
 }
 
-#new-sentence {
+.text-button {
   background: none;
   color: white;
   border: none;
@@ -124,6 +139,10 @@ body {
   text-decoration: underline;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 html {
   visibility: visible;
   opacity: 1;

diff --git a/static/party-icon-192.png b/static/party-icon-192.png
diff --git a/static/party-icon-512.png b/static/party-icon-512.png
diff --git a/static/party-icon-apple-touch.png b/static/party-icon-apple-touch.png