fix(android): hardware back button closes the app (#24)

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-action-sheet')
+    implementation project(':capacitor-app')
     implementation project(':capacitor-clipboard')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-preferences')

android/app/src/main/assets/capacitor.plugins.json

@@ -3,6 +3,10 @@
 		"pkg": "@capacitor/action-sheet",
 		"classpath": "com.capacitorjs.plugins.actionsheet.ActionSheetPlugin"
 	},
+	{
+		"pkg": "@capacitor/app",
+		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
+	},
 	{
 		"pkg": "@capacitor/clipboard",
 		"classpath": "com.capacitorjs.plugins.clipboard.ClipboardPlugin"

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-action-sheet'
 project(':capacitor-action-sheet').projectDir = new File('../node_modules/@capacitor/action-sheet/android')
 
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
 

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorActionSheet', :path => '../../node_modules/@capacitor/action-sheet'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'

package.json

@@ -33,6 +33,7 @@
     "@awesome-cordova-plugins/http": "5.39.0",
     "@capacitor/action-sheet": "4.0.1",
     "@capacitor/android": "4.3.0",
+    "@capacitor/app": "4.1.0",
     "@capacitor/clipboard": "4.0.1",
     "@capacitor/core": "4.3.0",
     "@capacitor/ios": "4.3.0",

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { MenuController, Platform } from '@ionic/angular';
+import { CapacitorAppService } from './core';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +14,8 @@ export class AppComponent {
     private readonly platform: Platform,
     private readonly menuController: MenuController,
     private readonly router: Router,
+    // Do NOT remove the following services:
+    private readonly capacitorAppService: CapacitorAppService,
   ) {
     void this.initializeApp();
   }

src/app/core/services/capacitor/capacitor-app/capacitor-app.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { App } from '@capacitor/app';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CapacitorAppService {
+  constructor() {
+    void App.removeAllListeners().then(() => {
+      void App.addListener('backButton', ({ canGoBack }) => {
+        if (canGoBack) {
+          window.history.back();
+        } else {
+          void this.exitApp();
+        }
+      });
+    });
+  }
+
+  private async exitApp(): Promise<void> {
+    return App.exitApp();
+  }
+}

src/app/core/services/capacitor/index.ts

@@ -0,0 +1 @@
+export * from './capacitor-app/capacitor-app.service';

src/app/core/services/index.ts

@@ -1,4 +1,5 @@
 export * from './api';
+export * from './capacitor';
 export * from './dialog/dialog.service';
 export * from './global-error-handler/global-error-handler.service';
 export * from './native-http/native-http.service';