JasonHK · JasonHK · Oct 17, 2018 · Sep 9, 2018 · Sep 9, 2018 · Oct 17, 2018
diff --git a/css/index.css b/css/index.css
diff --git a/css/style.css b/css/style.css
@@ -11,7 +11,9 @@ html, body {
 }
 
 body {
-    background-color: blueviolet;
+    height: 100vh;
+    background: blueviolet;
+    background: linear-gradient(to right, #6100c2, #a100bd);
 }
 
 *[hidden] {
@@ -212,10 +214,11 @@ form#result button#submit {
     font-size: 0.75em;
 }
 
-@media screen and (max-width: 650px), (max-height: 500px) {
+@media screen and (max-width: 620px), (max-height: 500px) {
     body {
         height: auto;
         min-height: 100vh;
+        background: none;
     }
 
     main {

diff --git a/index.html b/index.html
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="Check the UUID of your Minecraft username with a click of a button!">
+        <link rel="manifest" href="manifest.json">
+        <meta name="theme-color" content="#16222a">
         <title>What's my Minecraft UUID?</title>
         <link rel="stylesheet" href="./css/style.css">
         <link rel="stylesheet" href="./css/icons.css">

diff --git a/js/index.js b/js/index.js
@@ -107,4 +107,8 @@ window.addEventListener("DOMContentLoaded", function(event) {
         uuidResult.focus();
         uuidResult.select();
     });
-}, false);
+}, false);
+
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/js/worker.js");
+}
diff --git a/js/worker.js b/js/worker.js
@@ -0,0 +1,57 @@
+var CACHE = "mc-uuid";
+
+// On install, cache some resources.
+self.addEventListener("install", function(evt) {
+    console.log("The service worker is being installed.");
+
+    // Ask the service worker to keep installing until the returning promise
+    // resolves.
+    evt.waitUntil(precache());
+});
+
+// On fetch, use cache but update the entry with the latest contents
+// from the server.
+self.addEventListener("fetch", function(event) {
+    console.log("The service worker is serving the asset.");
+    // You can use `respondWith()` to answer immediately, without waiting for the
+    // network response to reach the service worker...
+    event.respondWith(fromCache(event.request));
+    // ...and `waitUntil()` to prevent the worker from being killed until the
+    // cache is updated.
+    event.waitUntil(update(event.request));
+});
+
+// Open a cache and use `addAll()` with an array of assets to add all of them
+// to the cache. Return a promise resolving when all the assets are added.
+function precache() {
+    return caches.open(CACHE).then(function (cache) {
+        return cache.addAll([
+            "/",
+            "/index.html",
+            "/css",
+            "/font",
+            "/js"
+        ]);
+    });
+}
+
+// Open the cache where the assets were stored and search for the requested
+// resource. Notice that in case of no matching, the promise still resolves
+// but it does with `undefined` as value.
+function fromCache(request) {
+    return caches.open(CACHE).then(function (cache) {
+        return cache.match(request).then(function (matching) {
+        return matching || Promise.reject("no-match");
+        });
+    });
+}
+
+// Update consists in opening the cache, performing a network request and
+// storing the new response data.
+function update(request) {
+    return caches.open(CACHE).then(function (cache) {
+        return fetch(request).then(function (response) {
+        return cache.put(request, response);
+        });
+    });
+}
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,9 @@
+{
+    "name": "What's my Minecraft UUID?",
+    "short_name": "Minecraft UUID",
+    "theme_color": "#2196f3",
+    "background_color": "#2196f3",
+    "display": "standalone",
+    "scope": "https://mc-uuid.jasonhk.net",
+    "start_url": "/"
+}