PWA

index.html

@@ -9,6 +9,7 @@
   <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
   <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
   <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
+  <link rel="manifest" href="/manifest.json">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">
 

js/application.js

@@ -2,3 +2,6 @@
 window.requestAnimationFrame(function () {
   new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager);
 });
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("../sw.js");
+}

manifest.json

@@ -0,0 +1,23 @@
+{
+    "name": "2048",
+    "short_name": "2048",
+    "description": "2048 game",
+    "theme_color": "#FAF8EF",
+    "background_color": "#FAF8EF",
+    "display": "standalone",
+    "scope": "/",
+    "orientation": "portrait",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/favicon.svg",
+            "type": "image/svg+xml",
+            "sizes": "32x32"
+        },
+        {
+            "src": "/meta/apple-touch-icon.png",
+            "type": "image/png",
+            "sizes": "152x152"
+        }
+    ]
+}

sw.js

@@ -0,0 +1,46 @@
+// This code executes in its own worker or thread
+const urlsToCache = [
+    "index.html",
+    "style/main.css",
+    "favicon.svg",
+    "favicon.ico",
+    "/js/animframe_polyfill.js",
+    "/js/application.js",
+    "/js/bind_polyfill.js",
+    "/js/classlist_polyfill.js",
+    "/js/dom.js",
+    "/js/game_manager.js",
+    "/js/grid.js",
+    "/js/html_actuator.js",
+    "/js/in-page.js",
+    "/js/js.js",
+    "/js/keyboard_input_manager.js",
+    "/js/local_storage_manager.js",
+    "/js/tile.js",
+    "/meta/apple-touch-icon.png",
+    "/meta/apple-touch-startup-image-640x920.png",
+    "/mata/apple-touch-startup-image-640x1096.png",
+    "/style/fonts/ClearSans-Bold-webfont.woff",
+    "/style/fonts/ClearSans-Regular-webfont.woff",
+    "/style/fonts/clear-sans.css",
+];
+
+self.addEventListener("install", (event) => {
+    event.waitUntil(async () => {
+        const cache = await caches.open("pwa-assets");
+        return cache.addAll(urlsToCache);
+    });
+});
+
+self.addEventListener("activate", (event) => {
+    console.log("Service worker activated");
+});
+
+self.addEventListener("fetch", (event) => {
+    event.respondWith(
+        caches.match(event.request).then((cachedResponse) => {
+            // It can update the cache to serve updated content on the next request
+            return cachedResponse || fetch(event.request);
+        })
+    );
+});