<commit_before>---
layout: post
title: "The Kinda Offline Web"
description: "Offline technology is mature enough to use, but do most web developers know how?"
tags: [code, development, offline]
image:
  feature: storage-shed-hdr.jpg
  credit: katsrcool
  creditlink: http://www.flickr.com/photos/40775084@N05/9475526152/
share: true
---

Offline technology is mature enough to use, but do most web developers know how? Creating a web app that functions entirely offline is fraught with gotchas and involves many technologies working together. Most developers will recommend native apps for an offline experience, but native apps don't have to be the _only_ way.

The phrase "web app" has traditionally meant something like [Basecamp](http://basecamp.com/) -- an app accessed at a URL. But many traditional web apps are online, slower that locally-hosted apps with no latency, and bound to a browser. At Mozilla, we're trying to change all of this with FirefoxOS and Open Web Apps. One of the biggest changes to what we call a web app can be encompassed in one word: **offline**.

A few months ago I started work on [Face Value](http://facevalueapp.com/), an open web app that deals with a currency's denominations in a saner way for most travellers. I knew the app would need to work offline; most users would use the app on their phone, often in a foreign country without a data plan.

I knew a lot about the localStorage API and even some things about Appcache, but I hadn't ever made a truly offline web app before Face Value. What's worse, I didn't know about some of the really common gotchas one runs into when going from building web apps that rely on a net connection to ones that work offline without issues. My first few attempts were quite buggy, but in the end I have something that I'm quite proud with and trust to take with me--even when I'm without precious, precious data on my phone.

## Ingredients
<commit_msg>Add an hr in there<commit_after>---
layout: post
title: "The Kinda Offline Web"
description: "Offline technology is mature enough to use, but do most web developers know how?"
tags: [code, development, offline]
image:
  feature: storage-shed-hdr.jpg
  credit: katsrcool
  creditlink: http://www.flickr.com/photos/40775084@N05/9475526152/
share: true
---

Offline technology is mature enough to use, but do most web developers know how? Creating a web app that functions entirely offline is fraught with gotchas and involves many technologies working together. Most developers will recommend native apps for an offline experience, but native apps don't have to be the _only_ way.

----

The phrase "web app" has traditionally meant something like [Basecamp](http://basecamp.com/) -- an app accessed at a URL. But many traditional web apps are online, slower that locally-hosted apps with no latency, and bound to a browser. At Mozilla, we're trying to change all of this with FirefoxOS and Open Web Apps. One of the biggest changes to what we call a web app can be encompassed in one word: **offline**.

A few months ago I started work on [Face Value](http://facevalueapp.com/), an open web app that deals with a currency's denominations in a saner way for most travellers. I knew the app would need to work offline; most users would use the app on their phone, often in a foreign country without a data plan.

I knew a lot about the localStorage API and even some things about Appcache, but I hadn't ever made a truly offline web app before Face Value. What's worse, I didn't know about some of the really common gotchas one runs into when going from building web apps that rely on a net connection to ones that work offline without issues. My first few attempts were quite buggy, but in the end I have something that I'm quite proud with and trust to take with me--even when I'm without precious, precious data on my phone.

## Ingredients

{'fraction_non_alphanumeric': 0.05528287264272798, 'fraction_numerical': 0.01033324722293981, 'mean_word_length': 4.2680272108843536, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3942244', 'n_tokens_mistral': 1032, 'n_tokens_neox': 957, 'n_words': 618}