Linking iOS App from Web

Nowadays almost all web sites  match with a mobile Application. Users jump from web to Apps and back, making this experience as fluid as possibile is becoming really important. In this post I’d like to explain the standard approach to this problem and how I get an enhanced solution to it.

Redirect to store to download the App
Redirect to store to download the App

Standard approach

Before describing the standard approach we need to explain how an iOS App can be launched from a web site and how this is typically used.

iOS Apps comes with a configuration file named Info.plist who gives all the parameters needed by the iOS runtime to execute the App itself. Some of these parameters are  App name, supported screen orientations, default language and many others. One of these is URLscheme  who is a powerful system to launch the App from outside.

Looking to a snippet of Info.plist took from my App Pushetta it looks as follow:

<key>CFBundleURLSchemes</key>
<array>
<string>pushetta</string>
</array>

What this mean? It simply says the App can be executed with a custom url, in this case the url is pushetta://. So first step is now clear, if a web page has a link with this url schema, loading it on a device with the App installed and using the link the App is started. WOW this is great!!! But wait a moment, if the App isn’t installed? Ehm, we get an error.

Url scheme error
What happen when App isn’t installed?

Error is self explaining, we tried to open an url Safari doesn’t understand. This freezes our initial enthusiasm.

The standard solutions comes in mind is to check if the App is installed before running the custom url. BEEEEEEEP!!! This isn’t possible! For (obvious) privacy problems a web page can’t inspect the device to known if a specific App is installed.

Ok, so we are at dead end, we know how to execute the App from web page but we don’t know how to be sure is installed before this.

Some clever people made a work around to this problem with a trick based on JavaScript setTimeout function. The idea behind the solution is: we start a timer that when expire executes a function whose redirects the user to a predefined url (it can be for example a landing page with info about the App and a link to the store). Right after the start of the timer the script try to launch the App with the custom url, so we get two scenarios:

  • App is installed: it runs and the timer never fires (this because running the App brings the user outside the browser)
  • App isn’t installed: we get the error but after awhile we get redirected to a predefined page

The code for this solution is

   setTimeout(function(){
                window.location = "http://www.pushetta.com";
              }, 1000);
   document.location = "pushetta://";

The code make exactly what we described: it sets a timer function that after one second (1000 milliseconds) redirects the user to http://www.pushetta.com. Next it tries to run pushetta:// custom url scheme and this implies the two scenarios described.

This is a pretty poor solution, it works but with a bad user experience. This is where I started to look for a better solution, googling around wasn’t productive so I decided to make some tries. My starting point was: I can’t check if the App is installed but if I could handle the error on opening a wrong url this would be enough to resolve the problem. This is simplest to say that to do, window.location gives an error when we try to open a wrong url but it seems not trappable by code. So how can we do? The solution I used is based on a iframe. As many know an iframe is something like an hole (squared) inside the page who loads another url, the idea is: if I create an iframe in the DOM with it’s src set to the custom schema, will it show the error popup when the schema is wrong (ie the App is not installed)? Luckily enough this doesn’t happen and so we can implement the right solution based on this behaviour.

   // timer func to bring the user to a web page if App isn't installed
   setTimeout(function(){
            document.location = "http://www.pushetta.com";
        }, 1000);

   // put an iframe in the DOM with "pushetta://" as src (and 0x0 dimensions)
   ifrm = document.createElement("IFRAME"); 
   ifrm.setAttribute("src", "pushetta://"); 
   ifrm.style.width = 0+"px"; 
   ifrm.style.height = 0+"px"; 
            
   document.body.firstElementChild.appendChild(ifrm);

The solution seems to work well but I consider it a test to be verified with various scenarios.

Apple WWDC 2014

Apple developer event of this year was really rich and for the first time after many months I see a revamped strategy in Apple plans.

The strategy is clear: focus on ecosystem!

wwdc_banner_promo

Yes, a great advantage of Apple on concurrents it’s a large and consistent ecosystem. Making it more integrate can overtake other ones (Google in primis). Increasing cooperations capabilities of two main platforms can give to end user features that other (aka Android) can’t reach out.

But, letting marketing strategies to Apple, I’d like to point attention to the shift to the new language for App development: Swift.

I spent part of night reading the free eBook downloadable from itunes, and a thought flashed in my mind: is this an Apple’s try to make only one language for client Apps and backend?

Swift appears more suitable of Objective-C in a server side use, and a big problems of today App developers it’s backend. Many App developers can fluently write client software but at same time it can be really problematic for they to write backend one. So what if Apple will offer a backend solution programmable with the same language we use for writing clients Apps? How many developers will use this service? I think many, or rather MANY!

The idea it’s only speculation at this moment but there are some good reasons to let me think can be real in near future:

  1. Apple announce also CloudKit, so backend problem is clear to Apple
  2. Controlling backends of Apps can enhance security
  3. New services can be developed and offered in a straightforward way using internal Cloud
  4. Giving developer a good environment it’s the best way to keep them

It’s not only a language problem, Android is Java based and Java it’s perfectly suitable for server side development. It’s, again, ecosystem related. Backend it’s problematic because it needs system related skills, also using one of many cloud solutions. Developer needs to known about systems and all architectural decisions  are up to him.

What I imagine from Apple instead it’s an integrated solution where developer doesn’t need to care about server system. I imagine an Xcode release where You can write client software together with server one and publish App and server software will be a matter of some clicks.

I really hope these speculations will be real in a near future, work in a so integrated environment will be a big boost in developer’s productivity and I can’t wait to try it 🙂