크롬 패키지 응용 프로그램 - Webview에서 파일 다운로드

기존 Ajax 스타일 웹 응용 프로그램을 Chrome 패키지 응용 프로그램으로 사용할 수 있도록 노력하고 있습니다. Ajax 응용 프로그램은 패키지 된 응용 프로그램 내에서 Webview에서 실행되며 대부분 잘 작동합니다.크롬 패키지 응용 프로그램 - Webview에서 파일 다운로드

Ajax 앱을 사용하면 표준 HTML 5 업로드 및 드래그/드롭을 사용하여 문서를 업로드 할 수 있습니다. 업로드는 정상적으로 작동하지만 다운로드는 작동하지 않습니다..

이것은 Ajax 앱의 간단한 로직 샘플입니다. Javascript를 사용하여 click 이벤트를 처리하고 일부 논리를 수행 한 다음 숨겨진 IFrame의 위치를 설정하여 다운로드를 트리거합니다.

<html> 
<head> 
    <script type="text/javascript"> 
    function downloadFile(url) { 
    window.frames['dataTransfer'].location = url; 
    } 
    </script> 
</head> 
<body> 
    <a href="http://www.google.com" target="_blank">Google</a><br/> 
    <a href="https://s3.amazonaws.com/LYHKDevA1/2058e6cab4304af3a39eeb275eeac96d?response-content-disposition=attachment%3Bfilename%3D%22TestFile.pdf%22%3Bfilename*%3DUTF-8%27%27TestFile.pdf&Signature=FUlZZqNoJ%2F%2FvHIPX6CPDkvJ7uik%3D&Expires=1437854276&AWSAccessKeyId=1ZAN0NYFJ2DCQX8AN8G2" target="_blank">Download PDF</a><br/> 
    <a href="#" onclick="downloadFile('https://s3.amazonaws.com/LYHKDevA1/2058e6cab4304af3a39eeb275eeac96d?response-content-disposition=attachment%3Bfilename%3D%22TestFile.pdf%22%3Bfilename*%3DUTF-8%27%27TestFile.pdf&Signature=FUlZZqNoJ%2F%2FvHIPX6CPDkvJ7uik%3D&Expires=1437854276&AWSAccessKeyId=1ZAN0NYFJ2DCQX8AN8G2');return false;" target="_blank">Download PDF JS</a><br/> 
    <iframe name="dataTransfer" style="width: 0; height: 0; border: none;"></iframe><br/> 
</body> 
</html>

표준 Chrome 탭에서 실행하면 3 개의 링크 모두 정상적으로 작동합니다. 그러나 Chrome 앱에서는 첫 번째 링크 만 작동합니다. 세 번째 링크를 클릭해도 아무런 반응이 없습니다. 개발자 도구의 네트워크 섹션에서 실제로 다운로드가 시작된 것처럼 보이지만 빨리 취소됩니다.

Chrome 앱의 매니페스트는 웹 뷰 및 관련 도메인을 허용합니다.

{ 
    "manifest_version": 2, 
    "name": "Test Download", 
    "version": "0.1.0", 
    "permissions": [ 
    "webview", 
    "<DOMAIN OF THE SAMPLE PAGE ABOVE>", 
    "https://s3.amazonaws.com/" 
    ], 
    "app": { 
    "background": { 
     "scripts": ["background.js"] 
    } 
    }, 
    "icons": {}, 
    "minimum_chrome_version": "28" 
}

Chrome 앱에는 간단하게 newwindow 처리 기능이 있습니다.

window.onload = function() { 
    var webview = document.querySelector('#app-webview'); 
    webview.src = '<URL TO SAMPLE PAGE ABOVE>'; 
    webview.addEventListener('newwindow', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    window.open(e.targetUrl); 
    }); 
};

(Ajax 앱을 크게 변경하지 않고도) 다운로드 작동 방법에 대한 제안 사항이 있으십니까?

출처

2013-07-26 tfasz

webview 게스트의 파일 다운로드는 다운로드 시도 당 permissionrequest 이벤트에 의해 게이팅됩니다. 기본 응답은 다운로드 권한을 거부하는 것입니다.

참고 : 다운로드 권한 요청은 현재 Chrome 30까지 출시되지 않으며 아직 설명서가 제공되지 않은 것으로 보입니다. 그것은 일반적으로 안정적인 API이지만, 현재와 다음 사이에는 변경 될 것 같지 않습니다.

이 동작을 재정의하려면 이벤트를 처리하고 다운로드를 명시 적으로 허용해야합니다. 예를 들어 :

var webview = document.querySelector('#app-webview'); 
webview.addEventListener('permissionrequest', function(e) { 
    if (e.permission === 'download') { 
    e.request.allow(); 
    } 
});

이벤트 (예 : e.url의 다운로드 URL 등) 추가 정보를 포함하는 경우에 당신은 더 당신의 보조금을 필터링 할.

정상적인 Chrome 파일 다운로드 환경에서만 다운로드가 가능하다는 점에 유의해야합니다. 이는 패키지 앱에서 꼭 필요한 것은 아닙니다. 앱에서 chrome.downloads API를 사용할 수있을 때까지 옵션이 제한됩니다.

하나의 가능성은 다운로드 요청을 거부하고 이벤트에서 URL을 가져 와서 XHR, fileSystem API 및 빌드 할 UX를 사용하여 다운로드 프로세스를 수동으로 관리하는 것입니다.

출처

2013-07-26 03:38:49

https://chromiumcodereview.appspot.com/20803004/에 따르면이 API는 안정적으로 만들어져 Chrome 30에서 사용할 수 있습니다. –

그래, 아직 29 개가 아니지만 병합 대상입니다. –

@chomp 대단히 감사합니다. 당신의 예제에 대한 하나의 약간의 수정 - 당신은'e.allow()'대신'e.request.allow()'를 사용해야합니다. – tfasz

크롬 패키지 응용 프로그램 - Webview에서 파일 다운로드

답변

관련 문제