ICS file Download fails on iPhone Chrome with "Unknown File Type"

Question

I've got a php script that's auto-generating an ics file for a mobile web app.

Using Chrome on my Win7 desktop, the ics file downloads fine, and Outlook likes it.

Using Safari on my iPhone, the ics file opens the calendar app as expected, and allows me to add to calendar.

Using Chrome on my iPhone, I get "Download Failed. Chrome cannot download this file. Error 102 (): Unkown File Type."

I'm sending these headers:

header("Content-Type: text/Calendar; charset=utf-8");
header("Content-Disposition: inline; filename={$slug}.ics");
header("HTTP/1.0 200 OK", true, 200);

and my ics file output is:

BEGIN:VCALENDAR
VERSION:2.0
CALSCALE:GREGORIAN
PRODID:-//example.com//NONSGML blah blah//EN
METHOD:PUBLISH
BEGIN:VEVENT
UID:20130412T062148-527420343@example.com
DTSTAMP:20130412T062148
DTSTART:20130524T134500Z
DTEND:20130524T153000Z
LOCATION:
SUMMARY:This is the summary
DESCRIPTION:This is the description
STATUS:CONFIRMED
TRANS:OPAQUE
END:VEVENT
END:VCALENDAR

Any ideas about what iPhone Chrome isn't liking?

Have you learned anything about this? I'm trying to find a way around the same problem. — Solid I, Jun 01 '13 at 15:23
From what I can tell, inter-browser incompatibility makes this impossible to deploy reliably across multiple browsers, at least for the time being. :( — SteveJ, Jun 05 '13 at 02:58
I am having same issue can anyone let me know about any solution. — Jaffar Hussain, Aug 12 '16 at 13:49
Having the same issue here. We have the content-type in lowercase. Chrome on Android and Desktop works fine as does Safari on iphone but not Chrome on iphone. Any news? — Adam, Aug 22 '17 at 09:20
Use the webcal:// protocol for Chrome in iOS like addevent.com does — Vlax, Jun 07 '19 at 10:41

score 4 · Answer 1 · answered Aug 22 '17 at 09:45

4

It looks like a bug in Chrome for iOS. See https://bugs.chromium.org/p/chromium/issues/detail?id=666211

answered Aug 22 '17 at 09:45

Adam

6,361
3
34
52

score 1 · Answer 2 · answered May 11 '13 at 11:52

1

most examples I see are in lowercase http://www.w3.org/Protocols/rfc1341/4_Content-Type.html

try making that

Content-Type: text/calendar

not

Content-Type: text/Calendar

answered May 11 '13 at 11:52

anmari

3,242
1
12
12

We are having the same problem. We already had the content type in lowercase. Any other ideas? – Adam Aug 22 '17 at 09:20

Abhishek Gharat · Answer 3 · 2020-07-21T17:17:43.490

Use webcal://your_link.ics

This should solve your problem. Here's a preview of how it'll appear

Here's a jsbin demonstrating automatic selection of protocol basis the user agent.

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="webcal://w3assets.angelbroking.com/wp-content/uploads/2020/07/ANGEL_BROKING_MONSOON_FESTIVAL.ics">Test webcal://</a>
  <br><br>
  <a href="https://w3assets.angelbroking.com/wp-content/uploads/2020/07/ANGEL_BROKING_MONSOON_FESTIVAL.ics">Test https://</a>
  <br><br>
  <a id="auto" href="https://w3assets.angelbroking.com/wp-content/uploads/2020/07/ANGEL_BROKING_MONSOON_FESTIVAL.ics">Auto (check JS)</a>
  <br><br>
  <textarea readonly id="ua"></textarea>
</body>
</html>

Javascript:

// Source: https://stackoverflow.com/a/9039885/3577736
function is_iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}

if(is_iOS()) {
    document.getElementById('auto').href = document.getElementById('auto').href.replace(/https?:/, 'webcal:');
}

// Debugging
document.getElementById('ua').value =  navigator.userAgent;

CSS:

textarea {
  width: 100%
}

ICS file Download fails on iPhone Chrome with "Unknown File Type"

3 Answers3

Linked