You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by fi...@apache.org on 2017/10/18 16:49:57 UTC
svn commit: r1812550 [1/5] - in /cordova/site/public: ./
announcements/2017/10/16/ blog/ blog/2017/10/ blog/2017/10/18/
docs/en/dev/reference/cordova-plugin-console/
docs/en/dev/reference/cordova-plugin-device-motion/
docs/en/dev/reference/cordova-plug...
Author: filmaj
Date: Wed Oct 18 16:49:57 2017
New Revision: 1812550
URL: http://svn.apache.org/viewvc?rev=1812550&view=rev
Log:
CB-13054: blog post on transition from file transfer to xhr2
Added:
cordova/site/public/blog/2017/10/
cordova/site/public/blog/2017/10/18/
cordova/site/public/blog/2017/10/18/from-filetransfer-to-xhr2.html
Modified:
cordova/site/public/announcements/2017/10/16/ios-release.html
cordova/site/public/blog/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-console/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-device-motion/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-device-orientation/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-file-transfer/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-inappbrowser/index.html
cordova/site/public/docs/en/dev/reference/cordova-plugin-statusbar/index.html
cordova/site/public/feed.xml
cordova/site/public/sitemap.xml
cordova/site/public/static/js/index.js
cordova/site/public/static/js/plugins.js
Modified: cordova/site/public/announcements/2017/10/16/ios-release.html
URL: http://svn.apache.org/viewvc/cordova/site/public/announcements/2017/10/16/ios-release.html?rev=1812550&r1=1812549&r2=1812550&view=diff
==============================================================================
--- cordova/site/public/announcements/2017/10/16/ios-release.html (original)
+++ cordova/site/public/announcements/2017/10/16/ios-release.html Wed Oct 18 16:49:57 2017
@@ -183,6 +183,26 @@ cordova platform add ios@4.5.2
</div>
<div class="col-sm-6">
+ <a href="/blog/2017/10/18/from-filetransfer-to-xhr2.html">Next</a>
+ <br>
+ <br>
+ <a class="title" href="/blog/2017/10/18/from-filetransfer-to-xhr2.html">Transition off of cordova-plugin-file-transfer</a>
+ <div class="date"> 18 Oct 2017 - By Fil Maj </div>
+ <p class="content">
+ <!--
+ NOTE:
+ the markdownify filter is used here
+ because posts are rendered in sequence;
+ that is, the next post's content isn't
+ yet rendered at the time that this post
+ is being rendered, so page.next.excerpt
+ is still in Markdown and not HTML
+
+ Reference: https://github.com/jekyll/jekyll/issues/2860
+ -->
+ Early on in Cordova's existence, the file-transfer plugin was created to solve...
+ </p>
+
</div>
</div>
</footer>
Added: cordova/site/public/blog/2017/10/18/from-filetransfer-to-xhr2.html
URL: http://svn.apache.org/viewvc/cordova/site/public/blog/2017/10/18/from-filetransfer-to-xhr2.html?rev=1812550&view=auto
==============================================================================
--- cordova/site/public/blog/2017/10/18/from-filetransfer-to-xhr2.html (added)
+++ cordova/site/public/blog/2017/10/18/from-filetransfer-to-xhr2.html Wed Oct 18 16:49:57 2017
@@ -0,0 +1,440 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <meta name="format-detection" content="telephone=no">
+ <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
+ <meta name="description" content="Early on in Cordova's existence, the file-transfer pluginwas created to solve the problem of downloading binary files.At the time, there weren't grea...">
+
+ <title>
+
+
+ Transition off of cordova-plugin-file-transfer - Apache Cordova
+
+
+ </title>
+
+ <link rel="SHORTCUT ICON" href="/favicon.ico"/>
+
+
+
+
+
+
+ <link rel="canonical" href="https://cordova.apache.org/blog/2017/10/18/from-filetransfer-to-xhr2.html">
+
+ <!-- CSS -->
+ <link rel="stylesheet" type="text/css" href="/static/css/main.css">
+ <link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
+ <!-- Algolia Search CSS -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
+
+ <!-- Fonts -->
+ <!-- For attribution information, see www/attributions.html -->
+ <link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
+
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+ <![endif]-->
+ <script type="text/javascript">
+ var disqus_developer = 1; // this would set it to developer mode
+ </script>
+
+ <!-- JS -->
+ <script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
+ <script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
+ <script defer type="text/javascript" src="/static/js/lib/ZeroClipboard.js"></script>
+
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ ga('create', 'UA-64283057-3', 'auto');
+ ga('send', 'pageview');
+</script>
+
+</head>
+
+<body>
+ <header>
+ <a class="scroll-point pt-top" name="top"></a>
+ <nav class="navbar navbar-inverse navbar-fixed-top">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
+ </div>
+ <div id="navbar" class="navbar-collapse collapse">
+ <div class="nav_bar_center">
+ <ul class="nav navbar-nav">
+ <li >
+ <a href="/docs/en/latest/">Documentation</a>
+ </li>
+ <li >
+ <a href="/plugins">Plugins</a>
+ </li>
+ <li class="active">
+ <a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
+ </li>
+ <li >
+ <a href="/contribute">Contribute</a>
+ </li>
+ <li>
+ <a href="/#getstarted">Get Started</a>
+ </li>
+ <li>
+ <form class="navbar-form navbar-right" id="header-search-form" role="search">
+ <div class="input-group">
+
+
+
+ <input id="header-search-field" type="text" placeholder="Search '7.x' docs..." class="form-control hidden-xs" autocomplete="off">
+ </div>
+ </form>
+ </li>
+ </ul>
+ </div>
+ </div><!--/.navbar-collapse -->
+ </div>
+ </nav>
+ <div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
+</header>
+
+<div class="page container">
+ <div class="blog">
+ <h1 class="blogHeader">
+ Blog
+ <span class="rss">
+ <img src="/static/img/subscribe.png"><a href="/feed.xml">RSS Feed</a>
+ </span>
+</h1>
+
+<div class="post">
+ <header>
+ <div class="title">Transition off of cordova-plugin-file-transfer</div>
+ <div class="author">By:
+
+ <a href="https://twitter.com/filmaj">Fil Maj</a>
+
+ </div>
+ <div class="date">18 Oct 2017</div>
+ </header>
+ <section>
+ <div>
+ <p>Early on in Cordova's existence, the <a href="https://github.com/apache/cordova-plugin-file-transfer">file-transfer plugin</a>
+was created to solve the <a href="https://issues.apache.org/jira/browse/CB-22">problem of downloading binary files</a>.
+At the time, there weren't great options for solving this using standards-compliant
+web APIs. The web took a twisty path to get to a solution (see
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/sendAsBinary">Firefox's <code>sendAsBinary</code></a>
+and the now-defunct <a href="https://dev.w3.org/2009/dap/file-system/file-dir-sys.html">FileSystem API</a>'s
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/BlobBuilder">BlobBuilder</a>,
+among others), but today you can use our good friend <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>'s
+newest features, combined with some newer JavaScript types and objects,
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">to solve this problem</a>.
+This is an exciting moment for Cordova as the dream for this project was always
+to eventually reduce the surface area of APIs the project maintains, and instead
+see regular web APIs be able to handle these use cases.</p>
+
+<p>As a result,
+<a href="https://issues.apache.org/jira/browse/CB-13052">Cordova is sunsetting the file-transfer plugin</a>.
+What does "sunsetting" mean? In summary:</p>
+
+<ul>
+<li>No more work will be done on the file-transfer plugin by the Cordova development
+community.</li>
+<li>You can continue to use the file-transfer plugin if you wish - it should work
+fine as-is for the foreseeable future.</li>
+<li>We highly suggest Cordova users transition to using the
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">standards-compliant way of sending and receiving binary data</a>.</li>
+</ul>
+
+<p>All of us at Apache Cordova don't want to leave y'all hanging, though, so we
+thought it'd be a good idea to show you how to use these newer XHR features to do
+what file-transfer lets you do, but in a way that will work in any modern web
+browser to boot!</p>
+
+<h2>Requirements</h2>
+
+<p>Based on how deeply you interact with the underlying device filesystem, and on
+which platforms, you may still need to rely on the
+<a href="https://github.com/apache/cordova-plugin-file">Cordova File plugin</a>. If you
+still have references to <code>requestFileSystem</code> or <code>root.fs</code> in your application's
+JavaScript, you will definitely need the File plugin because these are not
+standards-compliant APIs. Take note and care!</p>
+
+<h2>Platform Support</h2>
+
+<p>Binary types in JavaScript, as well as the extended XHR features, are available
+on the following Cordova-supported platforms without requiring any additional
+plugins:</p>
+
+<ul>
+<li>Android 4.4 or newer.</li>
+<li>iOS 10 or newer.</li>
+<li>Windows UWP (8.1, 10 or newer all work).</li>
+<li>Windows Phone 8 or newer.</li>
+</ul>
+
+<p>As always, check <a href="https://caniuse.com">caniuse.com</a> for detailed support for the
+required bits, like <a href="http://caniuse.com/#feat=blobbuilder"><code>Blob</code></a>,
+<a href="http://caniuse.com/#feat=typedarrays">Typed Arrays</a>, and
+<a href="http://caniuse.com/#feat=xhr2">extended XHR features</a>.</p>
+
+<h2>TL;DR</h2>
+
+<p>Standards are great and all, but what do you actually have to copy-paste to replace
+the previous FileTransfer examples? We have you covered:</p>
+
+<p>Here's a replacement for
+<a href="https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html#download-a-binary-file-to-the-application-cache">FileTransfer's "Download a Binary File" example</a>:</p>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nx">LocalFileSystem</span><span class="p">.</span><span class="nx">PERSISTENT</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
+ <span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="s1">'bot.png'</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'fileEntry is file? '</span> <span class="o">+</span> <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">isFile</span><span class="p">.</span><span class="nx">toString</span><span class="p">());</span>
+ <span class="kd">var</span> <span class="nx">oReq</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+ <span class="c1">// Make sure you add the domain name to the Content-Security-Policy <meta> element.</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">"GET"</span><span class="p">,</span> <span class="s2">"http://cordova.apache.org/static/img/cordova_bot.png"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
+ <span class="c1">// Define how you want the XHR data to come back</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">responseType</span> <span class="o">=</span> <span class="s2">"blob"</span><span class="p">;</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">oEvent</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">blob</span> <span class="o">=</span> <span class="nx">oReq</span><span class="p">.</span><span class="nx">response</span><span class="p">;</span> <span class="c1">// Note: not oReq.responseText</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">blob</span><span class="p">)</span> <span class="p">{</span>
+ <span class="c1">// Create a URL based on the blob, and set an <img> tag's src to it.</span>
+ <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span>
+ <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'bot-img'</span><span class="p">).</span><span class="nx">src</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
+ <span class="c1">// Or read the data with a FileReader</span>
+ <span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
+ <span class="nx">reader</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"loadend"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="c1">// reader.result contains the contents of blob as text</span>
+ <span class="p">});</span>
+ <span class="nx">reader</span><span class="p">.</span><span class="nx">readAsText</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span>
+ <span class="p">}</span> <span class="k">else</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'we didnt get an XHR response!'</span><span class="p">);</span>
+ <span class="p">};</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
+ <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'error getting file! '</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span> <span class="p">});</span>
+<span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'error getting persistent fs! '</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span> <span class="p">});</span>
+</code></pre></div>
+<p>Here's a similar replacement for
+<a href="https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html#uploadFile">FileTransfer's "Upload a File" example</a>:</p>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nb">window</span><span class="p">.</span><span class="nx">requestFileSystem</span><span class="p">(</span><span class="nx">LocalFileSystem</span><span class="p">.</span><span class="nx">PERSISTENT</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fs</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'file system open: '</span> <span class="o">+</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
+ <span class="nx">fs</span><span class="p">.</span><span class="nx">root</span><span class="p">.</span><span class="nx">getFile</span><span class="p">(</span><span class="s1">'bot.png'</span><span class="p">,</span> <span class="p">{</span> <span class="na">create</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="na">exclusive</span><span class="p">:</span> <span class="kc">false</span> <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">fileEntry</span><span class="p">)</span> <span class="p">{</span>
+ <span class="nx">fileEntry</span><span class="p">.</span><span class="nx">file</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
+ <span class="nx">reader</span><span class="p">.</span><span class="nx">onloadend</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="c1">// Create a blob based on the FileReader "result", which we asked to be retrieved as an ArrayBuffer</span>
+ <span class="kd">var</span> <span class="nx">blob</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="k">new</span> <span class="nb">Uint8Array</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">result</span><span class="p">)],</span> <span class="p">{</span> <span class="na">type</span><span class="p">:</span> <span class="s2">"image/png"</span> <span class="p">});</span>
+ <span class="kd">var</span> <span class="nx">oReq</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">XMLHttpRequest</span><span class="p">();</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="s2">"POST"</span><span class="p">,</span> <span class="s2">"http://mysweeturl.com/upload_handler"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">oEvent</span><span class="p">)</span> <span class="p">{</span>
+ <span class="c1">// all done!</span>
+ <span class="p">};</span>
+ <span class="c1">// Pass the blob in to XHR's send method</span>
+ <span class="nx">oReq</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">blob</span><span class="p">);</span>
+ <span class="p">};</span>
+ <span class="c1">// Read the file as an ArrayBuffer</span>
+ <span class="nx">reader</span><span class="p">.</span><span class="nx">readAsArrayBuffer</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
+ <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'error getting fileentry file!'</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span> <span class="p">});</span>
+ <span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'error getting file! '</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span> <span class="p">});</span>
+<span class="p">},</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'error getting persistent fs! '</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span> <span class="p">});</span>
+</code></pre></div>
+<p>Note that both the above examples rely on the File plugin, so if you remove the
+FileTransfer plugin from your app, make sure to add the File plugin!</p>
+
+<h2>The Long Version</h2>
+
+<p>If you want to understand some of the nuts and bolts enabling binary data transferring,
+you'll need to grasp two (possibly three) concepts. MDN has an absolutely fantastic
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">article</a>
+on the topic that is worth a quick read, but I'll provide a summary here, too.</p>
+
+<h3>Binary Types in JavaScript</h3>
+
+<p>For the longest time, there was no way to directly represent binary data and
+access the underlying bytes in memory within JavaScript. We could encode this data
+in different formats (<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a>,
+anyone?), and that was cool, but just let me play with the bytes already. For
+our purposes, we are interested in two objects in particular:
+<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">ArrayBuffer</a>
+and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>.
+Why do we care about these two? Because we can have XHRs return downloaded data
+as these types, or pass these types directly to XHRs' <code>send</code> method.</p>
+
+<h3>XHR</h3>
+
+<p>There are two newer XHR features, originally as part of what was referred to as
+"XHR2" during its <a href="https://www.w3.org/TR/XMLHttpRequest2/">development</a>, that we
+need to leverage to tie this all together.</p>
+
+<p>For downloading binary data, we need to set the
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType"><code>responseType</code></a>
+property to either <code>arraybuffer</code> or <code>blob</code> - this tells XHR what type we want
+the data we are retrieving back in. With <code>responseType</code> set, we can then access
+the read-only <code>response</code> property to get either the <code>ArrayBuffer</code> or <code>Blob</code>
+object representing the data retrieved by XHR.</p>
+
+<p>For uploading binary data, it is simpler: pass a <code>Blob</code> or <code>ArrayBuffer</code> directly
+to XHR's <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data#Sending_binary_data"><code>send</code></a>
+method. That's it.</p>
+
+<h2>Summary</h2>
+
+<p>Binary types and extended XHR features are well supported in modern desktop
+browsers, and on recent-ish mobile browsers (and WebViews). For existing Cordova
+users, as long as your app targets the platform and OS version combinations listed
+above under Platform Support, you should be good to go! Remember that if you rely
+on certain File plugin APIs like <code>requestFileSystem</code>, <code>root</code>, or <code>getFile</code>,
+you'll need to ensure the File plugin is added to your app.</p>
+
+<p>Happy standards-compliant coding!</p>
+
+ </div>
+ </section>
+ <footer>
+ <div class="row">
+ <div class="col-sm-6">
+
+ <a href="/announcements/2017/10/16/ios-release.html">Previous</a>
+ <br>
+ <br>
+ <a class="title" href="/announcements/2017/10/16/ios-release.html">Cordova iOS 4.5.2</a>
+ <div class="date"> 16 Oct 2017 - By Suraj Pindoria </div>
+ <p class="content">
+ We are happy to announce a minor version of Cordova iOS 4.5.2...
+ </p>
+
+ </div>
+ <div class="col-sm-6">
+
+ </div>
+ </div>
+ </footer>
+ <div class="disqus">
+ <div id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES * * */
+ var disqus_shortname = 'cordovablogs';
+
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+
+ </div>
+</div>
+
+</div>
+
+</div>
+
+<div class="blue-divider"></div>
+<footer>
+ <div class="container">
+ <div class="row">
+ <div class="col-sm-9">
+ <h1>More Resources</h1>
+ <div class="row">
+ <div class="col-sm-4">
+ <h2>General</h2>
+ <ul class="nav">
+ <li>
+ <a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
+ </li>
+ <li>
+ <a href="http://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
+ </li>
+ <li>
+ <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">License</a>
+ </li>
+ <li>
+ <a href="/artwork">Artwork</a>
+ </li>
+ </ul>
+ </div>
+ <div class="col-sm-4">
+ <h2>Development</h2>
+ <ul class="nav">
+ <li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&q=cordova-">Source Code</a></li>
+ <li><a target="_blank" href="https://issues.apache.org/jira/browse/CB/">Issue Tracker</a></li>
+ <li><a target="_blank" href="http://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
+ <li><a href="/contact">Mailing List</a></li>
+ <li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
+ </ul>
+ </div>
+ <div class="col-sm-4">
+ <h2>Apache Software Foundation</h2>
+ <ul class="nav">
+ <li>
+ <a target="_blank" href="http://www.apache.org/">About ASF</a>
+ </li>
+ <li>
+ <a target="_blank" href="http://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
+ </li>
+ <li>
+ <a target="_blank" href="http://www.apache.org/foundation/thanks.html">Thanks</a>
+ </li>
+ <li>
+ <a target="_blank" href="http://www.apache.org/security/">Security</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-3">
+ <h1>Contribute</h1>
+ <p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
+ <p>Report bugs, improve the docs, or contribute to the code.</p>
+ <a href="/contribute" class="btn btn-lg btn-primary">
+ Learn More
+ </a>
+ <p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
+ <script async defer src="https://slack-cordova-io.herokuapp.com/slackin.js"></script>
+ </div>
+</div>
+<p class="copyright_text">
+ Copyright © 2012, 2013, 2015 The Apache Software Foundation, Licensed under the <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>
+ Apache and the Apache feather logos are <a target="_blank" href="http://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
+ <br/>
+ "Raleway" font used under license. For details see the <a href="/attributions/">attributions page</a>.
+</p>
+
+ </div>
+</footer>
+
+
+ <script defer type="text/javascript" src="/static/js/index.js"></script>
+ <script defer type="text/javascript" src="/static/js/twitter.js"></script>
+
+
+
+
+
+
+
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
+<script type="text/javascript">
+ docsearch({
+ apiKey: '0a916ab198bd93d031aa70611271e42e',
+ indexName: 'cordova',
+ inputSelector: '#header-search-field',
+ algoliaOptions: { 'facetFilters': ["version: 7.x", "language: en"] }
+ });
+</script>
+
+</body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org