Network Information API Example

mozillakr · Aug 21, 2013 · 7ce0354 · 7ce0354
1 parent b72c626
commit 7ce0354
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 0 deletions.
diff --git a/NetworkInformation/connection_bandwidth.html b/NetworkInformation/connection_bandwidth.html
@@ -0,0 +1,24 @@
+<!DOCTYPE>
+<html>
+  <head>
+	<title>Pony viewer</title>
+  </head>
+  <body>
+    <button onclick="goBack();">Back</button>
+    <br />
+	<img id='pony' alt="An image showing a pony" title="My precious!">
+	<script>
+	  function goBack() {
+	  	window.history.back();
+	  }
+
+	  var i = document.getElementById('pony');
+
+	  if (navigator.connection.bandwidth > 2) {
+		i.src = "images/pony_hd.jpg";
+	  } else {
+		i.src = "images/pony_sd.jpg";
+	  }
+	</script>
+  </body>
+</html>
diff --git a/NetworkInformation/connection_metered.html b/NetworkInformation/connection_metered.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+	<title>Conditional polling</title>
+	<script>
+	  function goBack() {
+	  	window.history.back();
+	  }
+
+	  var gPreviousMetered = navigator.connection.metered;
+	  var gIntervalId;
+
+	  function poll() {
+		// poll stuff
+	  }
+
+	  navigator.connection.addEventListener('change', function() {
+		if (gPreviousMetered == navigator.connection.metered) {
+		  return;
+		}
+
+		gPreviousMetered = navigator.connection.metered;
+		if (!navigator.connection.metered) {
+		  gIntervalId = setInterval(poll, 1000);
+		} else {
+		  clearInterval(gIntervalId);
+		}
+	  }, false);
+
+	  // At load time.
+	  if (!navigator.connection.metered) {
+		gIntervalId = setInterval(poll, 1000);
+	  }
+	</script>
+  </head>
+  <body>
+    <button onclick="goBack();">Back</button>
+    <br />
+	<button onclick="poll();">Poll</button>
+  </body>
+</html>
diff --git a/NetworkInformation/images/pony_hd.jpg b/NetworkInformation/images/pony_hd.jpg
diff --git a/NetworkInformation/images/pony_sd.jpg b/NetworkInformation/images/pony_sd.jpg
diff --git a/NetworkInformation/index.html b/NetworkInformation/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    	<title>Network Information API Example</title>
+    	<meta charset="utf-8">
+    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <script type="text/javascript">
+			function connectionBandwidth() {
+				document.location = "connection_bandwidth.html";
+			}
+
+			function connectionMetered() {
+				document.location = "connection_metered.html";
+			}
+        </script>
+    </head>
+    <body>
+        <p>
+			<button onclick="connectionBandwidth()">Connection Bandwidth Example</button>
+			<br />
+
+			<button onclick="connectionMetered()">Connection Metered Example</button>
+			<br />
+		</p>
+    </body>
+</html>
diff --git a/NetworkInformation/manifest.webapp b/NetworkInformation/manifest.webapp
@@ -0,0 +1,14 @@
+{
+  "version": "0.1",
+  "name": "NetworkInformation",
+  "description": "Network Information API Example App",
+  "launch_path": "/index.html",
+  "icons": {
+    "16": "/img/icons/icon-16.png",
+    "48": "/img/icons/icon-48.png",
+    "128": "/img/icons/icon-128.png"
+  },
+  "installs_allowed_from": ["*"],
+  "appcache_path": "/cache.manifest",
+  "default_locale": "en"
+}