Resolve Meta Tags To Get Automatic Deep Link To Other Apps From a UIWebView

Fri, Feb 20, 2015

Bruno Berisso
Bruno Berisso

Recently working on an iOS app I faced the need to handle many types of media content (images, videos, articles, links). It was a pretty complex app, that allowed user to interact with these content types, so the challenge was to make that interaction as rich as possible. We wanted to be able to open each type of content in its native application.

A basic approach would be to preview the content with a UIDocumentInteractionController and let iOS give us a list of possible actions to perform, or "activities" for that content, but I wanted to go further.

There was a lot of web content, so I wanted to take advantage of what I could get from inspecting it.  As you may know Twitter and Facebook have a well defined protocol allowing web pages configure special behavior when presented in mobile clients (I'm referring to App Cards and App Link), also Apple has its own protocol implemented over the meta tags for the Smart Banner functionality.

I wanted to use these information to improve the user experience, so I decide to write what is now TLMetaResover. A Swift extension (or Objective-C category) over UIWebView that parses meta tags in a web page, using Twitter App Cards, App Link or Apple Smart Banner and returning a deep link to a native app capable of handling that content.

What the extension does is to evaluate a JS script on the UIWebView and extract the information stored inside the page's native app related meta tags. Once you have the custom URL with the native app schema and parameters it's only a matter of opening it.

Now, How you can present all this to users in a uniform way?

TLMetaResolver fixes the presentation nicely. The JS script also returns the iTunes app id for the native app so the extension gets the app name and icon from iTunes using their search API. Once it gets all the info a TLNativeAppActivity is created and returned. This is a subclass of UIActivity that can be presented in a UIActivityViewController alongside with all the other automatic add activities.

Here is how the UIActivityViewController looks for a Tumblr content page:

Open in tumblrOpen in Tumblr - TLMetaResolver

Once the user taps on the "Open in Tumblr" activity icon the custom URL will be opened and the user will jump to the native Tumblr app.

Great! now we can deep link to any web page that conforms to Twitter App Card, App Link or Apple Smart Banner with a single component that is simple, small and seemly integrate it with the rest of the UI. Take a look at the project on GitHub, it's open source so contributions are more than welcome. You can take a quick look to it from the terminal with:

Happy hacking!

Wondering how AI can help you?

This website uses cookies to improve user experience. Read more