Update pwa

z-korp · Nov 13, 2024 · 9a9f59e · 9a9f59e
1 parent a104c62
commit 9a9f59e
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 6 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>zKube</title>
     <meta
       name="description"
       content="Play this fun puzzle game and get rewarded!"
@@ -22,7 +22,36 @@
       content="https://raw.githubusercontent.com/z-korp/zkube/d27a55867176c0e43426fef45e4194a698503ef0/client/public/assets/logo.png"
     />
     <link rel="icon" type="image/svg+xml" href="favicon.ico" />
-    <title>zKube</title>
+
+    <!-- For iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/assets/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/assets/apple-icon-180x180.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="167x167"
+      href="/assets/apple-icon-167x167.png"
+    />
+
+    <!-- For Android -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#080414" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/assets/apple-icon-157x157.png b/client/public/assets/apple-icon-157x157.png
diff --git a/client/public/assets/apple-icon-167x167.png b/client/public/assets/apple-icon-167x167.png
diff --git a/client/public/assets/apple-icon-180x180.png b/client/public/assets/apple-icon-180x180.png
diff --git a/client/public/assets/pwa-192x192.png b/client/public/assets/pwa-192x192.png
diff --git a/client/public/assets/pwa-512x512.png b/client/public/assets/pwa-512x512.png
diff --git a/client/public/assets/pwa-maskable-192x192.png b/client/public/assets/pwa-maskable-192x192.png
diff --git a/client/public/assets/pwa-maskable-512x512.png b/client/public/assets/pwa-maskable-512x512.png
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -20,18 +20,69 @@ export default defineConfig({
       },
       includeAssets: [
         "/assets/favicon.ico",
-        "/assets/apple-touch-icon.png",
-        "/assets/masked-icon.svg",
+        "/assets/pwa-192x192.png",
+        "/assets/pwa-512x512.png",
+        "/assets/pwa-maskable-192x192.png",
+        "/assets/pwa-maskable-512x512.png",
+        "/assets/apple-icon-152x152.png",
+        "/assets/apple-icon-167x167.png",
+        "/assets/apple-icon-180x180.png",
       ],
       manifest: {
         name: "zKube",
         short_name: "zKube",
         description: "Solo strategy block game.",
-        theme_color: "#000000",
-        icons: [],
+        theme_color: "#080414",
+        background_color: "#080414",
+        display: "standalone", // hides browser UI elements
+        orientation: "portrait",
+        icons: [
+          {
+            src: "/assets/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "any",
+          },
+          {
+            src: "/assets/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any",
+          },
+          {
+            src: "/assets/pwa-maskable-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "maskable",
+          },
+          {
+            src: "/assets/pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },
+          {
+            src: "/assets/apple-icon-152x152.png",
+            sizes: "152x152",
+            type: "image/png",
+          },
+          {
+            src: "/assets/apple-icon-167x167.png",
+            sizes: "167x167",
+            type: "image/png",
+          },
+          {
+            src: "/assets/apple-icon-180x180.png",
+            sizes: "180x180",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        id: "zkube",
       },
       workbox: {
         maximumFileSizeToCacheInBytes: 5 * 1024 * 1024, // Set to 5 MiB
+        globPatterns: ["**/*.{js,css,html,ico,png,svg,woff,woff2,ttf,eot}"],
         runtimeCaching: [
           {
             urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
@@ -61,6 +112,54 @@ export default defineConfig({
               },
             },
           },
+          {
+            urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/,
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "images",
+              expiration: {
+                maxEntries: 60,
+                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+              },
+            },
+          },
+          {
+            urlPattern: /\.(?:js|css)$/,
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "static-resources",
+              expiration: {
+                maxEntries: 60,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              },
+            },
+          },
+          {
+            urlPattern: /^https:\/\/api\./,
+            handler: "NetworkFirst",
+            options: {
+              cacheName: "api-cache",
+              networkTimeoutSeconds: 10,
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 5 * 60, // 5 minutes
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
+          {
+            urlPattern: /.*/, // Fallback for everything else
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "fallback-cache",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 24 * 60 * 60, // 24 hours
+              },
+            },
+          },
         ],
       },
     }),