3G

4G

Data Throughput Up to 3.1Mbps with an average speed range between 0.5 to 1.5 Mbps Practically speaking, 2 to 12 Mbps (Telstra in Australia claims up to 40 Mbps) but potential estimated at a range of 100 to 300 Mbps. Peak Upload Rate 5 Mbps 500 Mbps Peak Download Rate 100 Mbps 1 Gbps Switching Technique packet switching packet switching, message switching Network Architecture Wide Area Cell Based Integration of wireless LAN and Wide area. Services And Applications CDMA 2000, UMTS, EDGE etc Wimax2 and LTE-Advance Forward error correction (FEC) 3G uses Turbo codes for error correction. Concatenated codes are used for error corrections in 4G. Frequency Band 1.8 – 2.5 GHz 2 – 8 GHz

The Network

Radio Resource Controller

Radio Resource Controller

Making a Request

Making a Request

Making a Request

Making a Request

Making a Request

Making a Request

Making a Request

Making a Request

Making a Request

Latencies

navigator.onLine

navigator.onLine

navigator.onLine

Server-Sent Events

Push API

Server-Sent Events

// Connect to server, listen for messages, manage data:
						var source = new EventSource('/stats');
						source.onopen = function () {
						  connectionOpen(true);
						};

						source.onerror = function () {
						  connectionOpen(false);
						};

						source.addEventListener('connections', updateConnections,false);
						source.addEventListener('requests', updateRequests, false);
						source.addEventListener('uptime', updateUptime, false);

						source.onmessage = function (event) {
						  // a message without a type was fired
						};

Push API

(W3C Working Draft)

//register
						function registerPush() {
						  navigator.push.register().then(
						    function(value) {
						      pushRegistrations.push(value);
						      registerWithAppServer(value);
						    },
						    function(reason) {alert("error: "+ reason);}  
						  );
						}
						//handler
						navigator.setMessageHandler("push", gotPush);
						//manage the message
						function gotPush(message) {
						  //do stuff
						}

App Cache

//register
						CACHE MANIFEST
						# 2013-10-22:v1

						# Explicitly cached 
						CACHE:   
						/offlineanime/anime.json   
						/offlineanime/app/css/app.css
						/offlineanime/app/img/404.png   
						/offlineanime/app/lib/angular/angular.js   
						/offlineanime/app/lib/angular/angular-route.js       
						/offlineanime/app/js/controllers.js    
						/offlineanime/app/js/app.js
						/offlineanime/app/partials/anime-list.html
						/offlineanime/app/partials/anime-detail.html 

						# Resources that require the user to be online. 
						NETWORK:
						# Don't actually need other URLs because * covers them       
						# Needed * for ajax requests
						*

						FALLBACK:
						http://static.hummingbird.me /offlineanime/app/img/404.png #doesn't work!

Service Worker Can:

• manage caches
• listen for network events (e.g. resource requests)
• decide what content to display

ServiceWorker: Caching

this.addEventListener("install", function(e) {
						//Create a cache of resources. Begins the process of fetching them.
						  var shellResources = new Cache(
						  "/app.html",
						  "/assets/v1/base.css",
						  "/assets/v1/app.js",
						  "/assets/v1/logo.png",
						  "/assets/v1/intro_video.webm",
						  );

						  //Add Cache to the global so it can be used later during onfetch
						  caches.set("shell-v1", shellResources);

						  //The coast is only clear when all the resources are ready.
						  e.waitUntil(shellResources.ready());
						});

						this.addEventListener("fetch", function(e) {
						  //No "onfetch" events are dispatched to the ServiceWorker 
						  //until it successfully installs.

						  //All operations on caches are async, including matching URLs, so we use
						  //Promises heavily. e.respondWith() even takes Promises to enable this:
						  e.respondWith(caches.match(e.request.url, "shell-v1"));
						});

ServiceWorker: Fallbacks

this.addEventListener("fetch", function(e) {
						  var url = e.request.url;
						  if (url == inventory) {
						    e.respondWith(
						      fetch(url).then(
						        null,
						        function() { return caches.match(fallbackInventory); }
						      )
						    );
						  }
						});

So, Mobile Network?

• understand the mobile network
• latencies
• some guidelines
• design for the worst connection
• use push instead of polling
• bigger bursts
• HTML5 APIs including offline