So apparently it is not possible to download contact files (VCARD) direct to your iPhone from a web page using Mobile Safari. Think again – what if you attached a VCARD to a calendar appointment from the same web page? iOS 5+ handles VCALENDAR!!! It’s not a perfect solution but pretty close so what follows is a full description of an alternative method for downloading contacts from a web page to an iPhone via Mobile Safari. The basic idea is to attach the required contact information as a file in a calendar event which IS handled by mobile safari. The contact file itself is base64 encoded in the calendar file on the fly using a simple PHP script. Full source code Included with Mobile Safari and Mobile Chrome support from a single download PHP file.
Just want the source code? Download it here [iphone-contact-download-demo] (jQuery Mobile version) and here [iphone-contact-download-demo-html] (HTML) for a fully working HTML5 Web App that you are free to copy and reproduce or go to http://iphone.mobicontact.info and http://demo.mobicontact.info for the working demos. The first demo uses jQuery Mobile and the HTML5 cache manifest which downloads the content to your iphone or HTML5 supporting browser for use when offline. Please google for more details about “offline web apps” if you want to know more.
You may have read that it is not possible to download contact files (VCARD format data as .vcf file) direct to your iPhone from a web page using Mobile Safari. The browser just does not recognise the .vcf extension and mime type (text/x-vcard) as something it should handle. As an aside, Android and most other mobile devices should be able to handle VCARD files easily enough – the standard itself is as old as the hills!
You may also have read that it IS possible to achieve something workable by requesting the users email address and then email them the contact file OR creating a link to a Google Map entry and extract the contact information from that (Google Map entry requires weeks to attain in the UK).
Whilst these are both viable solutions, they are not what I would call user friendly and I tried, unsuccessfully, to get a client of mine to accept either one of them for their contact download on a mobile web app.
Now at this point I should also mention that you CAN download some third party apps that add support for VCARD (.vcf) files – such as QRAFTER and VCARD GETTER both from Kerem Erkan‘s excellent QR reader and his blog on the subject and iPad solution, and HIPSCAN vcard importer. But assuming your readers have these apps installed is one step too far in my opinion so I searched for an alternative solution to email, google maps and third party apps.
Before I continue, here are some reference links describing the problem in more detail:
Jonas Schmid talks about serving the file types correctly.
Then I got thinking, iPhone DOES support vcalendar files downloaded from a webpage as of IOS5. The VCALENDAR files usually have a .ics extension and are handled by mobile safari bringing up a window where the file can be opened and saved to the calendar. I find it unbelievable that Apple and Mobile Safari support VCAL files but not VCARD files but that is just how it is. So what IF I could attach a VCARD file to a VCALENDAR file?
First obstacle is getting an attachment on a calendar event…
Initially I tried adding an attachment to an Outlook calendar appointment in Windows which whilst possible did not download correctly when linked from a webpage and certainly didn’t yield the result I was after. So, I decided to try using Apple software as, after all, we are trying to download onto an iPhone. Using Apple’s default calendar application “iCal” presents one fundamental problem – you can’t add attachments to an event/calendar appointment! So I googled “adding attachments to calendar events in OSX” or similar and found this excellent article which pointed me in the right direction.
So a few minutes later and with a copy of BusyCal installed, I was able to create an event and attach a VCARD file to it (previously saved/exported from my contacts in OSX). This step is only necessary to understand the format of the file created when an attachment is added to a calendar item – you DO NOT need to install BusyCal to implement the solution described below but I include it for reference so that you can see how the VCARD is embedded in the VCALENDAR/VEVENT (.ics) file.
The steps I used were on an Apple iMac running OSX Lion:
- Export a contact from your Contacts/Address Book to create a VCARD file (.vcf) – you can edit this file with a text editor to strip out all the extra stuff such as UID and PROD-ID if you like.
- Create a new calendar – call it what you like, I used “vcal”- in the “On my Mac” area so that when you export this calendar to generate the .ics file, all you get is the single event with the attached card rather than all the events you might have if you use an existing calendar.
- Create a new event – call it anything you like – and give it an arbitrary time and date.
- Attach the VCARD file from (1) to this new event – see screenshot.
- Save the event to the calendar.
- From the main menu of BusyCal, export the calendar to an .ics file on your local disk – download the zip file here –> Apple calendar event with attached contact file.
- You can now use your favourite text editor to examine how Apple store attachments in calendar events and the result is using:
QkVHSU46VkNBUkQNClZFUlNJT046M…etc… [base64 encoded VCARD]
- So I then stripped out all the extra stuff I didn’t need (trial and error here) until I had the absolute minimum that was still recognised by the iPhone as a valid calendar event with attachment. The reason for doing this is to make the PHP file that creates the calendar event on the final webpage as easy as possible – here is the vcal-minimal of what I reduced it to.
- Upload the contact file (.vcf) you want to be downloaded – you’ll need this file so that you can either download it direct to non-iphones or base64 encode it for the iPhone.
- Create a link to a PHP file that will generate the calendar event on the fly such as:
<a href=”download.php”>Download Contact to ANY phone</a> perhaps in a HTML5 mobile app like below:
- Create or upload the “download.php” with the code here iphonecontact-source-code. This PHP file applies the correct header/content type for the calendar file to be downloaded then you have a choice of either getting the calendar file contents by generating the calendar on the fly as shown in “download.php”. This way you get a nice timestamped calendar event showing the time and date of the download.
- That’s it! You’re all set – now browse to the web page on your iphone and click the link to execute “download.php”. Your browser might now show the iphonecontact.ics file and ask you to open it in the iPhones Calendar application (image below) or it may open it automatically (see step 5)
- Select “Open in Calendar” and you will be presented with the calendar appointment and the attached contact file.
- Notice how I set the title of the calendar event to something useful to tell the user what to do with the embedded contact file (you can see the line in “download.php” that sets the SUMMARY field for the event). So now click the attached contact file…
- And then “Create New Contact” and you’re nearly there
- Save the contact and curse under your breath at the hoops Apple made you jump through!
- Using the cache manifest – I had some unexpected behaviour/problems serving the the calendar file (iphonecontact.ics) if it had been cached – I just couldn’t get it to work so I exclude it from the manifest which means it is always downloaded – source code is included in this zip file iphonecontact-source-code.
- [UPDATE Jan 2013 - I have added the user agent sniffing and mobile safari detection and the demo site and source code now reflect the complete solution]
- [UPDATE Feb 2013 - I have tightened the code for Mobile Safari detection in download.php as I had missed that Chrome for iPhone is available that differs only in the Version part of the user agent string and Chrome does not support .vcf or .ics files at all. (Thanks Frank)]
- Mobile safari doesn’t support VCARD (.vcf) files directly but does support VCALENDAR (.ics) files.
- Current best solutions are to email the contact by requesting the users email address OR to embed the contact in a google map link OR download an app that handles VCARDS.
- Apple does support attachments to calendar files but not easily so once we know how this is done we can do it in PHP.
- Embed a VCARD into a VCALENDAR file to allow a user to save a contact to their address book with just an extra click or two.
- Check for iPhone/iPad in the download script and only return the VCAL if Apple device detected.
- Add a further check for Mobile Safari to prevent the “Frame Load interrupted” bug when viewing content from within a native App using UiWebView and render instructions to view in Mobile Safari – some QR readers allow you the choice (my favourite is QRafter).