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

vladimir-upirov · February 3, 2023, 1:25pm

thanks for the clarification, now I see

you’ve got a UIBuilder app wrapped into a native Flatter app
and the app is installed on the mobile device
then you open in a web browser on the device some web site where located a link to open the Mobile app
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.

Nicolas_REMY · February 3, 2023, 1:26pm

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.

Nikita_Fedorishchev · February 3, 2023, 2:32pm

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

Nicolas_REMY · February 3, 2023, 3:53pm

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.

Nikita_Fedorishchev · February 3, 2023, 3:59pm

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

Nicolas_REMY · February 3, 2023, 4:00pm

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>

Nicolas_REMY · February 3, 2023, 4:12pm

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

Nikita_Fedorishchev · February 3, 2023, 4:49pm

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

Nicolas_REMY · February 3, 2023, 4:51pm

Lovely.

Nikita_Fedorishchev · February 6, 2023, 9:37pm

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.

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.

Nicolas_REMY · February 7, 2023, 7:13am

Hi @Nikita_Fedorishchev ,

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

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.

Nikita_Fedorishchev · February 8, 2023, 2:47pm

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.

Nicolas_REMY · February 8, 2023, 2:56pm

That is very good news.
Is this for Android as well, or iOS only ?

Thanks.

Nikita_Fedorishchev · February 8, 2023, 3:20pm

DeepLinks will work for both.
A said about problems with onClick handler only for push notifications in Android.

Nicolas_REMY · February 13, 2023, 6:27pm

Do you have a target date for pushing to the github repository ?

Nikita_Fedorishchev · February 13, 2023, 7:37pm

Hello, @Nicolas_REMY.

I will push tomorrow.

Regards, Nikita.

Nikita_Fedorishchev · February 14, 2023, 12:44pm

Hello, @Nicolas_REMY.

Repo has been updated.
But be careful, because during the pull, you can overwrite all your local changes.
Just in case, create a backup of the project, and then selectively rebase your branch with the new changes.

P.S:
This method opens the page when it receives a deep link. Rewrite it if necessary.

github.com

Backendless/native-mobile-app-shell/blob/master/lib/src/web_view/web_view_container.dart#L84


      
            });
          }
          
          
@override
          void dispose() {
            super.dispose();
          }
          
          
// TODO: This method is general template with logic that implements opening page from Deep Link.
          // If you want to specify your own logic you need to rewrite this method.
          Future<void> _openSpecificPage({String? fullLink, String? query}) async {
            if (fullLink != null || query != null) {
              var url = (await webViewController!.getUrl()).toString();
          
          
    if (!url.endsWith('index.html')) {
                url = url.substring(0, url.indexOf('index.html') + 10);
              }
          
          
    var resultQuery = query;
          
          
    if (resultQuery == null) {

Best Regards, Nikita.

Nicolas_REMY · February 14, 2023, 12:48pm

OK, thanks a lot.
Yes I always run through each modification before merging them.

PS : Which method are you talking about that I should rewrite ?

Nikita_Fedorishchev · February 14, 2023, 12:51pm

Sorry, I had forgotten to add link. I updated my answer.

Nicolas_REMY · February 15, 2023, 2:49pm

I tested the solution and it works. This is a great improvement !

One lingering question, though :

If the app was not open on the phone, not even in the background, then it opens and goes to the right page. That is the expected behavior.

On the other hand, if the app was already open on the phone, but in the background, then clicking on the link switches over to the app, OK, but then it completely reloads the single page app. Would it be possible instead to emulate the Codeless “Go To Page” block or the BackendlessUI.Navigator.goToPage method ? I mean, would it be possible to just go to the specified page without reloading the whole app ? Indeed this takes a lot of time and the experience is not that great for the user.

Still, thank you for the enhancements which make it already a lot better than before !