fabernovel loader

Jan 30, 2015 | 3 min read

Tech

Handoff: the bridge between your app and your website

With iOS 8, Apple made the walls between multiple devices thinner than ever. Apple introduced Continuity, a set of technologies that help your devices talk with each other. This includes being notified of your phone calls on all of your devices, sending SMS text messages from your Mac, or transferring the work you are doing to another device. The latter technology (which Apple calls Handoff) may be the most underestimated one, but we feel that it has a great potential.

Handoff, as advertised by Apple, “lets you pick up right where you left off”. It means that if you are using an app that supports Handoff, you will be able to open it on another device and it will display the same document that you were working on (email, web page, text document…). It works between iOS devices, but also between an iOS device and a Mac. Many built-in apps (Mail, Safari, Pages, Keynote) support Handoff, and third-party apps can support it too.

With only these features, Handoff would already be a nice addition to iOS and OS X. But there is One more thing: you can also use Handoff between an app and a website! This is great news for services that are only accessible from an app on iOS and don’t have an app on the Mac App Store (most of them, actually). Handoff obviously can’t be used between iOS and Mac apps in this case, but it can be used between the iOS app and the website. This feature really is a big deal: users can browse a list of videos from their iPad, and in a single clic, open the video on the browser of their Mac to watch it on a bigger screen. Conversely, they can start to read on their Mac an article posted on their favorite news website, leave the room, and finish it on their iPhone.

How does it work? Handoff-capable apps describe the current activity of the user, typically a screen, and add the URL of the content’s web page to it. If you are a developer: this is done by setting the userActivity property of any UIResponder subclass, for instance UIViewController. The activity is broadcasted and a link to the web page appears in the Dock on the Mac. If the user is browsing a compatible site from his Mac, the icon of the corresponding app will appear on the lock screen of the device, and if the user opens it, the app will have access to the URL of the website and will then be able to display the right content after a simple analysis of the web address.

Bottom of the lock screen of an iPhone. On the left, the icon of an app shows that you can continue your activity on your device.

Implementing Web Browser–to–Native App Handoff

We won’t go too much into details about how to adopt Handoff in your app: the Handoff Programming Guide is a great resource that covers pretty much any issue that you may encounter. We will however share a trick that helped us a lot when developing our first Handoff-capable prototypes.

As stated in the documentation, there is a mutual agreement beetween the app and the website which prevents unwanted third-party apps to continue the activity: a Handoff-compliant app must claim the website domain in the com.apple.developer.associated-domains entitlement. The website must also host a credentials file that lists all app IDs that are approved by the website. This file must be signed with a certificate corresponding to the website’s domain name. But here is the issue. How do you test it on your local server? You obviously don’t have a certificate for your computer hostname issued by a Certificate Authority (CA) natively trusted by iOS. However, you can create your own CA and add it to your test device. This is the trick that we are using here.

Creating your own CA may sound complicated, but the whole process is in fact pretty simple:

  • Create the CA. With Keychain Access.app this is done in just a few clicks
  • Export the CA to your iPhone or your iPad (by email or any mean you like) and install it
  • Issue a certificate for your hostname from this CA
  • Sign the credentials file with this certificate (see the documentation)
  • Put the resulting file, named apple-app-site-association, at the root of your local website, so you can access it from http://<your-hostname>/apple-app-site-association.

After you have done this, you will be ready to start adopting Handoff in your apps!

If you are interested in Handoff or have any comment on this post, feel free to reach us on Twitter.

Contact @Applidium
logo business unit

FABERNOVEL TECHNOLOGIES

150 talents to face technological challenges of digital transformation

next read