Matthew Riley MacPherson tofumatt

localForage: Offline Storage, Improved

Web apps have had offline capabilities like saving large data sets and binary files for some time. You can even do things like cache MP3 files. Browser technology can store data offline and plenty of it. The problem, though, is that the technology choices for how you do this are fragmented.

localStorage gets you really basic data storage, but it's slow and can't handle binary blobs. IndexedDB and WebSQL are asynchronous, fast, and support large data sets, but their APIs aren't very straightforward. Even still, neither IndexedDB nor WebSQL have support from all of the major browser vendors and that doesn't seem like something that will change in the near future.

If you need to write a web app with offline support and don't know where to start, then this is the article for you. If you've ever tried to start working with offline support but it made your head spin, this article is for you too. Mozilla has made a library called

	arr = new Uint8Array(8)
	dump(arr instanceof Uint8Array) // emits TRUE
	localforage.setItem('Uint8Array', arr).then (writeValue) ->
	..


	// in localstorage.js file
	function setItem(key, value, callback) {
	__utils__.echo(arr instanceof Uint8Array); // emits FALSE

	Process: firefox [2558]
	Path: /Applications/Aurora.app/Contents/MacOS/firefox
	Identifier: firefox
	Version: 26.0a2 (2613.10.28)
	Code Type: X86-64 (Native)
	Parent Process: firefox [2518]
	Responsible: firefox [2518]
	User ID: 501

	Date/Time: 2013-10-30 01:00:50.489 -0400

	// We'll assume we aren't online.
	var online = false;

	// Assume we're a packaged app with systemXHR permissions.
	// See: https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions for more.
	var request = new window.XMLHttpRequest({mozSystem: true});
	request.open('GET', 'http://mozilla.com', true);

	request.addEventListener('load', function(event) {
	console.log('We seem to be online!', event);

	var asyncStorage = require('localForage').asyncStorage;

	function displayValue() {
	asyncStorage.get('my_key', function(value) {
	alert('My value is: ' + value);
	});
	}

	// Notice we do this asynchronously, as all APIs here are async.
	asyncStorage.set('my_key', 500, displayValue);

	CACHE MANIFEST
	# v 0.1 / 12

	CACHE:
	css/app.css
	img/coins/[email protected]
	js/main.js
	js/lib/require.js

	NETWORK:

	# Instant server, anywhere!
	server() {
	python -m SimpleHTTPServer $1 && open "http://localhost:${1}"
	}

	E/GeckoConsole( 4371): [JavaScript Error: "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol." {file: "http://mozilla.github.io/high-fidelity/" line: 0}]
	I/GeckoDump( 109): XXX FIXME : Got a mozContentEvent: webapps-install-granted
	E/GeckoConsole( 109): Content JS INFO at app://system.gaiamobile.org/js/app_install_manager.js:197 in ai_handleDownloadError: downloadError event, error code is INVALID_SECURITY_LEVEL
	I/Gecko ( 405): -- webapps.js uninstall http://mozilla.github.io/high-fidelity/manifest.webapp
	I/Gecko ( 109): -- webapps.js uninstall http://mozilla.github.io/high-fidelity/manifest.webapp
	E/GeckoConsole( 4371): [JavaScript Error: "msg is undefined" {file: "jar:file:///system/b2g/omni.ja!/components/Webapps.js" line: 532}]

	'use strict';

	// A very simple, key/value-based IndexedDB library for storing binary data
	// in IndexedDB. Used because Podcasts needs to store large binary files (
	// podcast image covers and audio files) but can't use Appcache or localStorage.
	// Because most data is manipulated with Backbone.js and stored in localStorage
	// though, we just use IndexedDB as blob storage.
	//
	// This library lets a user store arbitrary "big data" in IndexedDB with a
	// stupid simple API: