How could I create a shortcut on desktop in iOS through an app

Question 1

How could I create a shortcut on desktop in iOS through an app

iphone ios iphone-4

david · Sep 28, 2011 · Viewed 17.1k times · Source

Answer

Answer

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:

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.
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.

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):

Great example of how the web-service works with a live demo: https://gist.github.com/FokkeZB/5899387
Another stack overflow question describing the process: https://stackoverflow.com/questions/28042152/link-to-safari-add-to-home-screen-from-inside-app
Great javascript widget for prompting the user to hit "Add to homescreen" once in Safari: http://cubiq.org/add-to-home-screen
Apple's documentation on custom URL schemes: https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Inter-AppCommunication/Inter-AppCommunication.html
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
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!

Question 2

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

How could I create a shortcut on desktop in iOS through an app

Answer

Related questions