Universal links on mobile

4
Hi, has anyone managed to implement universal links in their mobile app. Universal links means, you can have a single link that will either open your app or your website, if the app isn't installed. Would love some more info on this?
asked
1 answers
12

I've done this successfully (and it's something I'm working on documenting in more depth). Here's an informal write-up for now:

Here are a few videos of iOS (sorry about the styling!)

 

This solution uses iOS Universal Links and Android App Links. It requires the following components:

  • A Cordova plugin
  • Configuration of the plugin (what links to listen to, app IDs, key signatures, etc.)
  • 2 files hosted in your Mendix app:
    • App must be hosted via HTTPS
    • Files are placed in the folder “.well-known” in your Mendix project’s theme folder:
      • iOS: apple-app-site-association
      • Android: assetlinks.json
      • Source: here
      • (I think these could also be served up by a module dynamically via a request handler. That would allow simpler configuration of these files, and done per environment)
  • JavaScript in your hybrid wrapper for handling the deep links passed to the application
  • A slight change to the DeepLink module so that using the HTTP PUT verb generates easily understandable responses for the hybrid app, instead of redirects. Changes made here and here.

 

Here’s how the process works. When a deep link is clicked on a mobile device and an app is registered to handle that link:

  1. The mobile OS will open that app with an intent
  2. From there, the Cordova plugin can read the details of that intent via an event
  3. Handling code is loaded in the dojoConfig.afterNavigationFn, and the event is fired
    1. This way we’re guaranteed the user has a session (guest or authenticated) by the time this link is processed
  4. The handling code does the following:
    1. Shows a progress bar
    2. Fires an asynchronous HTTP PUT to the deep link URL, which responds with a 200 if the deep link was configured and is now considered pending
    3. If successful, a microflow call is made to System.ShowHomePage, which uses the home page microflow to load the correct deep link page just like on desktop
    4. If unsuccessful, an error message is thrown
    5. Finally, the progress bar is hidden
  5. At this point, the user sees the page they intended to access

 

Here are the challenges I encountered:

  • The main Cordova plugin for managing universal links is no longer maintained by the creator. There are plenty of forks – I used this one because it contained a fix for Cordova 7.0
  • I had to build my apps locally, because PhoneGap Build apparently doesn’t run “hooks” in plugins when building apps. These hooks are used by the universal link plugin to add “entitlements” to the iOS and Android apps, which register them with the operating system as listeners for certain types of links.
  • I created the apple-app-site-association and assetlinks.json files somewhat manually. XCode and Android Studio helped with this a bit, but also I think a Mendix module could dynamically generate these using a request handler and some constants.
  • I modified the DeepLink module (maybe 4 lines of code) to handle the PUT verb. (see StartDeepLink.java:275, 337 my test project)
  • Android was opening an app multiple times, so I needed to add a preference to my config.xml file: here

 

Outputs:

  • Test Mendix app is here
  • Mobile source is here

 

Hope that's helpful!

answered