Toen ik aan de slag ging met Touch Icon Creator, was ik uiteraard ook benieuwd naar de werking van het geheel. Het ging me dan met name om de vraag of de applicatie ook een online gedeelte nodig had om te kunnen werken.
Dat blijkt inderdaad zo te zijn. Na het invullen van de gegevens worden de titel en de afbeelding naar een server gestuurd. Daar wordt de afbeelding op maat gemaakt en eventueel voorzien van een glossy effect (als jij daar voor kiest). Zodra de snelkoppeling aangemaakt is, heb je de server niet meer nodig, er hoeft dan ook geen URL, telefoonnummer of mailadres verstuurd te worden. Dat gebeurt allemaal lokaal.
Wat me echter opviel (zie ook de screenshot hierboven) was dat er een heel aparte URL gevormd werd door de applicatie. Het was niet gewoon een URL die verwees naar een online server, maar eentje die begon met “data:text/html;charset=UTF-8”. Daar moest ik meer van weten.
De URL bleek lang, heel lang, zo lang zelfs dat ik hem maar even in een tekstdocument geplakt heb. Je kunt hem hier downloaden (TXT-bestand 6KB). Dit is dus niet de bron van de webpagina, maar de URL. Ik had eerlijk gezegd geen idee dat een URL in mobile Safari zó lang mocht zijn.
Ook Google Chrome blijkt er overigens zonder problemen mee om te kunnen gaan. Als je de inhoud van het tekstbestand selecteert en in zijn geheel in de adresbalk plakt, dan krijg je een pagina te zien.
De hele tekst is URLEncoded, dus om het een beetje te kunnen lezen heb ik gebruik gemaakt van deze online URL Decoder. Daarna was het een kwestie van returns invoegen en wat tabs zodat de code van de URL er opeens leesbaar uitzag. Je kunt dat resultaat hier als tekstbestand downloaden (TXT-bestand 5KB).
Het blijkt dus dat die URL bestaat uit een HTML pagina met Javascript. Het is niet zo dat echt 100% van de pagina in die URL verstopt zit, er wordt namelijk verwezen naar twee CSS-bestanden (stylesheets) en een afbeelding die op de server van de maker staan.
De snelkoppeling die je maakt op je beginscherm bevat dus die hele URL/pagina. Er zit een eenvoudig stukje JavaScript in dat controleert of je de URL/pagina “standalone”, dus vanaf je beginscherm, opstart. Als dat zo is dan wordt niet het venster met uitleg getoond, maar wordt je meteen doorgestuurd naar de link die je vastgelegd hebt.
Voor URL’s naar websites gaat dat zo te zien tamelijk direct, daarom werken die waarschijnlijk ook zonder de applicatie, bij telefoonnummers staat er een code die er zo uitziet: “ticon:51ad47ce” en hoe mobile Safari daar iets van kan maken heb ik nog niet ontdekt. Als ik dat zo invoer in de browser dan geeft die alleen een foutmelding. De pagina heeft dus nog niet al haar geheimen bloot gegeven.
http://ictoblog.nl/2011/01/14/www.gorissen.info/Pierre/files/TouchIcon/touch_icon_source.txt
Ik krijg een 404-melding…?
Oeps, http:// vergeten voor de twee links, dan ziet WordPress ze als interne urls. Is gefixed.