Added PWA , Installed lib vite-plugin-pwa

index.html

@@ -5,7 +5,12 @@
     <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
+    <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
+    <meta name="theme-color" content="#14475b" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#14475b" media="(prefers-color-scheme: dark)">
+
     <meta
       name="description"
       content="Online database entity-realtionship diagram editor and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
@@ -35,7 +40,6 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
 
-    <link rel="apple-touch-icon" href="/favicon.ico" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"

package.json

@@ -47,7 +47,8 @@
     "postcss": "^8.4.32",
     "prettier": "3.2.5",
     "tailwindcss": "^3.3.6",
-    "vite": "^5.0.11"
+    "vite": "^5.0.11",
+    "vite-plugin-pwa": "^0.20.0"
   },
   "overrides": {
     "follow-redirects": "^1.15.4"

vite.config.js

@@ -1,7 +1,47 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { VitePWA } from "vite-plugin-pwa";
+const manifestForPlugIn = {
+  registerType: "prompt",
+  includeAssests: ["favicon.ico", "apple-touc-icon.png"],
+  manifest: {
+    name: "DrawDB",
+    short_name: "DrawDB",
+    icons: [
+      {
+        src: "/pwa-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/pwa-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/pwa-maskable-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/pwa-maskable-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+    start_url: "/",
+    display: "standalone",
+    background_color: "#14475b",
+    theme_color: "#14475b",
+    description:
+      "Free, simple, and intuitive database design tool and SQL generator.",
+  },
+};
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), VitePWA(manifestForPlugIn)],
+});