Merge pull request #401 from acs3ss/make-pwa

Make PWA installable - with icons!
acs3ss · Nov 18, 2023 · 232c0d9 · 232c0d9
2 parents f5fe1dc + 39a1af5
commit 232c0d9
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="description" content="24 card game solver">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="color-scheme" content="light dark">
-    <link rel="icon" href="favicon.ico">
+    <link rel="icon" href="/public/icons/512.png">
     <title>24 Solver</title>
   </head>
   <body class="container-fluid px-0">

diff --git a/public/icons/128.png b/public/icons/128.png
diff --git a/public/icons/144.png b/public/icons/144.png
diff --git a/public/icons/192.png b/public/icons/192.png
diff --git a/public/icons/512.png b/public/icons/512.png
diff --git a/public/icons/72.png b/public/icons/72.png
diff --git a/vite.config.js b/vite.config.js
@@ -7,9 +7,44 @@ export default defineConfig({
   plugins: [
     vue(),
     VitePWA({
-      manifest: false, // Not a PWA (yet!)
+      manifest: {
+        name: "24 Solver",
+        short_name: "24 Solver",
+        start_url: "./",
+        display: "standalone",
+        background_color: "black",
+        lang: "en",
+        scope: "./",
+        icons: [
+          {
+            src: "/icons/72.png",
+            sizes: "72x72",
+            type: "image/png",
+          },
+          {
+            src: "/icons/128.png",
+            sizes: "128x128",
+            type: "image/png",
+          },
+          {
+            src: "/icons/144.png",
+            sizes: "144x144",
+            type: "image/png",
+          },
+          {
+            src: "/icons/192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/icons/512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+      },
       workbox: {
-        globPatterns: ["**/*.{js,css,html,ico,svg}"],
+        globPatterns: ["**/*.{js,css,html,ico,svg,png}"],
       },
     }),
   ],