Offline JS

@agup

Can JS apps work offline?

Demo

esri.github.io/offline-editor-js/demo/

Why offline JS?

Loss of connection is common in mobile apps!!

Consumer

Commercial

Government

Why offline JS?

Allow users to keep working, seamlessly

Avoid application crashes or errors

Gracefully fail or degrade

Why offline JS?

Slow or intermittent cellular internet

Slow or intermittent WiFi

Avoid HTTP Timeouts

Why offline JS?

You don't have to be remote!

Can lose internet at any time.

Offline JS is caching of:

Data

HTTP requests

HTML/CSS/JS/images

Does browser storage work offline?

Does Geolocation work offline?

Intermittent offline

Full offline

Most common.

Offline for a short period of time

Does not require browser restart

Fail gracefully, graceful degradation

Intermittent Offline

Online

Offline

Online

Intermittent Offline

Bad, bad, bad

HTTP Request

Good, good, good

HTTP Request

Fully Offline

Offline for an extended time

Expect full functionality

Requires offline browser restart

Online

Offline

Online

Fully Offline

Restart

Browser

APIs...?

Native JavaScript

localStorage

IndexedDB

Application Cache

Service Workers

3rd party storage libraries

localStorage

Simple to use

Limited to 5 MBs

Store only Strings

Persistent between browser restarts

localStorage

// Window.localStorage

// Set an item -- Must be a String
localStorage.pageNumber = "2";

// Get an item
var pageNumber = localStorage.pageNumber;

// Remove an item
localStorage.removeItem("pageNumber");

IndexedDB

More complex than localStorage

50 - 100MB + (on mobile devices)

Stores Objects, Strings and more

github.com/axemclion/IndexedDBShim

IndexedDB

var transaction = db.transaction(["myObjectStore"], "readwrite");

transaction.oncomplete = function (event) {
    dbOnCompleteHandler(event);
};

transaction.onerror = function (event) {
    alert("There was a problem writing to the database");
};

var objectStore = transaction.objectStore("myObjectStore");

// Write object to database
objectStore.put(object);

Application Cache

A.K.A. Cache Manifest, AppCache

Stores .html, .js, .css and images

Files available online and offline

Temperamental

Application Cache

Use with localStorage/IndexedDB!

Browser automatically recognizes the local copy

Application Cache

<html manifest="example.appcache">
  ...
</html>

CACHE MANIFEST
# Time: Thu Mar 26 2015 09:45:14 GMT-0600 (MDT)
# Home Page
http://www.example.com/index.html
http://www.example.com/main.js
http://www.example.com/css/main.css
http://www.example.com/images/header.png

/example.appcache

Application Cache

Typical console log...

Service Workers

Very limited support (Chrome)

Requires HTTPS

Acts as a network proxy

More complex than AppCache

3rd Party Storage

PouchDB, localForage

They wrap localStorage, IndexedDB and/or WebSQL

Require an addt'l library

Offer addt'l features

Detecting offline?

Offline.js (3 kb)

Set HTTP.timeout

Capture HTTP request failure

Caveats:

- 404's and connection issues

- Use Hybrid detection when available

XHR validate online

function validateOnline(callback) {

    var req = new XMLHttpRequest();
    req.timeout = 15000; //ms
    req.open("GET", "http://someurl.com/test.png?" + 
        (Math.floor(Math.random() * 1000000000)), true);

    req.onload = function() {
        if( req.status === 200 && req.responseText !== "") {
            req = null;
            callback(true);
        }
        else {
            req = null;
            callback(false);
        }
    };

    req.ontimeout = function() { callback( false ); };

    req.onerror = function() { callback(false); };

    req.send(null);
}

Offline.js - simple

function buttonClickHandler() {

    Offline.check();

    // Fail gracefully if offline
    if(Offline.state === "down") {
        alert("Sorry, app is currently offline");
    }
    else {
        // Do something
    }
}

Offline.js - advanced

function submitFormClickHandler() {

    Offline.check();

    var newAddress = street + "," + city + "," + zip;

    // Store changes locally
    if(Offline.state === "down") {
        localStorage.newAddress = localStorage.newAddress + 
            "|@|" + newAddress;
    }
    else {
        sendDataToServer( newAddress );
    }
}

Offline.on("up", function() {
    sendDataToServer( localStorage.newAddress, function() { 
        localStorage.newAddress = null; 
    });
});

Caveat Emptor

Very difficult to determine why HTTP requests fail.

What about hybrid?

PhoneGap/Cordova, Titanium, etc

Use the same JS coding patterns!

Cordova check network status:

cordova-plugin-network-information

Check network (Cordova)

function checkConnection() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';

    return states[networkState];
}

var internetStatus = checkConnection();