add PWA proof of concept

esphome · Jul 13, 2024 · 0adb88e · 0adb88e
1 parent 4bf74e3
commit 0adb88e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/packages/v2/package.json b/packages/v2/package.json
@@ -25,6 +25,7 @@
     "vite": "^2.3.6",
     "vite-plugin-html": "^2.1.1",
     "vite-plugin-package-version": "^1.0.2",
-    "vite-plugin-singlefile": "^0.5.1"
+    "vite-plugin-singlefile": "^0.5.1",
+    "vite-plugin-pwa": "^0.12.8"
   }
 }
diff --git a/packages/v2/src/esp-app.ts b/packages/v2/src/esp-app.ts
@@ -22,6 +22,7 @@ interface Config {
 export default class EspApp extends LitElement {
   @state() scheme: string = "";
   @state() ping: string = "";
+  @state() redirectUrl: string = "";
   @query("#beat")
   beat!: HTMLSpanElement;
 
@@ -119,9 +120,21 @@ export default class EspApp extends LitElement {
       : nothing;
   }
 
+  handleRedirect() {
+    window.location.href = "?target=" + this.redirectUrl;
+  }
+
   render() {
     return html`
-      <h1>
+    <div class="redirect-container">
+      <input
+        type="text"
+        placeholder="esphome address"
+        @input="${(e: Event) => (this.redirectUrl = (e.target as HTMLInputElement).value)}"
+      />
+      <button class="btn" @click="${this.handleRedirect}">Go</button>
+    </div>
+    <h1>
         <a href="https://esphome.io/web-api" class="logo">
           <esp-logo style="width: 52px; height: 40px; display: block;"></esp-logo>
         </a>

diff --git a/packages/v2/src/esp-entity-table.ts b/packages/v2/src/esp-entity-table.ts
@@ -39,8 +39,14 @@ interface entityConfig {
 }
 
 export function getBasePath() {
-  let str = window.location.pathname;
-  return str.endsWith("/") ? str.slice(0, -1) : str;
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const target = urlParams.get('target')
+  if (target !== null) {
+    return "http://" + target
+  }
+  const pathname = window.location.pathname;
+  return pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;;
 }
 
 let basePath = getBasePath();

diff --git a/packages/v2/vite.config.ts b/packages/v2/vite.config.ts
@@ -8,8 +8,7 @@ import { viteSingleFile } from "vite-plugin-singlefile";
 import { minifyHtml as ViteMinifyHtml } from "vite-plugin-html";
 import stripBanner from "rollup-plugin-strip-banner";
 import replace from "@rollup/plugin-replace";
-
-const proxy_target = process.env.PROXY_TARGET || "http://nodemcu.local";
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
   clearScreen: false,
@@ -53,6 +52,15 @@ export default defineConfig({
       enforce: "post",
       apply: "build",
     },
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        icons: [{
+          "src": "logo.svg",
+          "sizes": "any"
+        }],
+      }
+    }),
   ],
   build: {
     brotliSize: false,
@@ -71,24 +79,8 @@ export default defineConfig({
     },
   },
   server: {
-    open: "/", // auto open browser in dev mode
-    host: true, // dev on local and network
+    host: true,
     port: 5001,
     strictPort: true,
-    proxy: {
-      "/light": proxy_target,
-      "/select": proxy_target,
-      "/cover": proxy_target,
-      "/switch": proxy_target,
-      "/button": proxy_target,
-      "/fan": proxy_target,
-      "/lock": proxy_target,
-      "/number": proxy_target,
-      "/climate": proxy_target,
-      "/events": proxy_target,
-      "/text": proxy_target,
-      "/date": proxy_target,
-      "/time": proxy_target,
-    },
   },
 });