Fixed web start crashing

package.json

@@ -77,6 +77,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@capacitor/cli": "^6.0.0",
     "@types/isomorphic-fetch": "^0.0.36",
     "babel-plugin-tsconfig-paths": "^1.0.3"

src/App.tsx

@@ -18,7 +18,9 @@ import "./theme/globals.scss";
 
 import Login from "./pages/Auth/Login";
 
-import { StatusBar, Style } from "@capacitor/status-bar";
+import { Style } from "@capacitor/status-bar";
+import { setStatusBar } from "./utils/statusBar";
+import { isNative } from "./utils/native";
 import { useDarkMode } from "usehooks-ts";
 import { ModalContextProvider } from "./contexts/modalContext";
 import { ToastContextProvider } from "./contexts/toastContext";
@@ -37,8 +39,13 @@ dayjs.locale("fr");
 dayjs.extend(relativeTime);
 setupIonicReact();
 
-StatusBar.setStyle({ style: Style.Dark });
-StatusBar.setBackgroundColor({ color: "#3f2a56" });
+setStatusBar(Style.Dark);
+if (isNative) {
+  (async () => {
+    const { StatusBar } = await import("@capacitor/status-bar");
+    try { await StatusBar.setBackgroundColor({ color: "#3f2a56" }); } catch {}
+  })();
+}
 
 // Locks screen orientation to portrait
 // window.screen.orientation.lock('portrait');

src/pages/Home/index.tsx

@@ -29,9 +29,8 @@ import PageTemplate from "../Template";
 import styles from "./Home.module.scss";
 import clsx from "clsx";
 import EventJunia from "../../components/Pages/Home/Events";
-import { Capacitor } from "@capacitor/core";
 import { LocalNotifications } from "@capacitor/local-notifications";
-import { AppUpdate } from "@capawesome/capacitor-app-update";
+import { getAppUpdateInfoSafe } from "../../utils/appUpdate";
 import { MauriaNoteType } from "../../types/note";
 
 
@@ -81,8 +80,8 @@ const intervalFetch = async () => {
   setTimeout(intervalFetch, 14400000);
 
   // setTimeout(intervalFetch, 30000);
-  if (Capacitor) {
-    const available = await AppUpdate.getAppUpdateInfo();
+  const available = await getAppUpdateInfoSafe();
+  if (available) {
     console.log(available);
   }
 }

src/utils/appUpdate.ts

@@ -0,0 +1,11 @@
+import { isNative } from "./native";
+
+export async function getAppUpdateInfoSafe() {
+  if (!isNative) return null;
+  try {
+    const { AppUpdate } = await import("@capawesome/capacitor-app-update");
+    return await AppUpdate.getAppUpdateInfo();
+  } catch {
+    return null;
+  }
+}

src/utils/haptics.ts

@@ -0,0 +1,7 @@
+import { Haptics, ImpactStyle } from "@capacitor/haptics";
+import { isNative } from "./native";
+
+export async function hapticImpact(style: ImpactStyle = ImpactStyle.Medium) {
+  if (!isNative) return;
+  try { await Haptics.impact({ style }); } catch {}
+}

src/utils/hooks/useHaptics.ts

@@ -1,5 +1,6 @@
 import { useLocalStorage } from "usehooks-ts";
-import { Haptics, ImpactStyle } from "@capacitor/haptics";
+import { ImpactStyle } from "@capacitor/haptics";
+import { hapticImpact } from "../haptics";
 
 export const useHaptics = () => {
   const [haptics, setHaptics] = useLocalStorage("useHaptics", true);
@@ -17,15 +18,15 @@ export const useHaptics = () => {
   };
 
   const hapticsImpactHeavy = async () => {
-    haptics && (await Haptics.impact({ style: ImpactStyle.Heavy }));
+    haptics && (await hapticImpact(ImpactStyle.Heavy));
   };
 
   const hapticsImpactMedium = async () => {
-    haptics && (await Haptics.impact({ style: ImpactStyle.Medium }));
+    haptics && (await hapticImpact(ImpactStyle.Medium));
   };
 
   const hapticsImpactLight = async () => {
-    haptics && (await Haptics.impact({ style: ImpactStyle.Light }));
+    haptics && (await hapticImpact(ImpactStyle.Light));
   };
 
   return {

src/utils/native.ts

@@ -0,0 +1,2 @@
+import { Capacitor } from "@capacitor/core";
+export const isNative = Capacitor.isNativePlatform();

src/utils/statusBar.ts

@@ -0,0 +1,7 @@
+import { Style, StatusBar } from "@capacitor/status-bar";
+import { isNative } from "./native";
+
+export async function setStatusBar(style: Style) {
+  if (!isNative) return;
+  try { await StatusBar.setStyle({ style }); } catch {}
+}