Enable PWA (#2142) by lukew3

* add pwa files

* Added better 512px icon! (#2146)

* updated icon

Co-authored-by: Estebene <49330942+Estebene@users.noreply.github.com>
Co-authored-by: Jack <bartnikjack@gmail.com>

static/index.html

@@ -54,6 +54,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <link rel="manifest" href="manifest.json" />
     <meta name="name" content="Monkeytype" />
     <meta name="image" content="https://monkeytype.com/mtsocial.png" />
     <meta
@@ -94,6 +95,11 @@
       id="adScript"
       async
     ></script>
+    <script>
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("sw.js");
+      }
+    </script>
   </head>
   <div class="customBackground"></div>
 

static/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "MT",
+  "name": "Monkeytype",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/images/mt-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "background_color": "#323437",
+  "display": "standalone",
+  "theme_color": "#323437"
+}

static/sw.js

@@ -0,0 +1,15 @@
+self.addEventListener("install", function (event) {
+  event.waitUntil(
+    caches.open("sw-cache").then(function (cache) {
+      return cache.add("index.html");
+    })
+  );
+});
+
+self.addEventListener("fetch", function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      return response || fetch(event.request);
+    })
+  );
+});