[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 allowsBackForwardNavigationGestures
on 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.ts
ngOnInit 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 :)
Georg Hoeller Newsletter
Join the newsletter to receive the latest updates in your inbox.