移动 Safari (iOS) 中的 javascript 不会下载日历邀请

Question

I have a js client side application wherein I create a calendar event and want to download it to the client as an ics file. This works fine on desktop browsers, but mobile safari (and mobile chrome) on iOS refuse to download it.

Here is the code I am using for the function:

let link = document.createElement('a')
// link.setAttribute('target', '_blank')
link.href = ics_string_from_indexedDB
link.download = 'Reminders.ics'
link.click()

When I use the code above and click on my link, mobile safari tells "This website is trying to show you a calendar invite. Do you want to allow this?" with an "Ignore" and "Allow" link. But clicking on the "Allow" link results in:

"Safari cannot download this file".

I have tried adding a target as suggested elsewhere (and commented out above), but that doesn't work either, and clicking on my link does nothing at all if present.

I have also tried creating a blob, but safari refuses to download that in the exact same way.

I have also tried base64 encoding, but again safari refuses (and gives a 404)

Does anyone know of a way to allow iOS safari (client side) to download this file to the calendar?

side note: I can get this working if I send the ical stream from a server instead and set various headers, but I want to do this all on the client side and don't see why I should need a server, all of the correct ics info is present.

Answer 1

Well, I solved this myself, here is what I learned:

Mobile Safari is VERY PICKY about what it considers to be a valid .ics file, and it simply won't recognize a file that it doesn't like. Even though it is valid, and even though iCal and other apps on the desktop (and Safari on the desktop!) will recognize and import these ics files just fine.

I used the same php generator I was using before on my server because it seems to make files in a format that Mobile Safari likes. I don't have the time to exhaustively test which fields it requires and doesn't, but if I had to guess looking at the source, it is maybe timezone related or perhaps the formatting of the UID. If I get the time after this project I will try to get some more specificity on this.

Once my format was all ok, blob downloading from my local indexedDB now works just fine:

let blob = new Blob([ics_string_from_indexedDB], { type: 'text/calendar' })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'Reminders.ics'
link.click()

Answer 2

I had similar problem, iPhone doesn't want to recognize .ics file. Problem was in charset=utf-8

let blob = new Blob([ics_string_from_indexedDB], { type: 'text/calendar;charset=utf-8' })

When I removed it

let blob = new Blob([ics_string_from_indexedDB], { type: 'text/calendar' })

it started working.