URL Schemes and Titanium - Redux

Presentation to the London Titanium Meetup on 24th Sep 2013 in which I did an updated version of my URL Scheme presentation with additional links, services, gotchas.

Transcript

1. URL Schemes - Redux Jason Kneen Wednesday, 25 September 13
2. "CPVU
   NF http://twitter/jasonkneen http://github.com/jasonkneen http://jasonified.com http://bouncingfish.com App Developer, Titanium “Titan” Wednesday, 25 September 13
3. • https:// • ftp:// • mailto: • tel: • outlook:// What is a URL Scheme? "Top level of the uniform resource locator naming structure" or "URI Schemes" if you like Wednesday, 25 September 13
4. What can we do with them? • Detect Apps • Launch / Resume Apps • Send commands/data to apps • Receive data/callbacks from apps The same thing we do every night, Pinky - try to take over the URL! Wednesday, 25 September 13
5. Examples Wednesday, 25 September 13
6. Launch Center Wednesday, 25 September 13
7. Launch Center apps How it works • App detection via URL Schemes • Ability to add “Actions” • Dependent on URL Scheme list Wednesday, 25 September 13
8. Launch Center apps Apps and Actions Wednesday, 25 September 13
9. iTunes / AppStore Wednesday, 25 September 13
10. AppStore / iTunes Launching the native app from search results Wednesday, 25 September 13
11. AppStore / iTunes Launching the native app from search results Wednesday, 25 September 13
12. Google Maps Wednesday, 25 September 13
13. Google Maps Launching the native app for map links Web App Native App Wednesday, 25 September 13
14. YouTube Wednesday, 25 September 13
15. YouTube Launching YouTube videos in the native app Google Search Native App Wednesday, 25 September 13
16. Gmail Wednesday, 25 September 13
17. Examples iOS Gmail app, detecting other Google app installs Before Google Maps installation After Google Maps installation Wednesday, 25 September 13
18. Examples Gmail opening Chrome App Switch Wednesday, 25 September 13
19. Apps using URL Schemes • youtube:// • tweetbot:// • googlemaps:// • twitter:// • bufferapp:// • linkedin:// • pinterest:// • googlegmail:// Enter into the browser to test • http://wiki.akosma.com/IPhone_URL_Schemes Useful links • http://canhandleUrl.com Wednesday, 25 September 13
20. Launching apps with actions • tweetbot://<screenname>/post?text=<text>&callback_url=<url> • tweetbot://<screenname>/search?query=<text>&callback_url=<url> • tweetbot://<screenname>/user_profile/<screenname>?callback_url=<url> Controlling Tweetbot on iOS tweetbot://jasonkneen/post?text=Hello! Wednesday, 25 September 13
21. Launching apps with actions Try it out without code tweetbot://something/post?text=Hello! http://handleopenurl.com/scheme/tweetbot Wednesday, 25 September 13
22. URL Scheme usages • App launching (Chrome, Maps, YouTube) • Cross-promote apps • Single Sign On • SMS based Push Notifications • Use specific features of other apps Wednesday, 25 September 13
23. Single sign-on apps Launch SSO Login Find related Apps Prompt to install Wednesday, 25 September 13
24. Single sign-on apps Launch sub app SSO exists? Launch SSO Auth Yes Wednesday, 25 September 13
25. Push notifications with SMS Wednesday, 25 September 13
26. Push notifications with SMS SMS Arrives Click URL Launch App Process URL Wednesday, 25 September 13
27. Other uses • White Label app in AppStore • Generate “Bookmark” with custom URL • Bookmark has custom Icon / Name • e.g salonapp://?salonID=1234&theme=dark • Also, testing feature branches, languages, launching into sub-apps (Container based apps). White Labeling Wednesday, 25 September 13
28. Sending binary data between apps Wednesday, 25 September 13
29. Sharing data between apps • Encode the file into base64 • Transfer it via URL • URL Decode on the other side • Decode from base64 • Do Stuff Transferring binary files Wednesday, 25 September 13
30. Demo Wednesday, 25 September 13
31. • Select a photo in app 1 • Encode it, send to app 2 • Decode and display • Edit it in App 2 • Send the new image back Wednesday, 25 September 13
32. Implementing URL Schemes Adding to Titanium Apps • Register a URL Scheme for an App • Add events and handling code to read url • Add code to parse URLs • Add actions, responses, callbacks • Let people know about it (if public) Wednesday, 25 September 13
33. Implementing URL Schemes Gotchas - Android • Apps are launched as separate instances • App stays in browser context • Use SingleTask mode • Use Intents for picking up app resume URLs Wednesday, 25 September 13
34. Where to publish? http://wiki.akosma.com/IPhone_URL_Schemes http://handleopenurl.com http://applookup.com Wednesday, 25 September 13
35. Where to publish? Wednesday, 25 September 13
36. Detecting and launching apps on iOS                          if  (Ti.Platform.canOpenUrl(“tweetbot://”);{             //  do  stuff   Ti.Platform.openUrl(“tweetbot://default/post?text=Hello!”); } Wednesday, 25 September 13
37. Detecting and launching apps on Android var  myIntent  =  Ti.Android.createIntent({   action  :  Ti.Android.ACTION_MAIN,   packageName  :  "com.mybundle.appname",   className  :  "com.mybundle.appname.appname",   flags  :  Ti.Android.FLAG_ACTIVITY_NEW_TASK, }); myIntent.addCategory(Ti.Android.CATEGORY_LAUNCHER); Ti.Android.currentActivity.startActivity(myIntent);var  myIntent  =   Ti.Android.createIntent({   action  :  Ti.Android.ACTION_MAIN,   packageName  :  "com.mybundle.appname",   className  :  "com.mybundle.appname.appname",   flags  :  Ti.Android.FLAG_ACTIVITY_NEW_TASK, }); myIntent.addCategory(Ti.Android.CATEGORY_LAUNCHER); Ti.Android.currentActivity.startActivity(myIntent); Wednesday, 25 September 13
38. Register a URL Scheme for an App In iOS using info.plist Wednesday, 25 September 13
39. Register a URL Scheme for an App In Android <android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest android:versionCode="1" android:versionName="1.00"/> <activities> <activity url="app.js"> <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> <category android:name="android.intent.category.BROWSABLE"/> <data android:host="" android:scheme="myscheme"/> </intent-filter> </activity> </activities> </android> TiApp.xml :- Wednesday, 25 September 13
40. Register a URL Scheme for an App In both iOS and Android within TiApp.xml Wednesday, 25 September 13
41. Add handling code to parse URLs In iOS, trap app start and resume events if  (Ti.App.getArguments().url)  {   urlToObject(Ti.App.getArguments().url); } http://tinyurl.com/urlschemecode Wednesday, 25 September 13
42. Add handling code to parse URLs In Android (inc. for SingleTask mode) var  activity  =  Ti.Android.currentActivity;   var  processIntentURL  =  function(intent)  {     if  (intent.getData())  {       Ti.API.info("Android  URL  data:  "  +  intent.getData());       checkImportDetails(intent.getData());     }  else  {       Alloy.Globals.UI.openController('tutorial');     }   };   processIntentURL(activity.getIntent());  //  gets  the  first  load   activity.addEventListener("newintent",  function(e)  {                processIntentURL(e.intent);  //  gets  the  switch  back        });                                 http://tinyurl.com/urlschemecode Wednesday, 25 September 13
43. Parsing the URLs In Android and iOS function  urlToObject(url)  {   var  returnObj  =  {};   url  =  url.replace('URLSCHEME://?',  '');   var  params  =  url.split('&');   params.forEach(function(param)  {     var  keyAndValue  =  param.split('=');     returnObj[keyAndValue[0]]  =  decodeURI(keyAndValue[1]);   });   return  obj; } http://tinyurl.com/urlschemecode Wednesday, 25 September 13
44. URL Scheme compatibility issues • URL Schemes won’t work off device (mostly) • Not recognized by some apps / services e.g TinyURL • Solution: Use a hosted redirect script Wednesday, 25 September 13
45. Using a redirect script • Allows you to detect apps, act accordingly • You can use services that don’t accept URL schemes • Allows checking, fallback URLs Wednesday, 25 September 13
46. Using a redirect script http://www.foo.com/redirect.html? action=post&data=Hello redirect.html Check for App Launch App Fallback Wednesday, 25 September 13
47. Creating a redirect script Wednesday, 25 September 13
48. or use a URL Scheme Generator @joshj - Josh Jenson http://appurl.io/ • Creates a hosted link • Use it in emails, web, twitter etc • Fallback to AppStore / Other URL Wednesday, 25 September 13
49. or use a URL Scheme Generator http://appurl.io/ Wednesday, 25 September 13
50. Summary • Direct cross-platform, inter-app communication • Growing support from developers • Resources available to find out Schemes / Actions • Shorten, handle fallback, desktop access • You can send more than text! Wednesday, 25 September 13
51. Resources • https://gist.github.com/jasonkneen/5736738 • http://fokkezb.nl/2013/08/26/url-schemes-for-ios- and-android-1/ • http://fokkezb.nl/2013/09/20/url-schemes-for-ios- and-android-2/ Wednesday, 25 September 13
52. Thank you! Wednesday, 25 September 13