4 files changed, 80 insertions, 1 deletions
diff --git a/public/index.html b/public/index.html
index 090b0d5..c921a87 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,8 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" sizes="16x16" href="./which-logo-64.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#00796b" />
+    <meta name="description" content="Social webapp based on choosing between two options." />
+    <link rel="icon" type="image/png" href="./which-logo-64.png" />
+    <link rel="apple-touch-icon" href="./which-logo-144.png" />
+    <link rel="manifest" href="./manifest.json" />
     <title>Which</title>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
@@ -40,5 +44,12 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('./service-worker.js')
+        })
+      }
+    </script>
   </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..aed7ee3
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Which",
+  "name": "Which",
+  "icons": [
+    {
+      "src": "which-logo-144.png",
+      "type": "image/png",
+      "sizes": "144x144",
+      "purpose": "maskable"
+    }
+  ],
+  "display": "standalone",
+  "theme_color": "#00796b",
+  "background_color": "#ffffff"
+}
diff --git a/public/service-worker.js b/public/service-worker.js
new file mode 100644
index 0000000..ddab607
--- /dev/null
+++ b/public/service-worker.js
@@ -0,0 +1,53 @@
+const CACHE_NAME = 'v1.2.5'; // Per-version requests cache
+const IMAGES_CACHE_NAME = 'images' // Long-term images cache
+
+const isS3Url = url => url.includes('amazonaws.com');
+
+this.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => cache.addAll(['index.html']))
+      .catch(e => console.log(e))
+  );
+})
+
+this.addEventListener('fetch', event => {
+  if (isS3Url(event.request.url)) {
+    event.respondWith(
+      caches.open(IMAGES_CACHE_NAME)
+        .then(cache => cache.match(event.request)
+          .then(match => match || fetch(event.request)
+            .then(response => {
+              cache.put(event.request, response.clone());
+              return response;
+            })
+          )
+          .catch(e => console.log(`Error ${e}`))
+        )
+    );
+  } else {
+    event.respondWith(
+      caches.open(CACHE_NAME)
+        .then(cache => fetch(event.request)
+          .then(response => {
+            cache.put(event.request, response.clone());
+            return response;
+          })
+          .catch(() => cache.match(event.request))
+        )
+    );
+  }
+});
+
+this.addEventListener('activate', event => {
+  const cacheWhiteList = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys()
+      .then(keys => Promise.all(
+        keys.map(key => {
+          if (cacheWhiteList.indexOf(key) === -1) return caches.delete(key);
+        })
+      ))
+  );
+});
+
diff --git a/public/which-logo-144.png b/public/which-logo-144.png
new file mode 100644
index 0000000..c51c498
--- /dev/null
+++ b/public/which-logo-144.png