feat: PWA (#19)

Author: olegshulyakov

index.html

@@ -13,7 +13,7 @@
     <meta name="keywords" content="ai, llm, llm-webui, llama.cpp" />
     <meta
       name="description"
-      content="A minimal AI chat interface that runs entirely in your browser."
+      content="Minimal Interface for AI Companion that runs entirely in your browser."
     />
     <meta name="author" content="ggml-org" />
     <meta name="apple-mobile-web-app-title" content="llama.ui" />
@@ -25,7 +25,7 @@
     <meta property="og:title" content="llama.ui - Minimal AI chat interface" />
     <meta
       property="og:description"
-      content="A minimal AI chat interface that runs entirely in your browser."
+      content="Minimal Interface for AI Companion that runs entirely in your browser."
     />
     <meta property="og:site_name" content="llama.ui" />
 

package-lock.json

@@ -51,6 +51,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^7.1.2",
+    "vite-plugin-pwa": "^1.0.2",
     "vite-plugin-singlefile": "^2.3.0"
   },
   "prettier": {

package.json

@@ -1,33 +1,71 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
+import { VitePWA } from 'vite-plugin-pwa';
 
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    rollupOptions: {
-      output: {
-        entryFileNames: `assets/[name]-[hash].js`,
-        chunkFileNames: `assets/[name].js`,
-        assetFileNames: function (file) {
-          return file.names.some((name) => name.includes('css'))
-            ? `assets/[name]-[hash].[ext]`
-            : `assets/[name].[ext]`;
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, false);
+
+  return {
+    plugins: [
+      react(),
+      VitePWA({
+        registerType: 'autoUpdate',
+        manifest: {
+          name: 'llama.ui',
+          short_name: 'llama.ui',
+          description:
+            'Minimal Interface for AI Companion that runs entirely in your browser.',
+          display: 'standalone',
+          theme_color: '#f8f8f8',
+          background_color: '#f8f8f8',
+          icons: [
+            {
+              purpose: 'maskable',
+              sizes: '512x512',
+              src: 'icon512_maskable.png',
+              type: 'image/png',
+            },
+            {
+              purpose: 'any',
+              sizes: '512x512',
+              src: 'icon512_rounded.png',
+              type: 'image/png',
+            },
+            { src: 'assets/favicon.ico', sizes: '48x48', type: 'image/x-icon' },
+            { src: 'assets/favicon.svg', sizes: 'any', type: 'image/svg+xml' },
+          ],
+          start_url: env['BASE_URL'],
+          orientation: 'any',
+          lang: 'en',
         },
-        manualChunks: {
-          katex: ['katex'],
-          'pdfjs-dist': ['pdfjs-dist'],
+      }),
+    ],
+    build: {
+      rollupOptions: {
+        output: {
+          entryFileNames: `assets/[name]-[hash].js`,
+          chunkFileNames: `assets/[name].js`,
+          assetFileNames: function (file) {
+            return file.names.some((name) => name.includes('css'))
+              ? `assets/[name]-[hash].[ext]`
+              : `assets/[name].[ext]`;
+          },
+          manualChunks: {
+            katex: ['katex'],
+            'pdfjs-dist': ['pdfjs-dist'],
+          },
         },
       },
     },
-  },
-  server: {
-    proxy: {
-      '/v1': 'http://localhost:8080',
-      '/props': 'http://localhost:8080',
-    },
-    headers: {
-      'Cross-Origin-Embedder-Policy': 'require-corp',
-      'Cross-Origin-Opener-Policy': 'same-origin',
+    server: {
+      proxy: {
+        '/v1': 'http://localhost:8080',
+        '/props': 'http://localhost:8080',
+      },
+      headers: {
+        'Cross-Origin-Embedder-Policy': 'require-corp',
+        'Cross-Origin-Opener-Policy': 'same-origin',
+      },
     },
-  },
+  };
 });