I am trying to generate a ics file and allow user to download. It works on all browsers expect iOS Chrome and Firefox. iOS Chrome will download the file but rename to document and .data extention Anyone know what is the reason and give me a help please!

    const iOS =
      (/iPad|iPhone|iPod/.test(userAgent) ||
        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0)) &&
      !window.MSStream;
    var icsMSG =
      'BEGIN:VCALENDAR\n' +
      'VERSION:2.0\n' +
      'PRODID:-//...//NONSGML ...//EN\n' +
      'METHOD:PUBLISH\n' +
      'BEGIN:VEVENT\n' +
      `SUMMARY:${appointment?.location?.clinicName} Appointment for ${identity.firstName} ${identity.lastName}\n` +
      'ORGANIZER;CN=abc\n' +
      `DTSTART:${startTime}\n` +
      `DTSTAMP:${startTime}\n` +
      `LOCATION:${location}\n` +
      'BEGIN:VALARM\n' +
      'TRIGGER:-PT30M\n' +
      'REPEAT:1\n' +
      'DURATION:PT15M\n' +
      'ACTION:DISPLAY\n' +
      'DESCRIPTION:Reminder\n' +
      'END:VALARM\n' +
      `DESCRIPTION:${appointment?.care?.caretype}; Estimated length: ${
        appointment?.care?.estTime
      } minutes; Provider: ${appointment.provider.name},  ${
        appointment.provider.type
      }; Estimated cost: ${!hasInsurance ? 'without insurance' : ''} ${
        appointment?.care?.estCost
      }\n` +
      'END:VEVENT\n' +
      'END:VCALENDAR';
    var blob = new Blob([icsMSG], { type: 'text/calendar;charset=utf-8' });
    if (iOS) {
      var reader = new FileReader();
      reader.onload = function (e) {
        window.location.href = reader.result;
      };
      reader.readAsDataURL(blob);
    } else {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'calendar.ics';
      // TODO: Try to not use blob but replace https with webcal so calendar can open automatically

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }```