Packaging Apps as Bookmarks: Bookmarklets and Data URLs Because iPhone and iPod touch applications function inside of the Mobile Safari environment, there are two seemingly obvious restrictions for the Web developer: You must live with the built - in capabilities of the Mobile Safari browser; and you need a constant Wi - Fi (or, for iPhone, EDGE) connection in order to run any application. The truth is that you can get around these limitations by taking advantage of two lesser - known technologies — bookmarklets and data URLs. These technologies have actually been around for years, but they have tended to exist on the periphery of mainstream Web development. However, developers are now reexamining these two developer tools to maximize the potential of the iPhone application platform. Bookmarklets (short for bookmark applets ) are mini JavaScript “ applets ” that can be stored as a bookmark inside of Safari. A data URL is a technique for storing an entire Web page or application (pages, styles, images, data, and scripts) inside of a single URL, which can then be saved as an iPhone/iPod touch Bookmark. This application - in - a - bookmark can then be accessed in offline mode. Bookmarklets A bookmarklet is JavaScript stored as a URL and saved as a bookmark in the browser. It is typically used as a one - click applet that performs a very specific task or performs an action on the current Web page. A bookmarklet uses the javascript: protocol followed by script code. For instance, here ’ s the simplest of examples: javascript:alert(‘iPhone’) c10.indd 221c10.indd 221 12/7/07 2:56:56 PM12/7/07 2:56:56 PM Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 222 Because the scripting code for a bookmarklet is housed inside of a URL, the script must be condensed into one long string of code. Therefore, to enter multiple statements, separate each line with a semicolon: javascript:alert(‘Bookmarklet 1’);alert(‘Bookmarklet 2’) As you can see, there are spaces inside each of the strings. You can either substitute %20 for a blank space or let Safari do the conversion for you. If the script returns a value, then it should be enclosed inside of void() to ensure that the JavaScript code runs as expected. For example, the following Search Wikipedia bookmarklet displays a JavaScript prompt dialog box (see Figure 10 - 1 ), and then calls a Wikipedia search URL using the user ’ s value as the search term: javascript:t=prompt(‘Search Wikipedia:’,getSelection());if(t) void (location.href=’http://en.wikipedia.org/w/wiki .phtml?search=’+escape(t)) Figure 10-1: Search Wikipedia bookmarklet Here ’ s a second example that provides a front - end onto Google ’ s define service: javascript:d=prompt(‘Define:’,getSelection());if(d)void(location.href=’http:// www.google.com/search?q=define:’+escape(d)) c10.indd 222c10.indd 222 12/7/07 2:56:56 PM12/7/07 2:56:56 PM Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 223 Adding a Bookmarklet to Mobile Safari Bookmarklets are normally added in a standard browser through a drag - and - drop action. However, because that user input is not available in Mobile Safari, you need to add the bookmarklet through the following process: 1. On your main computer, create your bookmarklet script and test it by pasting it into the URL box of Safari. 2. Once the functionality works as expected, drag the javascript: URL onto your Bookmarks bar in Safari. If you are going to have a set of bookmarklets, you may wish to create a special Bookmarklets folder to store these scripts. Or, if your bookmarklet is contained within the href of an a link, then drag the link onto the Bookmarks bar instead. 3. Synch the bookmarks of your iPhone and main computer through iTunes. 4. Access the bookmarklet in the Bookmarks inside Mobile Safari (see Figure 10 - 2 ). Figure 10-2: Accessing a bookmarklet from iPhone c10.indd 223c10.indd 223 12/7/07 2:56:57 PM12/7/07 2:56:57 PM Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 224 Alternatively, you can add a bookmarklet directly into Mobile Safari ’ s Bookmarks by creating a link to any normal Web page, and then editing the URL of the bookmark. Exploring How Bookmarklets Can Be Used While bookmarklets can be used for these sorts of general purposes, their real usefulness to the iPhone application developer is turning JavaScript into a macro language for Mobile Safari to extend the functionality of the browser. For example, Mobile Safari always opens normal links in the existing window, replacing the existing page. Richard Herrera from doctyper.com wrote a bookmarklet that transforms the links of a page and forces them to open in a new tab. Here is the script, which is tricky to read because it is contained within a one - line, encoded URL: javascript:(function(){var%20a=document.getElementsByTagName(‘a’);for(var%20i=0,j=a .length;i%3Cj;i++){a[i].setAttribute(‘target’,’_blank’);var%20img=document.createEl ement(‘img’);img.setAttribute(‘class’,%20’new- window’);img.setAttribute(‘src’,’data:image/gif;base64,’+’R0lGODlhEAAMALMLAL66tBISE jExMdTQyBoaGjs7OyUlJWZmZgAAAMzMzP///////wAAAAAAAAAAAAAA’+’ACH5BAEAAAsALAAAAAAQAAwAA AQ/cMlZqr2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA/LqdopZS’+’DBBIpGG5lBQH0GgtU9xNJ9XZ1 cnsNicRADs=’);img.setAttribute(‘style’,’width:16px!important;height:12px!important; border:none!important;’);a[i].appendChild(img);}})(); At the time of this writing, Windows Safari has several issues working with bookmarklets. In order for this bookmarklet to work on an iPhone synched with Windows Safari, it must be completely URI encoded: javascript:(function()%7Bvar%20a%3Ddocument.getElementsByTagName(‘a’)%3Bfor(var%20i %3D0%2Cj%3Da.length%3Bi%3Cj%3Bi%2B%2B)%7Ba%5Bi%5D.setAttribute(‘target’%2C’_blank’) %3Bvar%20img%3Ddocument.createElement(‘img’)%3Bimg.setAttribute(‘class’%2C’new- window’)%3Bimg.setAttribute(‘src’%2C’data%3Aimage%2Fgif%3Bbase64%2C’%2B’R0lGODlhEAA MALMLAL66tBISEjExMdTQyBoaGjs7OyUlJWZmZgAAAMzMzP%2F%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAA ’%2B’ACH5BAEAAAsALAAAAAAQAAwAAAQ%2FcMlZqr2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA%2FL qdopZS’%2B’DBBIpGG5lBQH0GgtU9xNJ9XZ1cnsNicRADs%3D’)%3Bimg.setAttribute(‘style’%2C’w idth%3A16px!important%3Bheight%3A12px!important%3Bborder%3Anone!important%3B’)%3Ba% 5Bi%5D.appendChild(img)%3B%7D%7D)()%3B Note that while this URI encoded script works on iPhone, it (along with other iPhone-specific bookmark- lets in this chapter) still will not work on Windows Safari. Additionally, when you synch with Windows Safari, iPhone bookmarklets can occasionally behave unexpectedly. An iPhone user can then use this self-contained “applet” on any page in which they wish to transform the links. Notice that the image itself is encoded in a data URL, so that the script is not dependent on any external files. While the entire script needs to be condensed into a single string of commands, Safari is actually smart enough to convert the hard breaks for you when a multilined script is pasted into the URL box. Just make sure each statement is separated by a semicolon. Therefore, the following code, which is much easier to work with and debug, would still execute properly when pasted directly into the URL box: c10.indd 224c10.indd 224 12/7/07 2:56:57 PM12/7/07 2:56:57 PM Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 225 javascript:( function(){ var a=document.getElementsByTagName(‘a’); for(var i=0,j=a.length;i%3Cj;i++) { a[i].setAttribute(‘target’,’_blank’); var img=document.createElement(‘img’); img.setAttribute(‘class’,’new-window’); img.setAttribute(‘src’,’data:image/gif;base64,’+’R0lGODlhEAAMALMLAL66tBISEjExMdTQy BoaGjs7OyUlJWZmZgAAAMzMzP///////wAAAAAAAAAAAAAA’+’ACH5BAEAAAsALAAAAAAQAAwAAAQ/cMlZq r2Tps13yVJBjOT4gYairqohCTDMsu4iHHgwr7UA/LqdopZS’+’DBBIpGG5lBQH0GgtU9xNJ9XZ1cnsNicRA Ds=’); img.setAttribute(‘style’,’width:16px!important; height:12px!important; border:none!important;’); a[i].appendChild(img); } })(); Bookmarklets can be handy developer tools to assist in testing and debugging on iPhone. For example, the following bookmarklet, based on a script created at iPhoneWebDev.com , gives you View Source functionality (see Figure 10-3 ) on iPhone itself: javascript: var sourceWindow = window.open(“about:blank”); var newDoc = sourceWindow.document; newDoc.open(); newDoc.write( “<html><head><title>Source of “ + document.location.href + “</title><meta name=\”viewport\” id=\”viewport\” content=\”initial-scale=1.0;” + “user-scalable=0;maximum-scale=0.6667;width=480\”/><script>function do_onload()” + “{setTimeout(function(){window.scrollTo(0,1);},100);}if(navigator.userAgent.indexOf ” + “(\”iPhone\”)!=- 1)window.onload=do_onload;</script></head><body></body></html>”); newDoc.close(); var pre = newDoc.body.appendChild(newDoc.createElement(“pre”)); pre. appendChild(newDoc.createTextNode(document.documentElement.innerHTML)); If your iPhone is synching with Windows, you would want to fully URI encode the script: javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20new Doc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3 E%3Chead%3E%3Ctitle%3ESource%20of%20%27%2Bdocument.location.href%2B%27%3C/title%3E% 3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial- scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum- scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetT imeout%28function%28%29%7Bwindow.scrollTo%280,1%29%3B%7D,100%29%3B%7Dif%28navigator .userAgent.indexOf%28%22iPhone%22%29!%3D- 1%29window.onload%3Ddo_onload%3B%3C/script%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/ht ml%3E%27%29%3B%0AnewDoc.close%28%29%3B%0Avar%20pre%3DnewDoc.body.appendChild%28newD oc.createElement%28%22pre%22%29%29%3B%0Apre.appendChild%28newDoc.createTextNode%28d ocument.documentElement.innerHTML%29%29%3B c10.indd 225c10.indd 225 12/7/07 2:56:57 PM12/7/07 2:56:57 PM Chapter 10: Packaging Apps as Bookmarks: Bookmarklets and Data URLs 226 Go to www.wrox.com for a useful set of bookmarklets that you can use. Storing an Application in a Data URL In addition to JavaScript functionality, you can also store a Web page or even a complete application inside of a bookmark. The data: protocol allows you to encode an entire page’s content — HTML, CSS, JavaScript, and images — inside a single URL. To be clear, data URLs store, not a simple link to a remote page, but the actual contents of the page. This data URL can then be saved as a bookmark. When users access this bookmark, they can interact with the page whether or not they have Internet access. The implications are significant — you can use data URLs to package certain types of Web applications and get around the live Internet connection requirement. Figure 10-3: Viewing a page’s source on iPhone c10.indd 226c10.indd 226 12/7/07 2:56:57 PM12/7/07 2:56:57 PM . 3Cmeta%20name%3D%22viewport%22%20id%3D%22viewport%22%20content%3D%22initial- scale%3D1.0%3B%20user-scalable%3D0%3B%20maximum- scale%3D0.6667%3B%20width%3D480%22/%3E%3Cscript%3Efunction%20do_onload%28%29%7BsetT. javascript:var%20sourceWindow%3Dwindow.open%28%27about%3Ablank%27%29%3B%0Avar%20new Doc%3DsourceWindow.document%3B%0AnewDoc.open%28%29%3B%0AnewDoc.write%28%27%3Chtml%3 E%3Chead%3E%3Ctitle%3ESource%20of %20% 27%2Bdocument.location.href%2B%27%3C/title%3E%