카카오톡 인앱 브라우저는 여타 소셜 앱들과 마찬가지로, OS에서 제공하는 웹뷰(WebView) 기능을 기반으로 구현되어 있습니다.
웹뷰는 기본적으로 파일 다운로드 기능을 제공하지 않지만,
카카오톡 인앱 브라우저에서는 다음과 같은 방식으로 파일 다운로드를 지원하고 있습니다.
| 방식 | iOS 지원 | Android지원 | 설명 | 주의 |
|---|---|---|---|---|
| HTTP 응답 헤더 사용(추천) | O | O | 파일 접근 시, 응답 헤더에 Content-Type, Content-Disposition, Content-Length 값을 포함합니다. | PC 환경에서는 브라우저에 따라 경고 발생 |
<a download> 태그 사용 |
X | O | Android OS가 제공하는 기능 사용 | 현재 Android에서만 지원, iOS에서는 주소로 이동합니다. |
| dataUrl 사용 | O | X | href에 dataUrl을 입력 후, 트리거하여 다운로드 합니다. | iOS에서만 지원되며 다운로드된 데이터를 dataUrl로 표시해야 하기에 과도한 메모리 사용이 발생될 수 있습니다. |
Android
iOS
추천: HTTP 응답 헤더 사용
카카오톡 인앱브라우저의 요청인 경우,
HTTP 응답 헤더를 설정하여 카카오톡이 OS에서 제공하는 다운로드 기능과 연결할 수 있도록 구현합니다.
응답 헤더 예)
Content-Type: application/download <-- application/pdf와 같이 필요한 경우 해당파일의 실제 MIME 설정
Content-Disposition: attachment; filename=파일명
Content-Length: 실제파일사이즈 <-- (옵션) Content-Length를 전달하면 프로그래스 정보가 표시됩니다.
그 외
Android 전용: download tag 사용
<a download href="/my_file.pdf">PDF 다운로드</a>
iOS 전용: dataUrl 사용 (작은 용량이 아닌 경우 비추)
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
const blob = xhr.response;
blobToDataUrl(blob).then((dataUrl) => {
const hiddenLink = document.getElementById('hiddenLink');
hiddenLink.href = dataUrl;
hiddenLink.download = 'filename';
hiddenLink.click();
})
};
function blobToDataUrl(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}