[MUSIC PLAYING]
Hello and welcome back to Route 85, our show
for iOS developers, because we love you too.
And the second part of our series on how to open web
links in Google Chrome on iOS.
Now, in the previous episode-- which you should watch if you
haven't-- I showed you how to detect if the user has Google
Chrome installed and how to open a link in Chrome if they do.
But I'd like to explore one other feature
that we haven't covered yet.
And it's the one that's probably most important to you
app developers, which is the ability
to add that nice little Back button in Chrome that
takes users back to your application.
I know it seems like a small thing.
But going back to your app with one press
as opposed to going through the Multitasker, it's really nice.
Now, Chrome does this by taking advantage of an emerging
standard in the iOS development world called x-callback-url.
This is a convention that allows applications
a little bit of two-way communication.
What you're basically doing is when
you open a custom URL in another application,
within that URL you're also telling the target app what
your own application URL scheme is so that when the user is
done doing whatever they need to do in that second app,
that application can open a new URL with a custom scheme that
points back to the first app.
The whole thing's actually pretty clever.
So what does this look like in real life?
Well, let's take a look at our Google Chrome URL.
Here it is.
It's pretty basic.
But now, instead of asking it to open the host www.google.com,
I'm going to ask it to open the host x-callback-url.
This is basically the signal to Google Chrome
that, hey, I'm going to give you some information using
the x-callback protocol so that you can swap back
to my application when you're done.
After this, I'm going to add the action open
And then pass in a URL argument called
url that equals the link we want to visit--
or I guess more accurately, the URL encoded version of that.
So you end up with something that looks like this.
Now, if I were to actually open this URL it would work.
In fact, let's try this right now in our sample application.
So here we are back in my OpenInChromeExample
application.
And I'm going to create a new URL along
with the Safari and Chrome URL that I
am going to call my callbackURL.
And it's going to look fairly similar to my Chrome one.
I got this URL, URL string.
Except that my string here is going to be googlechromes.
But then for my host, I'm going to go with x-callback-url.
I'm going to add the action open and then I'm going to say
url=https://www.google.com.
Now, this won't quite work because I need a-- yes, Xcode,
I know I need a semicolon-- because I
need to URL escape these three characters here.
So let's do that as well.
This should be : / and /.
Does anybody know if Xcode will automatically
URL escape strings for you?
If so, let me know in the comments.
So anyway, lastly, I need to make sure
that I replace my Chrome URL here with my callback URL.
Oh and I guess it'd be nice if I spelled URL correctly, huh?
Wouldn't that be nice?
Let's fix that.
Edit All in Scope.
And I'll change that to URL.
That's better.
Now I can run this on my device.
And when we click on this button,
we can see that, yes, my URL opens in Chrome.
But there's still no Back button pointing to our app.
And that's because we haven't actually
told Chrome anything about the app that called it.
Now, in order to do that, we need
to register our own URL scheme.
The same way that Chrome declares
that it owns any URL beginning with googlechrome,
we can declare our own custom URL scheme for our example app.
So let's do that now.
I'm going to go back to Xcode here.
Let's open the project and check out the target.
And over here in the info section down here
at the bottom, there is this section called URL types.
This is where our application can declare any URL schemes
that it can open.
So let's expand this.
And right now there's nothing here.
But let's click the plus sign and add one.
So identifier here is a human readable version
of our URL scheme.
Most developers that I know just seem
to make this their bundle ID.
So I guess I'll do the same.
So com.google.openinchromeexample.
And of course, feel free to replace com.google
with whatever is appropriate for your organization.
Now, URL schemes here, this is the string
that is going to go before the colon
that we say we are going to own.
Now, this should be unique for your application.
Now, if you're an application like Chrome or Google Maps
that's expecting to be called by many other third-party apps,
you could try something like a variation on your application's
name.
But if you're really only registering
this URL for situations like ours
where we're going to be telling the target app what
our URL scheme is and we don't expect a lot of third party
developers to know it, I think it's generally safest
just to use your bundle ID, maybe without the periods.
So we'll do something like this--
comgoogleopeninchromeexample.
I need to make sure I spelled this right.
Yeah, it looks good.
I'm going to copy this because we're going to use it later.
So now we've declared that any URL
that begins with comgoogleopeninchromeexample
colon whatever will open up in this application.
So now that we've done that, let's
go back to our callback URL.
I'm going to open up ViewController.m here.
And here's our callback URL.
And we're going to modify this.
So I'm going to continue this on another line
because we're getting a little crowded here.
And the first thing we're going to do is add an &x-source=My
App argument.
So this is a human readable version
of our application name.
And in Chrome's case it's going to use this value
to determine what text to put in that little Back button.
And again, we need to URL escape this.
So I'm going to replace that space with a .
The next thing we're going to do is add an x-success argument.
Now, in the x-callback world, this
is a URL that our target app will
attempt to open once the user is done doing whatever he wanted
to do in that app and things have proceeded normally.
Note that in Chrome's case it's going
to use this URL whether or not the page you're trying to open
has actually opened or whether it's gotten a 404 or whatever.
It's always going to use this success value.
So for the value of our success argument
we're going to set it to a URL that points back
to our app, which in this case is our custom scheme.
And luckily I copied it.
So I'm going to paste it here, comgoogleopeninchromeexample
with a colon at the end.
And again, that colon needs to be escaped.
So I'm going to replace it with a :.
And so now we have this much larger URL but one
that has an x-source argument and an x-success argument.
So let's try running this now and see what happens.
So I'm going to click this button now.
And looky here.
It's open in Chrome.
And now there's this Back button.
The title is equal to My App, which
is what we specified as our source.
And when we click on it, it now goes back to our application.
So that's pretty awesome.
Incidentally, if you notice that your Chrome browser does not
have a Back button, the most common reason for that
is that what you've added as your x-success
URL here does not actually equal what
is in this URL types URL scheme section.
Chrome does its own UI application
Can't Open URL check to determine whether it should
display that Back button in the first place.
And if this value in the URL scheme
does not match what you have put in here
in your x-success argument, it'll say,
oh no, I can't open that URL.
And it just won't show the button.
So let's review that giant URL one more time here.
Whoa!
So the Google Chrome URL scheme at the beginning
is asking us to open Google Chrome.
The x-callback URL host is warning Chrome
that it's about to receive an argument
in the x-callback URL form.
The open action followed by the URL argument
is telling Chrome what page to actually visit.
And the x-success argument is telling
Chrome what URL scheme to open when it's all done.
And finally this x-source argument
tells Chrome what text to put in that little button that
takes the user back to your application.
So this is great.
But we're not done yet.
See, it turns out everything we've just done,
it doesn't actually work if you've
got a version of Chrome that's a few years old.
Admittedly, not a common situation these days,
but it could happen.
And let's face it.
Our code is starting to look a little messy here
and it might even get messier before we're done.
But not to worry.
We're going to deal with both of these problems in the very
next lesson.
So stay tuned.
[MUSIC PLAYING]