Make webview go back one page instead of closing the app

Author: MartinBraquet

android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-app')
     implementation project(':capacitor-push-notifications')
     implementation project(':capacitor-status-bar')
     implementation project(':capgo-capacitor-social-login')

android/capacitor.settings.gradle

@@ -2,6 +2,9 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
 include ':capacitor-push-notifications'
 project(':capacitor-push-notifications').projectDir = new File('../node_modules/@capacitor/push-notifications/android')
 

package.json

@@ -27,6 +27,7 @@
     "postinstall": "./scripts/post_install.sh"
   },
   "dependencies": {
+    "@capacitor/app": "7.1.0",
     "@capacitor/core": "7.4.4",
     "@capacitor/push-notifications": "7.0.3",
     "@capacitor/status-bar": "7.0.3",

web/pages/_app.tsx

@@ -10,17 +10,22 @@ import '../styles/globals.css'
 import {Major_Mono_Display} from 'next/font/google'
 import clsx from 'clsx'
 import {initTracking} from 'web/lib/service/analytics'
-import WebPush from "web/lib/service/web-push";
-import AndroidPush from "web/lib/service/android-push";
-import {isAndroidWebView} from "web/lib/util/webview";
-import {Capacitor} from '@capacitor/core';
-import {StatusBar} from '@capacitor/status-bar';
+import WebPush from "web/lib/service/web-push"
+import AndroidPush from "web/lib/service/android-push"
+import {isAndroidWebView} from "web/lib/util/webview"
+import {Capacitor} from '@capacitor/core'
+import {StatusBar} from '@capacitor/status-bar'
+import {App} from '@capacitor/app'
+import {useRouter} from "next/navigation";
 
 if (Capacitor.isNativePlatform()) {
   // Only runs on iOS/Android native
   // Note sure it's doing anything, though, need to check
-  StatusBar.setOverlaysWebView({overlay: false}).catch(console.warn);
-  // StatusBar.setStyle({style: Style.Light}).catch(console.warn);
+  StatusBar.setOverlaysWebView({overlay: false}).catch(console.warn)
+  // StatusBar.setStyle({style: Style.Light}).catch(console.warn)
+  App.addListener('backButton', ({canGoBack}) => {
+    window.dispatchEvent(new CustomEvent('appBackButton'))
+  })
 }
 
 
@@ -63,6 +68,7 @@ function MyApp({Component, pageProps}: AppProps<PageProps>) {
   console.log('isAndroidWebView app:', isAndroidWebView())
   useEffect(printBuildInfo, [])
   useHasLoaded()
+  const router = useRouter()
 
   useEffect(() => {
     initTracking()
@@ -75,10 +81,19 @@ function MyApp({Component, pageProps}: AppProps<PageProps>) {
     }
   }, [])
 
+  useEffect(() => {
+    const handleBack = () => {
+      router.back()
+    }
+
+    window.addEventListener('appBackButton', handleBack)
+    return () => window.removeEventListener('appBackButton', handleBack)
+  }, [router])
+
   // useEffect(() => {
   //   // Expose globally for native bridge
-  //   (window as any).oauthRedirect = oauthRedirect;
-  // }, []);
+  //   (window as any).oauthRedirect = oauthRedirect
+  // }, [])
 
   const title = 'Compass'
   const description = 'The platform for intentional connections'

yarn.lock

@@ -1116,6 +1116,11 @@
   resolved "https://registry.yarnpkg.com/@capacitor/android/-/android-7.4.4.tgz#a14a1e844bd5079982427e247fdd17555b5fbedd"
   integrity sha512-y8knfV1JXNrd6XZZLZireGT+EBCN0lvOo+HZ/s7L8LkrPBu4nY5UZn0Wxz4yOezItEII9rqYJSHsS5fMJG9gdw==
 
+"@capacitor/[email protected]":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@capacitor/app/-/app-7.1.0.tgz#d275eebbb0fec6104b3f9c41f09f7598d7808b47"
+  integrity sha512-W7m09IWrUjZbo7AKeq+rc/KyucxrJekTBg0l4QCm/yDtCejE3hebxp/W2esU26KKCzMc7H3ClkUw32E9lZkwRA==
+
 "@capacitor/[email protected]":
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/@capacitor/assets/-/assets-3.0.5.tgz#55c66458e703ce95e2e3188caad8b987b94b66f0"