1

私は、既存の Ajax スタイルの Web アプリケーションを Chrome パッケージ アプリとして機能させることに取り組んでいます。Ajax アプリは、パッケージ化されたアプリ内の 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 アプリでは最初の 2 つのリンクのみが機能し、3 番目のリンクをクリックしても何も起こりません。開発者ツールのネットワーク セクションでは、実際にはダウンロードが開始されているように見えますが、すぐにキャンセルされます。

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 アプリに大きな変更を加える必要はありません)。

4

1 に答える 1