Chrome打包的應用程序 - 從Webview下載文件

我正致力於獲取現有的Ajax樣式的Web應用程序，作爲Chrome打包應用程序運行。 Ajax應用程序在打包的應用程序內部的Webview中運行，並且大部分運行良好。Chrome打包的應用程序 - 從Webview下載文件

Ajax應用程序允許用戶使用標準HTML 5上傳和拖放操作來上傳文檔。上傳工作正常，但下載不起作用。

這是Ajax應用程序中邏輯的簡化示例。它使用Javascript來處理單擊事件，執行一些邏輯，然後通過設置隱藏的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應用程序的清單允許Webview和涉及的相關域。

{ 
    "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下載網址）要進一步篩選補助。

請注意，這隻會允許使用常規的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.request.allow（）'而不是'e.allow（）'。 – tfasz

Chrome打包的應用程序 - 從Webview下載文件

回答

相關問題