Optimizing based on connection speed: using navigator.connection on Android 2.2+

September 14th, 2010

Introduction

A little while back this post made the rounds, which took us on a journey through some of the new features introduced in the browser in Android 2.2 Froyo. Among the most overlooked features are the file upload functionality (you can upload photos from your browser now! But we’re still waiting on iPhone to support this…) and a little-known JavaScript addition to the Browser Object Model (BOM) in the form of navigator.connection. Let’s take a peek at its contents:

// contents of navigator.connection object
{
  "type": "3",
  "UNKNOWN": "0",
  "ETHERNET": "1",
  "WIFI": "2",
  "CELL_2G": "3",
  "CELL_3G": "4"
}

This is data taken from a Nexus One running on a 2G network, so you can see that the type is set to 3, which corresponds with “CELL_2G”. In other words, this phone runs on a slower network, so from a performance perspective, you probably want to consider delivering a lower-bandwidth experience.

So how exactly do we target this?

The code

The purpose of this code is to first find the connection speed, and then add a class to the html element based on this connection. The goal is to be able to target these connections with CSS, so the right content is delivered to the right connection:

.highbandwidth .logo   { background-image:url('logo-high.jpg'); }
.mediumbandwidth .logo { background-image:url('logo-medium.jpg'); }
.lowbandwidth .logo    { background-image:url('logo-low.jpg'); }

And here’s the JavaScript:

var connection, connectionSpeed, htmlNode, htmlClass;

// create a custom object if navigator.connection isn't available
connection = navigator.connection || {'type':'0'};

// set connectionSpeed
switch(connection.type) {
  case connection.CELL_3G:
    // 3G
    connectionSpeed = 'mediumbandwidth';
  break;
  case connection.CELL_2G:
    // 2G
    connectionSpeed = 'lowbandwidth';
  break;
  default:
    // WIFI, ETHERNET, UNKNOWN
    connectionSpeed = 'highbandwidth';
}

// set the connection speed on the html element, i.e. <html class="lowbandwidth">
htmlNode = document.body.parentNode;
htmlClass = htmlNode.getAttribute('class') || '';
htmlNode.setAttribute('class', htmlClass + ' ' + connectionSpeed);

Give the user control!

Just as it’s a good practice to give the user a link to the full desktop version of the website, if you’re going to deliver different content based on different connection speeds, then it’s highly advisable to give the user full control.

So give them control! You can provide something like the following:

Mobile | Desktop

Bandwidth: High | Medium | Low

  1. Simon MacDonald says:
    May 6, 2011 at 9:59 am

    Hey David,

    I don’t suppose you know of a way to enable this functionality on applications that are using the WebView? When I query navigator.connection in my PhoneGap app I always get type 0.

    Thanks…

    Simon

  2. Jon Raasch says:
    August 3, 2011 at 12:16 pm

    @Simon
    Looks like PhoneGap has something a little different built in for this:
    https://github.com/shazron/phonegap-docs/commit/d0e6504c427fb881f7be7e2a625694619e9f95b6

    Just stumbled across that researching navigator.connection, but it looks like it might be what you’re looking for.

  3. Adaptive Images in Responsive Web Design : Christopher Schmitt says:
    January 31, 2012 at 10:31 am

    [...] if mobile bandwidth is detected (like 3G), the low-resolutions stay in place thanks to the new navigator.connection first seen in Android [...]

Leave a Reply