Add use cases section.
--- 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">
- <!DOCTYPE>
- <html>
- <head>
- <title>Pony viewer</title>
- </head>
- <body>
- <img id='pony' alt="An image showing a pony" title="My precious!">
- <script>
- 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";
- }
- </script>
- </body>
- </html>
- </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">
+ <!DOCTYPE>
+ <html>
+ <head>
+ <title>Pony viewer</title>
+ </head>
+ <body>
+ <img id='pony' alt="An image showing a pony" title="My precious!">
+ <script>
+ 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";
+ }
+ </script>
+ </body>
+ </html>
+ </pre>
+
+ <p>
This example shows how an application can prevent automatic polling using the metered attribute:
</p>
<pre class="example highlight">