⚡ feat: Added PWA Setup & Manual Chunks via Vite (#2477)

* added pwa setup via vite config

Added apple status bar meta data

added maskable 512 icon for chrome and android devices

added vite-plugin-pwa

updated vite config to setup the pwa service worker and manifest upon build

* fix(vite): avoid pre-caching generated images

* chore: add manual chunking of larger vendor package

* chore: remove comments

---------

Co-authored-by: davecrab <65996799+davecrab@users.noreply.github.com>

client/index.html

@@ -5,6 +5,7 @@
     <meta name="theme-color" content="#171717">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>LibreChat</title>
     <link
       rel="shortcut icon"

client/package.json

@@ -128,6 +128,7 @@
     "typescript": "^5.0.4",
     "vite": "^5.1.1",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-node-polyfills": "^0.17.0"
+    "vite-plugin-node-polyfills": "^0.17.0",
+    "vite-plugin-pwa": "^0.19.8"
   }
 }

client/src/store/preset.ts

@@ -1,11 +1,6 @@
 import { atom } from 'recoil';
 import { TPreset } from 'librechat-data-provider';
 
-// preset structure is as same defination as conversation
-
-// an array of saved presets.
-// sample structure
-// [preset1, preset2, preset3]
 const presets = atom<TPreset[]>({
   key: 'presets',
   default: [],

client/vite.config.ts

@@ -1,8 +1,9 @@
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
-import { defineConfig, loadEnv } from 'vite';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path, { resolve } from 'path';
 import type { Plugin } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -27,7 +28,52 @@ export default defineConfig({
   // All other env variables are filtered out
   envDir: '../',
   envPrefix: ['VITE_', 'SCRIPT_', 'DOMAIN_', 'ALLOW_'],
-  plugins: [react(), nodePolyfills(), sourcemapExclude({ excludeNodeModules: true })],
+  plugins: [
+    react(),
+    nodePolyfills(),
+    VitePWA({
+      injectRegister: 'auto', // 'auto' | 'manual' | 'disabled'
+      registerType: 'prompt', // 'prompt' | 'auto' | 'disabled'
+      devOptions: {
+        enabled: false, // enable/disable registering SW in development mode
+      },
+      workbox: {
+        globPatterns: ['assets/**/*.{png,jpg,svg,ico}', '**/*.{js,css,html,ico,woff2}'],
+      },
+      manifest: {
+        name: 'LibreChat',
+        short_name: 'LibreChat',
+        start_url: '/',
+        display: 'standalone',
+        background_color: '#000000',
+        theme_color: '#009688',
+        icons: [
+          {
+            src: '/assets/favicon-32x32.png',
+            sizes: '32x32',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/favicon-16x16.png',
+            sizes: '16x16',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/apple-touch-icon-180x180.png',
+            sizes: '180x180',
+            type: 'image/png',
+          },
+          {
+            src: '/assets/maskable-icon.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
+    sourcemapExclude({ excludeNodeModules: true }),
+  ],
   publicDir: './public',
   build: {
     sourcemap: process.env.NODE_ENV === 'development',
@@ -36,6 +82,15 @@ export default defineConfig({
       // external: ['uuid'],
       output: {
         manualChunks: (id) => {
+          if (id.includes('node_modules/highlight.js')) {
+            return 'markdown_highlight';
+          }
+          if (id.includes('node_modules/hast-util-raw')) {
+            return 'markdown_large';
+          }
+          if (id.includes('node_modules/katex')) {
+            return 'markdown_large';
+          }
           if (id.includes('node_modules')) {
             return 'vendor';
           }
@@ -81,14 +136,3 @@ export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
     },
   };
 }
-
-function htmlPlugin(env: ReturnType<typeof loadEnv>) {
-  return {
-    name: 'html-transform',
-    transformIndexHtml: {
-      enforce: 'pre' as const,
-      transform: (html: string): string =>
-        html.replace(/%(.*?)%/g, (match, p1) => env[p1] ?? match),
-    },
-  };
-}

index.html

@@ -6,6 +6,7 @@
     <meta name="theme-color" content="#171717">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>LibreChat</title>
     <link
       rel="shortcut icon"