feat: added PWA config and assets

2024-05-27 18:32:30 +05:30 · 2024-05-27 18:32:30 +05:30 · bfd1d0eb69
commit bfd1d0eb69
parent bdbe96b5f2
43 changed files with 2620 additions and 15 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,6 +3,7 @@
 *.egg-info
 *.swp
 __pycache__
+dev-dist
 tags
 node_modules
 crm/public/frontend
--- a/crm/public/crm_logo.png
+++ b/crm/public/crm_logo.png
--- a/crm/public/manifest/apple-icon-180.png
+++ b/crm/public/manifest/apple-icon-180.png
--- a/crm/public/manifest/apple-splash-1125-2436.jpg
+++ b/crm/public/manifest/apple-splash-1125-2436.jpg
--- a/crm/public/manifest/apple-splash-1136-640.jpg
+++ b/crm/public/manifest/apple-splash-1136-640.jpg
--- a/crm/public/manifest/apple-splash-1170-2532.jpg
+++ b/crm/public/manifest/apple-splash-1170-2532.jpg
--- a/crm/public/manifest/apple-splash-1179-2556.jpg
+++ b/crm/public/manifest/apple-splash-1179-2556.jpg
--- a/crm/public/manifest/apple-splash-1242-2208.jpg
+++ b/crm/public/manifest/apple-splash-1242-2208.jpg
--- a/crm/public/manifest/apple-splash-1242-2688.jpg
+++ b/crm/public/manifest/apple-splash-1242-2688.jpg
--- a/crm/public/manifest/apple-splash-1284-2778.jpg
+++ b/crm/public/manifest/apple-splash-1284-2778.jpg
--- a/crm/public/manifest/apple-splash-1290-2796.jpg
+++ b/crm/public/manifest/apple-splash-1290-2796.jpg
--- a/crm/public/manifest/apple-splash-1334-750.jpg
+++ b/crm/public/manifest/apple-splash-1334-750.jpg
--- a/crm/public/manifest/apple-splash-1488-2266.jpg
+++ b/crm/public/manifest/apple-splash-1488-2266.jpg
--- a/crm/public/manifest/apple-splash-1536-2048.jpg
+++ b/crm/public/manifest/apple-splash-1536-2048.jpg
--- a/crm/public/manifest/apple-splash-1620-2160.jpg
+++ b/crm/public/manifest/apple-splash-1620-2160.jpg
--- a/crm/public/manifest/apple-splash-1640-2360.jpg
+++ b/crm/public/manifest/apple-splash-1640-2360.jpg
--- a/crm/public/manifest/apple-splash-1668-2224.jpg
+++ b/crm/public/manifest/apple-splash-1668-2224.jpg
--- a/crm/public/manifest/apple-splash-1668-2388.jpg
+++ b/crm/public/manifest/apple-splash-1668-2388.jpg
--- a/crm/public/manifest/apple-splash-1792-828.jpg
+++ b/crm/public/manifest/apple-splash-1792-828.jpg
--- a/crm/public/manifest/apple-splash-2048-1536.jpg
+++ b/crm/public/manifest/apple-splash-2048-1536.jpg
--- a/crm/public/manifest/apple-splash-2048-2732.jpg
+++ b/crm/public/manifest/apple-splash-2048-2732.jpg
--- a/crm/public/manifest/apple-splash-2160-1620.jpg
+++ b/crm/public/manifest/apple-splash-2160-1620.jpg
--- a/crm/public/manifest/apple-splash-2208-1242.jpg
+++ b/crm/public/manifest/apple-splash-2208-1242.jpg
--- a/crm/public/manifest/apple-splash-2224-1668.jpg
+++ b/crm/public/manifest/apple-splash-2224-1668.jpg
--- a/crm/public/manifest/apple-splash-2266-1488.jpg
+++ b/crm/public/manifest/apple-splash-2266-1488.jpg
--- a/crm/public/manifest/apple-splash-2360-1640.jpg
+++ b/crm/public/manifest/apple-splash-2360-1640.jpg
--- a/crm/public/manifest/apple-splash-2388-1668.jpg
+++ b/crm/public/manifest/apple-splash-2388-1668.jpg
--- a/crm/public/manifest/apple-splash-2436-1125.jpg
+++ b/crm/public/manifest/apple-splash-2436-1125.jpg
--- a/crm/public/manifest/apple-splash-2532-1170.jpg
+++ b/crm/public/manifest/apple-splash-2532-1170.jpg
--- a/crm/public/manifest/apple-splash-2556-1179.jpg
+++ b/crm/public/manifest/apple-splash-2556-1179.jpg
--- a/crm/public/manifest/apple-splash-2688-1242.jpg
+++ b/crm/public/manifest/apple-splash-2688-1242.jpg
--- a/crm/public/manifest/apple-splash-2732-2048.jpg
+++ b/crm/public/manifest/apple-splash-2732-2048.jpg
--- a/crm/public/manifest/apple-splash-2778-1284.jpg
+++ b/crm/public/manifest/apple-splash-2778-1284.jpg
--- a/crm/public/manifest/apple-splash-2796-1290.jpg
+++ b/crm/public/manifest/apple-splash-2796-1290.jpg
--- a/crm/public/manifest/apple-splash-640-1136.jpg
+++ b/crm/public/manifest/apple-splash-640-1136.jpg
--- a/crm/public/manifest/apple-splash-750-1334.jpg
+++ b/crm/public/manifest/apple-splash-750-1334.jpg
--- a/crm/public/manifest/apple-splash-828-1792.jpg
+++ b/crm/public/manifest/apple-splash-828-1792.jpg
--- a/crm/public/manifest/manifest-icon-192.maskable.png
+++ b/crm/public/manifest/manifest-icon-192.maskable.png
--- a/crm/public/manifest/manifest-icon-512.maskable.png
+++ b/crm/public/manifest/manifest-icon-512.maskable.png
--- a/frontend/index.html
+++ b/frontend/index.html
@ -2,13 +2,177 @@
 <html class="h-full" lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, viewport-fit=cover maximum-scale=1.0, user-scalable=no"
+		/>
    <title>Frappe CRM</title>
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Frappe CRM" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
+
+    <!-- PWA -->
    <link
      rel="icon"
      type="image/png"
      sizes="196x196"
-      href="/assets/crm/crm_logo.png"
+      href="/assets/crm/manifest/apple-icon-180.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="/assets/crm/manifest/apple-icon-180.png"
+    />
+
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2048-2732.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2732-2048.jpg"
+      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1668-2388.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2388-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1536-2048.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2048-1536.jpg"
+      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1668-2224.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2224-1668.jpg"
+      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1620-2160.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2160-1620.jpg"
+      media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1290-2796.jpg"
+      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2796-1290.jpg"
+      media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1179-2556.jpg"
+      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2556-1179.jpg"
+      media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1284-2778.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2778-1284.jpg"
+      media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1170-2532.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2532-1170.jpg"
+      media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1125-2436.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2436-1125.jpg"
+      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1242-2688.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2688-1242.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-828-1792.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1792-828.jpg"
+      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1242-2208.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-2208-1242.jpg"
+      media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-750-1334.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1334-750.jpg"
+      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-640-1136.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+    />
+    <link
+      rel="apple-touch-startup-image"
+      href="/assets/crm/manifest/apple-splash-1136-640.jpg"
+      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    />
  </head>
  <body class="sm:overscroll-y-none no-scrollbar">
--- a/frontend/package.json
+++ b/frontend/package.json
@ -29,6 +29,7 @@
    "@vitejs/plugin-vue": "^4.2.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.5",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vite-plugin-pwa": "^0.15.0"
  }
 }
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import frappeui from 'frappe-ui/vite'
+import { VitePWA } from 'vite-plugin-pwa'

 // https://vitejs.dev/config/
 export default defineConfig({
@ -12,6 +13,44 @@ export default defineConfig({
        propsDestructure: true,
      },
    }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+      manifest: {
+        display: 'standalone',
+        name: 'Frappe CRM',
+        short_name: 'Frappe CRM',
+        description: 'Modern & 100% Open-source CRM tool to supercharge your sales operations',
+        icons: [
+          {
+            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: '/assets/crm/manifest/manifest-icon-192.maskable.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+          {
+            src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any',
+          },
+          {
+            src: '/assets/crm/manifest/manifest-icon-512.maskable.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
  ],
  resolve: {
    alias: {
--- a/yarn.lock
+++ b/yarn.lock