[Feature]: "AppLeave" Event

[mariusbolik]

Description

All hrefs in an Capacitor App open in the system browser. An event listener would be handy that can be used to catch clicks on external urls. So we could decide what the app should do in this moment. For example opening the link in the In-App-Browser or navigating to a specific page inside the app.

Platforms

• [X] iOS
• [X] Android
• [ ] Web

Request or proposed solution

We built the app for a big German newspaper. In this app we've implemented an iframe inside an modal that loads an AI Chat from Chatbase.co. This AI Chat outputs links to matching articles. When the user clicks on a link in this Iframe, the modal should close, and the app should navigate to the right article.

Possible solution: addListener(eventName: 'appLeave', listenerFunc: (url: string) => void) => Promise<PluginListenerHandle>

In this listener it should be possible to abort the redirection out of the app:

App.addListener('appLeave', (url) => {
  App.abortUrlOpen();
  this.myService.handleLink(url);
});

Alternatives

Example: We render the content of the news articles by loading the html content from the api. After the content was rendered, we use javascript to parse all hrefs and assign new click events. Links to other posts are rewritten to be compatible with the Angular routing. Links that are not known by the app are opend in the in-app-browser. This is a good solution if the content gets rendered inside the app. But for external content, like an iframe, this is not possible. But also for the news articles, a capacitor event listener would be an easier solution than the approach of rewriting the content.

Additional Information

No response

[jcesarmobile]

This is not possible with an event based system, the moment the WebViews try to navigate they need a response on whether is should navigate or not, calling the App.abortUrlOpen(); inside the listener will fire a different method with no direct communication with the method that fired the listener. We could make it wait for the method call, but that would hang the WebView and the response might not come if you want it to navigate. So we won't be adding this feature .

Plugins can implement a shouldOverrideLoad method and handle the navigation decision natively. Capacitor checks if there are any plugins overriding it and let the plugin handle the url first, so you can create a custom plugin to handle your app navigation, see: https://capacitorjs.com/docs/plugins/ios#override-navigation https://capacitorjs.com/docs/plugins/android#override-navigation

[mariusbolik]

Thank you for the helpful response @jcesarmobile! Would it make sense to add a property to the capacitor config to disable navaligation handling completely and additionally add an eventlistener that executes everytime the user clicks a link? This feature would be also helpful to display a promt to the user that he/she is about to leave the app.

[mariusbolik]

I created a plugin for this: https://github.com/clickyourapp/capacitor-plugin-linkhandler

[jcesarmobile]

It gives 404 error, maybe you forgot to make it public?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.