Skip to content

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

Georg Höller
Georg Höller
2 min read
[Capacitorjs | Angular] Back Swipe Support for iOS and Android
Photo by Tyler Lastovich / Unsplash

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;
    }
}
BackswipePlugin.swift
#import <Foundation/Foundation.h>
#import <Capacitor/Capacitor.h>

CAP_PLUGIN(BackswipePlugin, "BackswipePlugin",)
Backswipe.m

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 :)
CapacitorAngular

Comments


Related Posts

Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package @ngx-translate/core.

[Angular] Dynamic App Config and Translations in a Submodule
Members Public

[Angular] Routing Helper - a Typesafe Routing Attempt

It always bothered me that you have to define the routing paths as strings. If a route changes, you have to change all references manually. There must be a better way! Routing Constants The constants are for your specific app - here you can define a class which represents your

[Angular] Routing Helper - a Typesafe Routing Attempt
Members Public

[ASP.NET Core 6.0 | Angular] Hosting with Ionos

Update for my previous posts about hosting an angular frontend and ASP.NET Core 6 backend. Prerequirements: * active ionos windows hosting subscription * asp.net core 6 project * buildable angular project Ionos Setup Open up your favorite FTP client and connect it to your ionos webspace. Create two new folders -

[ASP.NET Core 6.0 | Angular] Hosting with Ionos