PWA

package.json

@@ -1,6 +1,6 @@
 {
     "name": "pulsar-web",
-    "version": "0.7.1",
+    "version": "0.7.2",
     "description": "",
     "type": "module",
     "scripts": {
@@ -17,6 +17,7 @@
         "tailwindcss": "^4.1.13",
         "typescript": "^5.9.2",
         "vite": "^7.1.4",
+        "vite-plugin-pwa": "^1.2.0",
         "vite-plugin-solid": "^2.11.8"
     },
     "dependencies": {

src/index.tsx

@@ -1,15 +1,18 @@
 /* @refresh reload */
-import './index.css';
-import { render } from 'solid-js/web';
-import 'solid-devtools';
+import "./index.css";
+import { render } from "solid-js/web";
+import "solid-devtools";
+import { registerSW } from "virtual:pwa-register";
 
-import App from './App';
+import App from "./App";
 
-const root = document.getElementById('root');
+registerSW();
+
+const root = document.getElementById("root");
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
     throw new Error(
-    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
+        "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
     );
 }
 

tsconfig.json

@@ -15,6 +15,10 @@
 
         // Type Checking & Safety
         "strict": true,
-    "types": ["vite/client"]
-  }
+        "types": [
+            "vite/client",
+            "vite-plugin-pwa/info.d.ts",
+            "vite-plugin-pwa/client.d.ts",
+        ],
+    },
 }

vite.config.ts

@@ -1,14 +1,42 @@
-import tailwindcss from '@tailwindcss/vite';
-import { defineConfig } from 'vite';
-import solidPlugin from 'vite-plugin-solid';
-import devtools from 'solid-devtools/vite';
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import devtools from "solid-devtools/vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
-  plugins: [devtools(), solidPlugin(), tailwindcss()],
+    plugins: [
+        devtools(),
+        solidPlugin(),
+        tailwindcss(),
+        VitePWA({
+            registerType: "autoUpdate",
+            manifest: {
+                name: "Pulsar",
+                short_name: "Pulsar",
+                start_url: "/app",
+                display: "standalone",
+                background_color: "#ffffff",
+                theme_color: "#4f46e5",
+                icons: [
+                    {
+                        src: "/icons/icon-192.png",
+                        sizes: "192x192",
+                        type: "image/png",
+                    },
+                    {
+                        src: "/icons/icon-512.png",
+                        sizes: "512x512",
+                        type: "image/png",
+                    },
+                ],
+            },
+        }),
+    ],
     server: {
         port: 3000,
     },
     build: {
-    target: 'esnext',
+        target: "esnext",
     },
 });