Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Universal Links: The Web-App Connection

DZone's Guide to

Universal Links: The Web-App Connection

In this overview, you'll find resources to learn about Universal Links for Developers and Smart Banners for linking websites to mobile apps.

· Mobile Zone ·
Free Resource

Hmmm, looks like we've never got around to noticing Universal Links for Developers in this space before; the advantages of those, from Support Universal Links, are

  • Unique. Unlike custom URL schemes, universal links can't be claimed by other apps, because they use standard HTTP or HTTPS links to your website.
  • Secure. When users install your app, iOS checks a file that you've uploaded to your web server to make sure that your website allows your app to open URLs on its behalf. Only you can create and upload this file, so the association of your website with your app is secure.
  • Flexible. Universal links work even when your app is not installed. When your app isn't installed, tapping a link to your website opens the content in Safari, as users expect.
  • Simple. One URL works for both your website and your app.
  • Private. Other apps can communicate with your app without needing to know whether your app is installed.

Big step up from the custom URL stuff we last mentioned way back in URL Scheme Tidbits, isn't that? Here's a well worth reading article to bring us up to speed on some practical applications:

Techniques to Connect Websites to iOS Apps

First, what's the end game here? To simply leverage some hosted .json files on your server and put meta tags in your markup to allow users to jump straight into your app or display information about it more effectively. That's it.

This stuff is typically key for SaaS business' or solopreneurs because in the world we live in, where there is a SaaS website a (hopefully) native app will follow. We want to help them dance together.

It helps that iOS 11 built features specifically for this. Open up your camera, point it at a QR code. Boom - iOS shows us the actionable details. Share a link in messages. Get a rich text preview. The list goes on...

QR code support? Yep, that comes for free with your apple-app-site-association file:

If you host such a file, the end result is that your app will immediately show to open via a notification when the user points at the QR code. The only metadata your QR code needs is the URL for your website.

No external QR code download, no more taps - nothing. It just happens.

If the user doesn't have your app, Safari will kick in instead, taking them to your website...

... Safari handles all of this as well. If you hosted the QR code as an image, and an iOS user 3D touches on it - this exact same flows happens.

Yeah? Cool!

And if you haven't looked into Shared Web Credentials for iOS 11 yet, that's easy too, just associate your domains and tell the app where the credentials go:

This nifty trick is absolutely essential for you if your app has a log in mechanism or any user portal system online. By employing password autofill, users can tap on the lock icon in the quicktype bar that appears over the keyboard, authenticate and then have their information automatically filled out.

It's beautiful, and I use it daily.

To allow for this to happen, there is minor housekeeping that you need to do for the text fields or text views representing your log in. Simply assign the correct values added in iOS 11 to their textContentType property...

... Once you throw that up on your site - the entire web credentials and password autofill pipeline is all set. I can't tell you how much times this saves from a user perspective. It goes up by an order of magnitude if one uses Safari's password suggestions as well.

Lastly, there's tips on how to enrich your Messages sharing:

Sharing links within Messages is a ubiquitous practice among iOS users. Nothing is more rewarding than tapping on the link cards, with their inviting .png hero images sitting there beckoning us to load up a website within Safari.

Except when that doesn't happen, and it's just plain text.

This is so easy to avoid, though, as you easily can control the title, icon, image and even video that displays. Using the open graph protocol, you can supply all of this stuff inside your site's <head> tag...

The article finishes off by recapping Smart Banners in case you haven't gotten around to those since iOS 6 either. That makes it a pretty much definitive resource for your app and website coordination - thoroughly recommend you go read and bookmark!

Topics:
mobile ,ios ,mobile app development ,universal links

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}