feat: transform in to the pwa

psywave-games · Nov 2, 2023 · 777e427 · 777e427
1 parent 7cdafd3
commit 777e427
Show file tree

Hide file tree

Showing 10 changed files with 139 additions and 2 deletions.
diff --git a/fake_npm_build.sh b/fake_npm_build.sh
@@ -2,5 +2,8 @@
 mkdir -p html
 cp ./bin/*.nes ./html
 cp ./res/*.ico ./html
+cp ./res/*.png ./html
+cp ./res/*.js ./html
 cp ./res/index.html ./html
+cp ./manifest.json ./html
 echo '<!DOCTYPE html><html><head><meta http-equiv="refresh" content="1;url=https://psywave-games.github.io/coco-battle-royale-2/"></head></html>' > ./html/404.html
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,76 @@
+{
+    "id": "coco-battle-royale",
+    "name": "Coco Battle Royale 2",
+    "short_name": "Kokobatoru2",
+    "description": "Coco Battle Royale II ココバトル (kokobatoru) 2 is a homebrew game for nintendo years 80 console, distributed as free software.",
+    "start_url": "/coco-battle-royale/",
+    "scope": "https://psywave-games.github.io/coco-battle-royale/",
+    "display": "standalone",
+    "dir": "ltr",
+    "lang": "en",
+    "background_color": "#000000",
+    "theme_color": "#000000",
+    "orientation": "any",
+    "launch_handler": {
+        "client_mode": "focus-existing"
+    },
+    "prefer_related_applications": false,
+    "related_applications": [
+    ],
+    "edge_side_panel": {
+        "preferred_width": 400
+    },
+    "categories": [
+      "games"
+    ],
+    "icons": [
+        {
+            "src": "/coco-battle-royale/coco-144.png",
+            "sizes": "144x144",
+            "purpose": "any",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-192.png",
+            "sizes": "192x192",
+            "purpose": "any",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-256.png",
+            "sizes": "256x256",
+            "purpose": "maskable",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-512.png",
+            "sizes": "512x512",
+            "purpose": "any",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-144.png",
+            "sizes": "144x144",
+            "purpose": "maskable",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-192.png",
+            "sizes": "192x192",
+            "purpose": "maskable",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-256.png",
+            "sizes": "256x256",
+            "purpose": "maskable",
+            "type": "image/png"
+        },
+        {
+            "src": "/coco-battle-royale/coco-512.png",
+            "sizes": "512x512",
+            "purpose": "maskable",
+            "type": "image/png"
+        }
+    ]
+}
diff --git a/res/coco-144.png b/res/coco-144.png
diff --git a/res/coco-192.png b/res/coco-192.png
diff --git a/res/coco-256.png b/res/coco-256.png
diff --git a/res/coco-32.png b/res/coco-32.png
diff --git a/res/coco-512.png b/res/coco-512.png
diff --git a/res/coco-banner.png b/res/coco-banner.png
diff --git a/res/index.html b/res/index.html
@@ -2,19 +2,21 @@
 <html lang="en">
   <head>
     <title>Coco Battle Royale 2</title>
+    <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <meta name="theme-color" content="#000000"/>
     <meta name="title" content="Coco Battle Royale 2" />
     <meta name="description" content="Coco Battle Royale II ココバトル (kokobatoru) 2 is a homebrew game for nintendo years 80 console, distributed as free software. " />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://metatags.io/" />
     <meta property="og:title" content="Coco Battle Royale 2" />
     <meta property="og:description" content="Coco Battle Royale II ココバトル (kokobatoru) 2 is a homebrew game for nintendo years 80 console, distributed as free software. " />
-    <meta property="og:image" content="https://metatags.io/images/meta-tags.png" />
+    <meta property="og:image" content="https://psywave-games.github.io/coco-battle-royale-2/coco-banner.png" />
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://metatags.io/" />
     <meta property="twitter:title" content="Coco Battle Royale 2" />
     <meta property="twitter:description" content="Coco Battle Royale II ココバトル (kokobatoru) 2 is a homebrew game for nintendo years 80 console, distributed as free software. " />
-    <meta property="twitter:image" content="https://metatags.io/images/meta-tags.png" />
+    <meta property="twitter:image" content="https://psywave-games.github.io/coco-battle-royale-2/coco-banner.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
         body {
@@ -118,5 +120,19 @@
         });
     })
     </script>
+    <script>
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker
+            .register('pwa.js')
+            .then((registration) => {
+                console.log('Service Worker registered with scope:', registration.scope)
+            })
+            .catch((error) => {
+                console.warn('Service Worker registration failed:', error)
+            })
+        })
+    }
+    </script>
   </body>
 </html>
diff --git a/res/pwa.js b/res/pwa.js
@@ -0,0 +1,42 @@
+const CACHE_NAME = 'kokobatoru-2';
+
+const urlsToCache = [
+    'index.html',
+    'favicon.ico',
+    'fceux.js',
+    'fceux.wasm',
+    'cocobattleroyale.nes',
+    'galinharoyale.nes',
+    'kokobatoru.nes'
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      if (response || !event.request) {
+        return response;
+      }
+      return fetch(event.request).then((fetchResponse) => {
+        if (!fetchResponse || fetchResponse.status !== 200 || fetchResponse.type !== 'basic') {
+          return fetchResponse;
+        }
+
+        const responseToCache = fetchResponse.clone();
+
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
+        });
+
+        return fetchResponse;
+      });
+    })
+  );
+});