From 82106ddd5cf3d4c4f5e72f856021e2a34050d793 Mon Sep 17 00:00:00 2001 From: Dark-Louis Date: Mon, 8 Sep 2025 22:23:43 +0200 Subject: [PATCH 1/2] Fixed web start crashing - Re-added a library that was necessary but was removed in the previous commit - Fixed native features (such as haptics) that were crashing the web app --- package-lock.json | 21 +++++++++++++++++++++ package.json | 1 + src/App.tsx | 13 ++++++++++--- src/utils/haptics.ts | 7 +++++++ src/utils/hooks/useHaptics.ts | 9 +++++---- src/utils/native.ts | 2 ++ src/utils/statusBar.ts | 7 +++++++ 7 files changed, 53 insertions(+), 7 deletions(-) create mode 100644 src/utils/haptics.ts create mode 100644 src/utils/native.ts create mode 100644 src/utils/statusBar.ts diff --git a/package-lock.json b/package-lock.json index 1d85f49..a0af2ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "workbox-strategies": "^5.1.4" }, "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" @@ -631,6 +632,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-async-generators": { "version": "7.8.4", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz", diff --git a/package.json b/package.json index e0fe3b3..732882f 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index 91a23d5..b6f8a4f 100644 --- a/src/App.tsx +++ b/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'); diff --git a/src/utils/haptics.ts b/src/utils/haptics.ts new file mode 100644 index 0000000..d58b14c --- /dev/null +++ b/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 {} +} diff --git a/src/utils/hooks/useHaptics.ts b/src/utils/hooks/useHaptics.ts index ccbce1d..fc1a641 100644 --- a/src/utils/hooks/useHaptics.ts +++ b/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 { diff --git a/src/utils/native.ts b/src/utils/native.ts new file mode 100644 index 0000000..fa504f6 --- /dev/null +++ b/src/utils/native.ts @@ -0,0 +1,2 @@ +import { Capacitor } from "@capacitor/core"; +export const isNative = Capacitor.isNativePlatform(); diff --git a/src/utils/statusBar.ts b/src/utils/statusBar.ts new file mode 100644 index 0000000..f6bc69c --- /dev/null +++ b/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 {} +} From 62776158455b5a952b8fd13798e876ce7d8920c4 Mon Sep 17 00:00:00 2001 From: Dark-Louis Date: Wed, 10 Sep 2025 10:21:06 +0200 Subject: [PATCH 2/2] Fixed web start crashing v2 - Fixed another native feature (AppUpdate) that was crashing the web app --- src/pages/Home/index.tsx | 7 +++---- src/utils/appUpdate.ts | 11 +++++++++++ 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 src/utils/appUpdate.ts diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 50b04d2..57b3ebf 100644 --- a/src/pages/Home/index.tsx +++ b/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); } } diff --git a/src/utils/appUpdate.ts b/src/utils/appUpdate.ts new file mode 100644 index 0000000..81ecae9 --- /dev/null +++ b/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; + } +}