7

What do I mean is that I want to use the app to create a shortcut with icon on the desktop which will allow user to speed access some functions of this app.

How could I do that, any suggestions? Or anyone have experience with this.

An example: FaceDial

Prasad Devadiga
  • 2,573
  • 20
  • 43
david
  • 139
  • 1
  • 4
  • 10

3 Answers3

11

I spent a good while trying to implement this functionality into an app recently and wanted to put out some of the resources I found on the subject to save someone else a major headache. This is becoming an increasingly popular feature and is used in major apps like Workflow and Facebook's Groups app. Given that Workflow is now an Apple app, it doesn't look like Apple has any issues with using this technique either. The answer provided by @jin is essentially correct. The process looks something like this:

  1. Register a custom URL scheme for your app. Create dynamic URL links that, when followed, lead to content you wish to shortcut to. The only way currently to add a shortcut to the iOS springboard is via Safari's "add to homescreen" function. So what we want to do is use Safari to save our custom URLs that lead to our app to the springboard. The trick is, you can't just send your URL to Safari and save it because doing so will cause Safari to immediately follow the link and the user will never have a chance to hit "Add to homescreen". So to circumvent this issue you'll need to host a web-service somewhere that takes your URL and returns a base64 URL which your user can save to the homescreen.
  2. To create this webservice you can either host it remotely,which will require your user to be online to use, or embed one into your app, which is what Workflow and Facebook Groups does. For embeded servers theres some great fairly easy to use options. If you're using objective-c theres CocoaHTTP and if you're using Swift I'd recommend Swifter, which is what I used.

  3. Your webserver will need to display a page which returns another page in an base64 encoded format so that the user can use the shortcut after the webserver stops running (obviously you can't leave the embedded server running 24/7). The encode page will need to detect if the page was launched in standalone mode. If it was, then it should take you to your app, otherwise it should present you with a page where the user can save the page to the homescreen. Here's a sample of how my html looked for the service: 

    <!DOCTYPE html>
<html>
<div id="html">
    <!DOCTYPE html>
        <html>
            <head>
                <title>Add to Homescreen</title>
                <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
                <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport"/>
                <meta name="apple-mobile-web-app-capable" content="yes" />
                <meta name="apple-mobile-web-app-status-bar-style" content="black" />
                <meta content="SHORTCUT NAME HERE" name="apple-mobile-web-app-title"/>
                <link rel="icon" type="image/png" href="data:image/png;base64, ICON IMAGE DATA"/>
                <link rel="apple-touch-icon" href="data:image/png;base64, ICON IMAGE DATA"/>
                <link rel="apple-touch-startup-image" href="data:image/png;base64, ICON IMAGE DATA"/>
            </head>
            <body>
                <a id="redirectURL" href="YOUR CUSTOM URL" name = "redirectURL"></a>
                <script>
                    if (window.navigator.standalone) {
                        var e = document.getElementById('redirectURL');
                        var ev = document.createEvent('MouseEvents');
                        ev.initEvent('click', true, true);
                        e.dispatchEvent(ev);
                        window.close();
                    } else {
                        document.write("<center><h1>Valet</h1><img id=\"imageIcon\" src=\"data:image/png;base64, IMAGE ICON DATA\"></img><h2> Add this page to your homescreen </h2></center>")
                    }
                </script>
            </body>
        </html>
    </div>
    <script type="text/javascript">
        var html = document.getElementById("html").innerHTML;
        html = html.replace(/\s{2,}/g, '')
           .replace(/%/g, '%25')
           .replace(/&/g, '%26')
           .replace(/#/g, '%23')
           .replace(/"/g, '%22')
           .replace(/'/g, '%27');
        var dataURI = 'data:text/html;charset=UTF-8,' + html;
        window.location.href = dataURI
    </script>
</html>

Here's a list of resources on the topic that helped me out (Sorry, I don't have enough reputation to include more than 2 links... so you'll have to copy pasta these):

  1. Great example of how the web-service works with a live demo: https://gist.github.com/FokkeZB/5899387
  2. Another stack overflow question describing the process: https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-app
  3. Great javascript widget for prompting the user to hit "Add to homescreen" once in Safari: http://cubiq.org/add-to-home-screen
  4. Apple's documentation on custom URL schemes: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html
  5. Apple's documention for built in schemes, which will be better for shortcutting simple task i.e. sending an email: https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html
  6. Example showing how to base64 encode your HTML in Javascript: https://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript

Let me know if anyone has any questions!

Caleb Friden
  • 200
  • 2
  • 8
5

You can not add icons to the 'desktop' (Springboard) other than your application's. What this app is doing is displaying a replica of the iPhone 'desktop' within their app.

UPDATE: The link now points to an app which does this and it seems it is somewhat possible although rather hack in my opinion.

This is how I believe the application works (it is similar to answer below but in more detail).

  • The application creates the webclip image and sends it and the phone number to a web service.
  • The web service then creates a page with the webclip information attached. The phone number/email is converted to a url which will trigger the corresponding app (Mail/Messages/Phone). i.e "+834 895 734" -> tel:834895734 or sms:834895734
  • The app then opens that page in MobileSafari and that page
    presumably has instructions on how to "Add to Homescreen".
  • The user will then have to navigate to and tap the "Add to Homescreen" button. This will add the webclip to the Springboard as an icon.
  • When tapped the webclip activates the url and the Mail/Messages/Phone is launched with the number/email

You could implement something similar (although I wouldnt suggest it). These are the steps to follow:

  • Register your own url scheme
  • Host a page somewhere which contains a webclip for each function/url you want a shortcut for. If the urls are not static or you want dynamic icons, you will need a web service.
  • Handle the url in your application in this AppDelegate method

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url

Note: If your application is deleted, the webclips will no longer work and will confuse the user. Apple may also reject your app.

jin
  • 735
  • 3
  • 10
  • The example app doesn't even look like Springboard. – Jonathan Grynspan Sep 28 '11 at 03:23
  • so I can't add some icons to the Springboard right? this example might be not suitable. – david Sep 28 '11 at 03:38
  • @jin No it's not. It really creates home screen links, the screenshots are just pretty old. It's pretty smart, and works by creating a home screen link to a web site - this web site contains the relevant code prompting you to call a certain number. – Jordan Smith Sep 28 '11 at 06:06
  • However, even though it is possible - I somehow doubt Apple would permit this in the App Store. – Jordan Smith Sep 28 '11 at 06:10
  • The link was for a different app when I viewed it. It seems it is possible tho though in a very hack manner – jin Sep 28 '11 at 22:19
  • My app uses this approach, but it needs connection to the Internet. Is there a way to include something like web server inside app? Then my app could work offline. – kampro Feb 15 '15 at 15:11
2

I guess the application works as follows,

1) It just creating a html for each contact

2) It using the safari functionality "Add to home screen"

Found an excellent answer for simulating the safari functionality,

I created an link from Safari using the "Add To Home Screen" button. It created a directory called 54C86B09482D4560BAB46091CC75825A.webclip inside of /private/var/mobile/Library/WebClips/. That directory contains two files, icon.png and Info.plist. icon.png is simply the icon that gets shown when looking at the apps screen. The contents of Info.plist are where the real information is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
        <key>ClassicMode</key>
        <false/>
        <key>FullScreen</key>
        <false/>
        <key>IconIsPrecomposed</key>
        <false/>
        <key>IconIsScreenShotBased</key>
        <true/>
        <key>Scale</key>
        <real>0.32653060555458069</real>
        <key>ScrollPoint</key>
        <dict>
                <key>x</key>
                <real>0.0</real>
                <key>y</key>
                <real>-183</real>
        </dict>
        <key>Title</key>
        <string>The Daily WTF</string>
        <key>UIStatusBarStyle</key>
        <string>UIStatusBarStyleGray</string>
        <key>URL</key>
        <string>http://thedailywtf.com/</string>
</dict>
</plist>

So, to test this out I created a new folder called C28C8FDC2F184AAD84F77B511442548F.webclip and copied the Info.plist file over from the other directory, edited the url to http://google.com. I then re-sprung the phone and it showed up just like any other webclip. The folder name is simply a hex encoded GUID, I used http://www.somacon.com/p113.php and just selected what was after 0x for this simple test

BenMorel
  • 34,448
  • 50
  • 182
  • 322
KingofBliss
  • 15,055
  • 6
  • 50
  • 72