CODEWITHSUNDEEP
iphonegoogle-chromemobile-safariicalendarmobile-chrome
SteveJ
SteveJ

Reputation: 310

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

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:[email protected]
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?

Upvotes: 9

Views: 7107

Answers (3)

Abhishek Gharat
Abhishek Gharat

Reputation: 11

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%
}

Upvotes: 0

Adam
Adam

Reputation: 6773

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

Upvotes: 4

anmari
anmari

Reputation: 4173

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

Upvotes: 1

Related Questions