Deep linking to a specific page / context in a mobile app

:white_check_mark: This link launches the app correctly :
https://app.ready4sea.com

:x: This link launches the app but does not switch over to the desired page :
https://app.ready4sea.com?page=test-page

:x: This link launches the app but does not switch over to the desired page :
https://app.ready4sea.com?data%3D%7B%22page%22%3A%22test-page%22%7D

Hi @Nicolas_REMY

is this domain app.ready4sea.com just an example or it’s your app?

could you please provide your appId?

Regards,
Vlad

I just tried it in my app and seems like everything works well, the link below opens a specific page

https://skilledhome.backendless.app?page=test

My appID is D7075715-5086-625A-FFAB-39C2F40FB200

app.ready4sea.com is my real app.

Up to now I was using examples, but Nikita asked for the real URL, so this is the real URL.

I have built this test page : https://ready4sea.com/test.html
The link there points at https://app.ready4sea.com/?page=A2-edit-my-profile

When tapping the link on my device, it does not take me to page A2-edit-my-profile

(Just to be clear, I am trying to get to page A2-edit-my-profile inside my mobile app, not on a web page)

In the app in the web/index.html file, I can see a redirection to your host

<meta http-equiv="refresh" content="0; URL=https://ready4sea.com/" />

so when you open app.ready4sea.com it redirects you ready4sea.com which points to a site beyond our service

Besides, doesn’t matter which query params you specify app.ready4sea.com/?page=A2-edit-my-profile it always opens ready4sea.com]

Vladimir, I agree with you on the Web. Not on a mobile device. This is why I pointed out that I am trying to achieve this on my mobile app.

What you are witnessing is the fallback version of the deep link on desktop. If you try it on your mobile with the app installed, it does launch the app and does not redirect to the fallback website.

But let’s suppose I got the whole thing wrong, I don’t mind.

Then, the entire question remains, and it’s been asked back a year ago by this person here : Deep Linking Quastion. And then I opened this thread back in October because we weren’t getting anywhere.

The question is : how do I achieve opening page X with parameters Y in the mobile app ? To this day, I still don’t know, and @mark-piller 's reply to the above thread back in February 2022 stated that it worked and that if it didn’t you would fix it. I would gladly use guidance to get this to work. Thanks.

I’m not sure I understand this point, you are trying to open a web page by the provided URL, what’s the difference between opening it from a web browser and a flutter app?

The question is : how do I achieve opening page X with parameters Y in the mobile app ? To this day, I still don’t know, and @mark-piller 's reply to the above thread back in February 2022 stated that it worked and that if it didn’t you would fix it. I would gladly use guidance to get this to work. Thanks.

are we talking about an app built with our UIBuilder?

Hi Vladimir,

Yes, we are talking about a mobile app built with your UIbuilder and encapsulated in the Native Mobile App Shell.

What I am trying to achieve is this : Mobile deep linking - Wikipedia

Here is a video demonstrating the basics on iPhone :

(if you have doubts, at 0:03 in this video, I am tapping on the link)

On Android I couldn’t record a video, but the same goes, and I get a popup asking me whether to open the link in the app or in my browser.

Both examples here are with my Backendless app, built with your Ui builder and the Native Mobile App Shell. Up to here, things work and I end up on the app’s start page.

But the desired behavior goes beyond this. I need to get to a specific page (X) and even pass some parameters (Y).

Please note that I am NOT trying to open a web page from my browser, I am NOT trying to open a web page from my flutter app. I am trying to open a page from the MOBILE APP from a browser link, from an email link or from a push notification.

thanks for the clarification, now I see

  1. you’ve got a UIBuilder app wrapped into a native Flatter app
  2. and the app is installed on the mobile device
  3. then you open in a web browser on the device some web site where located a link to open the Mobile app
  4. but you do not want just to open the app you are looking for a way to the app with a specific page and parameters

am I correct?

If so our Flutter developer will look into it and provide you with the guide.

YES ! That’s it.

Help would be really great, because I have been waiting for a long time for this feature, and now I really really need it to work.

Thanks.

Can you share with me your Info.plist and code thats handle event when deep link was tapped.

Hi Nikita, I thought you wanted access to the whole of the app, so I invited you to the GitLab repo. Would that be OK ?
Otherwise, I will find a way to send you those files.

Just send an archive of the files I asked for, I’ll see what I can come up with.

In android/app/src/main/AndroidManifest.xml :

        <!-- Deep linking -->
        <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
        <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="app.ready4sea.com" />
        </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="r4s" android:host="app.ready4sea.com" />
        </intent-filter>

In ios/Runner/Info.plist :

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>fbxxxxxxx</string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLIconFile</key>
		<string></string>
		<key>CFBundleURLName</key>
		<string>app.ready4sea.com</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>https</string>
			<string>r4s</string>
		</array>
	</dict>
</array>

OK, so I sent you an email with an archive including both files. Can you confirm you received it ?
Thanks.

Thanks, I got all the information. I’m investigating.

Lovely.

Hello, @Nicolas_REMY.

For this logic you need to handle when app got deep link or universal link, like this(with uni_links) and this(with native). I haven’t been able to get this to work on iOS yet. I have tried third party libraries such as: uni_links and go_router.

Tomorrow I will try to implement it with native code.

By the way, the demo you posted. Did your link contain an https scheme or a custom one?
It looks like this won’t work inside a Webview if the link is opened from a browser (with the https scheme).
If with https, let me know how you achieved it. :slightly_smiling_face:

If you instantiate a SFSafariViewController, WKWebView, or UIWebView object to handle a universal link, iOS opens your website in Safari instead of opening your app. However, if the user taps a universal link from within an embedded SFSafariViewController , WKWebView , or UIWebView object, iOS opens your app.

Source: App Search Programming Guide: Support Universal Links

Best Regards, Nikita.

Hi @Nikita_Fedorishchev ,

The link was indeed with an https scheme, so I can tell you it does work :wink:

I don’t remember all the details, but I believe it was thanks to both files I sent you, and also the subdomain has to be recognized by the device.

For iOS I think this is done via an apple-app-site-association file in the .well-known folder. But I can’t check now because my app is offline due to the ransomware.

For Android, I believe this is done in the lines I posted above.

This page may also help to understand the process.

Hello, @Nicolas_REMY.

I have good news, I got my deep link to work as expected. Soon, I will update the github repository where you can get the latest code.

Best Regards, Nikita.