briano1905 · Krickew · Jul 7, 2019 · Jul 7, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@
 
 ![typings.gg](img/typings-screen-shot.png)
 
+## Install application
+
+typings.gg can be installed as a standalone application from browsers that support PWA. If your browser supports PWA there will be a install button available in the bottom of the page. To install click the install button and accept the install prompt and... thats it! You can now enjoy typings.gg even when you are offline!
+
 ## theme
 
 type the theme code for example `dracula` in the text box then hit [ windows: `alt` + `t` ], [ mac: `cmd` + `ctrl`+`t` ] or [ linux: `super` + `ctrl` + `t` ]

diff --git a/img/favicon.png b/img/favicon.png
diff --git a/img/icons/icon-128x128.png b/img/icons/icon-128x128.png
diff --git a/img/icons/icon-144x144.png b/img/icons/icon-144x144.png
diff --git a/img/icons/icon-152x152.png b/img/icons/icon-152x152.png
diff --git a/img/icons/icon-192x192.png b/img/icons/icon-192x192.png
diff --git a/img/icons/icon-384x384.png b/img/icons/icon-384x384.png
diff --git a/img/icons/icon-512x512.png b/img/icons/icon-512x512.png
diff --git a/img/icons/icon-72x72.png b/img/icons/icon-72x72.png
diff --git a/img/icons/icon-96x96.png b/img/icons/icon-96x96.png
diff --git a/index.html b/index.html
@@ -19,6 +19,8 @@
     <meta name="description" content="typings.gg is a sleek and modern typing test website. it support many custom themes" />
     <link rel="stylesheet" href="style.css" />
     <link id="theme" rel="stylesheet" href="themes/light.css" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
   </head>
   <body>
     <h2 id="header">typings</h2>
@@ -58,7 +60,15 @@ <h2 id="header">typings</h2>
         </div>
       </div>
     </div>
-    <a id="footer" href="https://github.com/briano1905/typings#typings" target="_blank">user guide</a>
+    <div id="footer-content">
+      <div id="footer" class="install-fields">
+        <p id="install-button" onclick="">install</p>
+        <p id="spacer">-</p>
+      </div>
+      <div>
+        <a id="footer" href="https://github.com/briano1905/typings#typings" target="_blank">user guide</a>
+      </div>
+    </div>
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,6 +1,10 @@
-// Get document element
-const textDisplay = document.querySelector('#text-display');
-const inputField = document.querySelector('#input-field');
+window.addEventListener('beforeinstallprompt', beforeInstallPrompt);
+
+// document elements
+let textDisplay;
+let inputField;
+let installFields;
+let installButton;
 
 // Initialize typing mode variables
 let typingMode = 'wordcount';
@@ -16,14 +20,54 @@ let startDate = 0;
 let timer;
 let timerActive = false;
 let punctuation = false;
+let installPrompt;
+
+
+function initPage() {
+  // Register service worker for PWA 
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js');
+  };
+
+  // Get document element
+  textDisplay = document.querySelector('#text-display');
+  inputField = document.querySelector('#input-field');
+  installFields = document.querySelector('.install-fields');
+  installButton = document.querySelector('#install-button');
+
+  // Get cookies
+  getCookie('theme') === '' ? setTheme('light') : setTheme(getCookie('theme'));
+  getCookie('language') === '' ? setLanguage('english') : setLanguage(getCookie('language'));
+  getCookie('wordCount') === '' ? setWordCount(50) : setWordCount(getCookie('wordCount'));
+  getCookie('timeCount') === '' ? setTimeCount(60) : setTimeCount(getCookie('timeCount'));
+  getCookie('typingMode') === '' ? setTypingMode('wordcount') : setTypingMode(getCookie('typingMode'));
+  getCookie('punctuation') === '' ? setPunctuation('false') : setPunctuation(getCookie('punctuation'));
+
+  // add event listeners
+  addEventListeners();
+}
+
+function addEventListeners() {
+  inputField.addEventListener('keydown', inputKeyDown);
+}
 
-// Get cookies
-getCookie('theme') === '' ? setTheme('light') : setTheme(getCookie('theme'));
-getCookie('language') === '' ? setLanguage('english') : setLanguage(getCookie('language'));
-getCookie('wordCount') === '' ? setWordCount(50) : setWordCount(getCookie('wordCount'));
-getCookie('timeCount') === '' ? setTimeCount(60) : setTimeCount(getCookie('timeCount'));
-getCookie('typingMode') === '' ? setTypingMode('wordcount') : setTypingMode(getCookie('typingMode'));
-getCookie('punctuation') === '' ? setPunctuation('false') : setPunctuation(getCookie('punctuation'));
+function beforeInstallPrompt(e) {
+  e.preventDefault(); // prevent install prompt to automatically show up on page load
+  installPrompt = e; // store the event
+  installFields.style.display = 'inherit'; // view the install button
+
+  installPrompt.userChoice.then((choiceResult) => {
+    // reset install button on accepted install
+    if (choiceResult.outcome === 'accepted') {
+      installFields.style.display = 'none';
+    }
+  });
+
+  // Prompt the user to install och click
+  installButton.addEventListener('click', (e) => {
+    installPrompt.prompt();
+  });
+};
 
 // Find a list of words and display it to textDisplay
 function setText() {
@@ -106,7 +150,7 @@ function showText() {
 }
 
 // Key is pressed in input field
-inputField.addEventListener('keydown', e => {
+function inputKeyDown(e) {
   // Add wrong class to input field
   switch (typingMode) {
     case 'wordcount':
@@ -199,7 +243,7 @@ inputField.addEventListener('keydown', e => {
       showResult();
     }
   }
-});
+};
 
 // Calculate and display result
 function showResult() {
@@ -357,3 +401,5 @@ function getCookie(cname) {
   }
   return '';
 }
+
+window.onload = initPage;
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,53 @@
+{
+  "name": "typings",
+  "short_name": "typings",
+  "theme_color": "#fafafa",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "orientation": "landscape",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "img/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "img/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}
diff --git a/style.css b/style.css
@@ -70,7 +70,27 @@ body {
   cursor: pointer;
 }
 
-#footer {
+#footer-content {
   margin-bottom: 0.4rem;
+  display: flex;
+}
+
+#footer-content > * {
+  display: flex;
+}
+
+#install-button {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+#spacer {
+  margin: 0;
+  padding: 0 0.6rem 0 0.6rem;
+}
+
+#footer {
   text-decoration: none;
+  text-align: center;
 }
diff --git a/sw.js b/sw.js
@@ -0,0 +1,58 @@
+var cacheStorageName = 'typings.gg-pwa-cache';
+
+var filesToCache = [
+  'index.html',
+  'main.js',
+  'style.css',
+  '/texts/random.json',
+  '/themes/aurora.css',
+  '/themes/burgundy.css',
+  '/themes/carbon.css',
+  '/themes/dark.css',
+  '/themes/denim.css',
+  '/themes/dracula.css',
+  '/themes/eclipse.css',
+  '/themes/hyperfuse.css',
+  '/themes/light.css',
+  '/themes/mizu.css',
+  '/themes/moderndolch.css',
+  '/themes/mrsleeves.css',
+  '/themes/nautilus.css',
+  '/themes/nord.css',
+  '/themes/oblivion.css',
+  '/themes/olivia.css',
+  '/themes/phantom.css',
+  '/themes/rama.css',
+  '/themes/serika.css',
+  '/themes/solarizeddark.css',
+  '/themes/solarizedlight.css',
+  '/themes/vilebloom.css',
+  '/themes/yuri.css',
+];
+
+// Install event for service worker
+self.addEventListener('install', function (e) {
+  console.log('[Service Worker] Service Worker installed');
+  e.waitUntil(
+    caches.open(cacheStorageName).then(function (cache) {
+      console.log('[Service Worker] Cached necessary files for offline use');
+      return cache.addAll(filesToCache);
+    })
+  );
+});
+
+// Fetch event for retrieving cached data
+self.addEventListener('fetch', function (e) {
+  e.respondWith(
+    caches.match(e.request).then(function (r) {
+      console.debug('[Service Worker] Fetching resource: ' + e.request.url);
+      return r || fetch(e.request).then(function (response) {
+        return caches.open(cacheStorageName).then(function (cache) {
+          console.log('[Service Worker] Caching new resource: ' + e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});