Add use cases section.
authorMounir Lamouri <mounir.lamouri@gmail.com>
Mon, 05 Nov 2012 17:19:15 +0000
changeset 271 60e739325ffd
parent 270 5af8a0637294
child 272 130d9da749be
Add use cases section.
network-api/Overview.html
--- a/network-api/Overview.html	Mon Nov 05 16:43:41 2012 +0000
+++ b/network-api/Overview.html	Mon Nov 05 17:19:15 2012 +0000
@@ -55,29 +55,32 @@
         The Network Information API provides an interface enabling web applications to access the underlying
         connection information of the device.
       </p>
-      <p>
-        The following example shows how an image viewer can select a low definition or a high definition image based on the
-        current connection bandwidth:
-      <pre class="example highlight">
-        &lt;!DOCTYPE&gt;
-        &lt;html&gt;
-          &lt;head&gt;
-            &lt;title&gt;Pony viewer&lt;/title&gt;
-          &lt;/head&gt;
-          &lt;body&gt;
-            &lt;img id='pony' alt="An image showing a pony" title="My precious!"&gt;
-            &lt;script&gt;
-              var i = document.getElementById('pony');
 
-              if (navigator.connection.bandwidth > 2) {
-                i.src = "http://example.com/pony_hd.png";
-              } else {
-                i.src = "http://example.com/pony_ld.png";
-              }
-            &lt;/script&gt;
-          &lt;/body&gt;
-        &lt;/html&gt;
-      </pre>
+      <section>
+        <h2>Use Cases</h2>
+        <p>
+          The main use cases trying to be solved by the Network Information API
+          are use cases of applications trying to be gentle with the user's
+          bandwidth when they know it is rare or expensive.<br>
+          Even if they are not much applications trying to behave like that
+          currently, this specification tries to build the required tools to
+          allow this and hopefully making it more common.
+        </p>
+        <p>
+          A few hypothetical examples would be:
+          <ul>
+            <li>An image viewer showing very low resolution thumbnails when the
+              user has a low bandwidth or a metered connection. 
+            <li>A video game loading low textures when the user has a low
+              bandwidth or a metered connection.</li>
+            <li>An email client downloading only headers or even asking the user
+              to download headers when he/she has a low bandwidth or a metered
+              connection.</li>
+            <li>Any app trying to aggressively cache any downloaded asset when
+              the user has a low bandwidth or a metered connection.</li>
+          </ul>
+        </p>
+      </section>
     </section>
 
     <section id='conformance'>
@@ -249,6 +252,31 @@
       </pre>
 
       <p>
+        This example shows how an image viewer can select a low definition or a high definition image based on the
+        current connection bandwidth:
+      </p>
+      <pre class="example highlight">
+        &lt;!DOCTYPE&gt;
+        &lt;html&gt;
+          &lt;head&gt;
+            &lt;title&gt;Pony viewer&lt;/title&gt;
+          &lt;/head&gt;
+          &lt;body&gt;
+            &lt;img id='pony' alt="An image showing a pony" title="My precious!"&gt;
+            &lt;script&gt;
+              var i = document.getElementById('pony');
+
+              if (navigator.connection.bandwidth > 2) {
+                i.src = "http://example.com/pony_hd.png";
+              } else {
+                i.src = "http://example.com/pony_ld.png";
+              }
+            &lt;/script&gt;
+          &lt;/body&gt;
+        &lt;/html&gt;
+      </pre>
+
+      <p>
         This example shows how an application can prevent automatic polling using the metered attribute:
       </p>
       <pre class="example highlight">