Welcome to Day 18 of the 31 Days of iOS. Yesterday, we talked about how to use the Xcode Debug Console. The debug console can be used to log information while your app runs as well as to print out objects on the fly at breakpoints. Today we’re going to talk about how to launch your app when a certain URL is tapped in the browser. We already saw this a little bit when we looked at connecting our apps to the built in apps on day 15. Today we’ll see how you can take advantage of the same thing. We’ll be starting with a brand new project, but if you’d like to follow along with the completed code, you can access it here.
Creating our project
Open up Xcode and choose File, New, Project. We’ll use a Single View Application and name it DayEighteen:
Now, we aren’t going to do very much with our user interface, but we will put a label on it so we can display some information. Open up the MainStoryboard.storyboard and drop a Label onto your view so it looks like this:
Now open the Assistant Editor in the top right of Xcode and control + click and drag from the label to the code behind to create an outlet. Afterwards your code will look like this:
Now we can do the plumbing for handling the custom URL scheme.
Handling the URL Scheme
Expand the Supporting Files folder and open the DayEighteen-Info.plist file. This file contains some application settings and is where we’re going to put our custom URL scheme. Right click on the Information Property List row at the top and go to Add Row:
In the drop down that appears, select URL types:
Expand the arrows next to URL types and Item 0 and for URL identifier, enter the bundle of your app (in my case it was com.cmr.dayeighteen):
Now, right click on Item 0 and choose Add Row. From the drop down that appears, select URL Schemes:
Expand the URL Schemes arrow and for Item 0, enter the text for the URL scheme you want. So if you wanted the URL to open your app to be myapp://etc you would enter myapp here. For today, I’m going to use dayeighteen:
Loading the app from a web page
Now we need to actually create a link to load our app. Any anchor tag (<a href=…) where the URL starts with the URL scheme you entered above will work. So for my app, the html might look like this:
<a href=”dayeighteen://myapp”>Load my app</a>
I’ve already uploaded a test page to my website which we’ll use to test out the Day Eighteen app. The html for that page can be seen here:
Notice that I’ve added a few query string parameters to the URL. We’ll show why in a minute. Now if you run your app and then go to safari and open http://chrisrisner.com/upload/iOSdayeighteen.html and tap on the Open my app link, your app will load.
Handling the URL in the app
As you saw before, I put some query string parameters on the URL in my web page. Ideally, I’d like to be able to grab those in my app when I detect it’s been loaded by a URL. Thankfully, there is a method in the AppDelegate that will facilitate exactly this. Open the AppDelegate.m file and add the application: handleOpenURL method:
This method will be called whenever your app is launched via URL or processes a URL. If you put a breakpoint in this method and check the url variable, you’ll see that it’s the URL from our webpage. We could then parse that URL and perform custom actions depending on what is sent in. What if we want to set the UILabel with the text that is sent in? We need to have some way of getting the text from the AppDelegate over to our ViewController. To do this today, we’ll use NSUserDefaults which we looked at in day 11. Let’s change the handleOpenURL method to save the URL into defaults:
Now let’s open the ViewController.m and set our label with the URL in the viewDidLoad method:
Now if you try this out, you’ll need to kill the app before tapping the link in the web page. The reason for this is that if you’re already on ViewController when the app is “reopened” by tapping the URL, it will not reload ViewController and won’t trigger changing the text of the label.
Conclusion
Today we looked at how to open an application by tapping a URL in the browser. Many apps use this to help provide a more native experience when users go to their web page. In fact, Yelp provides documentation to load their app and search for a type of food or open a specific restaurant. This allows your apps to integrate with theirs and provide a better experience to your users. Likewise, you might want to expose this capability to others so they can integrate with your app. You can access the final source code from today here.
