Question

我正致力于将现有的Ajax风格的Web应用程序用作Chrome打包应用程序。 Ajax应用程序在打包应用程序内部的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应用中，只有前2个链接有效 - 单击第3个链接不起任何作用。在Developer工具的网络部分，它实际上似乎开始下载，但很快就会被取消。

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应用程序进行重大更改）？

Answer 1

来自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手动管理下载过程。

Chrome打包应用程序 - 从Webview下载文件

1 个答案: