It’s been nine months since I first wrote the original post for using a calendar appointment as a wrapper for a contact download to bypass Apple’s unfathomable determination to prevent VCARD download direct from web pages.
As you can see from all the comments and questions on the original post, it has caused quite a stir with several examples that I know of being deployed on professional sites. So I thought would write a bot more about my experiences helping out those of you kind enough to get in touch.
- There are now three demos available for you to test, download and use free of charge
- The original demo iPhone Contact Download Demo used jQuery Mobile and I included a complete source code application for you to download. In that JQM example I was using rel=”external” to force download of the links and everything seems to work fine – after a few iterations that posters pointed out to catch things like Chrome browser on the iPhone and UiWebView anomlaies. The download.php file contains all the user agent sniffing and detection to handle a variety of browsers and platforms. I think the presence of rel=”external” is what allows this demo to work successfully for both Android and iPhone users. I don’t know for sure but I think it moght be that this forces some kind of page load (possibly via AJAX) without the “harshness” of the deprecated HTML target=”_blank”.
- BUT we hit a problem when you removed the jQuery Mobile and tried the same demo but plain ol’ HTML as can be seen here HTML contact download to iPhone. You’ll have to take my word for it that what would appear to be a very simple exercise soon became very frustrating as I tried various Android browsers and came unstuck downloading the simple VCARD (via a direct link to the .vcf file) to a Samsung Galaxy S2 native browser. It insisted on treating it as text even when I served the correct headers in PHP and added AddType text/x-vcard to .htaccess. The only way I could get it work was with a modified .htaccess as shown below. Now I know this should be identical to what I was doing in PHP but I just couldn’t get it to work – see the many examples at Developer Code
<FilesMatch "\.vcf$"> ForceType text/x-vcard;charset=utf-8 Header set Content-Transfer-Encoding binary Header set Content-Disposition "attachment; filename='contact.vcf';" Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0, private" </FilesMatch>
- The above was highlighted when we tried to pull the solution away from JQM and into a Joomla component as requested by one blogger. The Joomla solution used PHP and HTML but would not work reliably until we removed the target=”_blank” from the anchor tag for an iPhone download link and added it for the direct VCF file download for all other phones BUT we also needed the .htaccess to server the correct content type text/x-vcard. Supposedly this content type has been deprecated in favour of text/vcard but in my experience someone for got to tell the browser developers on Android phones and I had limited success with the later (standardised?) version.
- As the JQM demo was a fully functioning web app using the HTML5 offline cache you need to be familiar with clearing your “normal” cache AND the HTML5 cache as detailed by the manifest.php – I use chrome so you can view what is saved by going to chrome://appcache-internals/. If you’ve got it setup correctly, then the offline cache should be refreshed automatically on detecting a change in the index.php file but if you ever want to be sure – delete both your cache contents.
- You’ll find a User Agent Switcher such as Ultimate User Agent invaluable for simulating and debugging the various mobile browser behaviours. Simply set your Chrome browser (or other with equivalent user agent switching plugin) to iPhone and watch it download the vCAlendar .ics file rather than the vCard .vcf file.
- And of course, for the really tricky problems you’ll need a PHP debugger – I use Netbeans but I am sure there are many others to choose from.