I’m trying to handle redirect URLs from an external service (a Laravel backend) into my Ionic app, but I’m running into issues.
Context:
External URL Example: https://my-laravel-website.com/api/get-tap?tap_id=23
Goal:
When the URL is opened, I want my Ionic app to handle it, extract the necessary information, and close any open browser windows.
My Code:
AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
android:name="com.tebk.app.MainActivity"
android:label="@string/title_activity_main"
android:theme="@style/AppTheme.NoActionBarLaunch"
android:launchMode="singleTask"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="my-laravel-website.com" />
</intent-filter>
</activity>
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/file_paths">
</meta-data>
</provider>
</application>
<!-- Permissions -->
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>https</string>
</array>
<key>CFBundleURLName</key>
<string>my-laravel-website.com</string>
</dict>
</array>
my-component.ts
import { Component } from '@angular/core';
import { App } from '@capacitor/app';
constructor() {
this.initializeApp();
}
initializeApp() {
App.addListener('appUrlOpen', (data: any) => {
console.log('App opened with URL:', data.url);
});
}
strings.xml:
<?xml version='1.0' encoding='utf-8'?>
<resources>
<string name="app_name">براعم النخبة الأهلية</string>
<string name="title_activity_main">براعم النخبة الأهلية</string>
<string name="package_name">com.tebk.app</string>
<string name="custom_url_scheme">com.tebk.app</string>
</resources>
build.gradle:
apply plugin: 'com.android.application'
android {
namespace "com.tebk.app"
compileSdk rootProject.ext.compileSdkVersion
defaultConfig {
applicationId "com.tebk.app"
...
}
Issue:
The appUrlOpen event is not being triggered when the URL is opened
I am testing the app with Android Studio on my real device
Any guidance or suggestions would be greatly appreciated!
In Android Studio: Build -> Generate Signed App Bundle/APK Then I installed the release APK on my phone and worked.