[Capacitorjs | Angular] Back Swipe Support for iOS and Android

Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple!

iOS - Native

To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the AppDelegate - it didn't work.

First add the backswipe folder to a plugins folder, add a new object-c and swift file.

import Foundation
import Capacitor

@objc(BackswipePlugin)
public class BackswipePlugin: CAPPlugin {
   
    override public func load() {
        bridge?.webView?.allowsBackForwardNavigationGestures = true;
    }
}

#import <Foundation/Foundation.h>
#import <Capacitor/Capacitor.h>

CAP_PLUGIN(BackswipePlugin, "BackswipePlugin",)

With the object-c file we register the new plugin. As we don't need any externally callable functions we can ignore the third parameter of CAP_PLUGIN.

Inside the swift file we override the load method to use it as a initialize function. To enable the backswipe we have to set allowsBackForwardNavigationGestureson capacitors webview.

Hit run and test it - the iOS simulator supports the back swipe feature!

Android - Angular

For android it is even easier! I added this code to the app.component.tsngOnInit function. You will need the App Capacitor Plugin:

npm install @capacitor/app

  ngOnInit() {
    if (Capacitor.getPlatform() === 'android') registerAndroidListener();
  }

  registerAndroidListern() {
    App.addListener('backButton', (data) => {
      if (data.canGoBack) window.history.back();
      else App.exitApp();
    });
  }

I think this code should be clear ;-)

If you have further questions about this topic or need help with a problem in general, please write a comment or simply contact me at yesreply@georghoeller.dev :)