cordova-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From fil...@apache.org
Subject 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...
Date Wed, 18 Oct 2017 16:49:57 GMT
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&#39;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&#39;s existence, the file-transfer
pluginwas created to solve the problem of downloading binary files.At the time, there weren&#39;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&#39;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&#39;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&#39;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>&#39;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>&#39;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 &quot;sunsetting&quot; 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&#39;t want to leave y&#39;all hanging, though,
so we
+thought it&#39;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&#39;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&#39;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&#39;s
&quot;Download a Binary File&quot; 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
&lt;meta&gt; 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 &lt;img&gt;
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&#39;s a similar replacement for
+<a href="https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html#uploadFile">FileTransfer&#39;s
&quot;Upload a File&quot; 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&#39;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&#39;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&#39; <code>send</code>
method.</p>
+
+<h3>XHR</h3>
+
+<p>There are two newer XHR features, originally as part of what was referred to as
+&quot;XHR2&quot; 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&#39;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&#39;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&#39;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&amp;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 &copy; 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


Mime
View raw message