feat: Enable Android PWA support for Dinosaur Game

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="manifest.json">
     <title>Dinosaurio Chrome V2</title>
     <style>
       * {
@@ -257,6 +258,17 @@
         textoScore = document.querySelector(".score");
         dino = document.querySelector(".dino");
         document.addEventListener("keydown", HandleKeyDown);
+        contenedor.addEventListener('touchstart', HandleTouchStart, { passive: true });
+      }
+
+      function HandleTouchStart(ev) {
+        // If the game is over (parado is true), a touch will restart the game.
+        if (parado) {
+          Restart();
+        } else {
+          // If the game is running, a touch will make the dino jump.
+          Saltar();
+        }
       }
 
       function Update() {
@@ -440,5 +452,18 @@
         );
       }
     </script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          navigator.serviceWorker.register('/sw.js')
+            .then(registration => {
+              console.log('ServiceWorker registration successful with scope: ', registration.scope);
+            })
+            .catch(err => {
+              console.log('ServiceWorker registration failed: ', err);
+            });
+        });
+      }
+    </script>
   </body>
 </html>

manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "Dinosaur Game",
+  "short_name": "DinoGame",
+  "description": "A simple dinosaur game that can be played offline.",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#ffe2d1",
+  "theme_color": "#0b0c0a",
+  "icons": [
+    {
+      "src": "/img/dino.png",
+      "sizes": "84x84",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/dino.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/img/dino.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

sw.js

@@ -0,0 +1,69 @@
+const CACHE_NAME = 'dino-game-cache-v1';
+const urlsToCache = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/img/cactus1.png',
+  '/img/cactus2.png',
+  '/img/dino.png',
+  '/img/nube.png',
+  '/img/suelo.png'
+];
+
+self.addEventListener('install', event => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request)
+      .then(response => {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        return fetch(event.request).then(
+          response => {
+            // Check if we received a valid response
+            if(!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+
+            // IMPORTANT: Clone the response. A response is a stream
+            // and because we want the browser to consume the response
+            // as well as the cache consuming the response, we need
+            // to clone it so we have two streams.
+            var responseToCache = response.clone();
+
+            caches.open(CACHE_NAME)
+              .then(cache => {
+                cache.put(event.request, responseToCache);
+              });
+
+            return response;
+          }
+        );
+      })
+    );
+});
+
+self.addEventListener('activate', event => {
+  const cacheWhitelist = [CACHE_NAME];
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});