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下载文件

回答

相关问题