Taking it offline

When building a mobile web-mapping application, like any other web application, there are a few things you need to consider. Who are the users? What services do I need? How will the application be used? What devices will the application be used on? You get the idea. If the application in any way requires a user to enter information or do some editing, you will no doubt cringe when the topic of offline capabilities comes up.

Offline capabilities in most other web applications is always a concern, but in most cases you would probably just need to worry about some state or keep track of what information a user has entered into a form, but then you start thinking about the web-map and how would you manage edited feature data? What about tiles? All very valid questions.

If you use ArcGIS tech, you have no doubt heard about Collector for ArcGIS and its offline capabilities. That’s great for Android and iOS dev, but you need a JavaScript solution.

The first place I would point you to is the Esri offline-editor. This is a great library with some really nice demos on how you can use it for offline usage for both editing and tiles, including tile packages. I use this library in production and it works great for my needs. I may do a future blog post specifically on this library. Today however, I wanted to show you an alternative way to get some offline-capabilities in your application.

Storage and sorta storage

Let’s first look at what your offline storage options are when making a web application. Let’s ignore cookies, as I think they have their place and can be used for some things, but I wouldn’t use them for offline use.

  • LocalStorage. – This is a simple key/value storage system. This is probably the most common web storage system you might end up using. It’s part of what is referred to as DOM Storage which also includes sessionStorage. The API is pretty simple and it meets most users needs. You are however limited to approximately 5MB per host, which could be a limiting factor.
  • IndexedDB – This is a more robust SQL-like storage system. IndexedDB is probably the storage system you want to target for offline editing capabilities. The API isn’t very difficult, but it is not as simple as simple get/set type API with LocaStorage.

  • WebSQL – This is another SQL-like database system in the browser, however it was deprecated around 2010 in favor of IndexedDB. You can read more about this here.

Well hey, that looks great, I’ll just use IndexedDB for everything. You’d think so right. IndexedDB will work great on modern desktop browsers, even Internet Explorer. However, not all mobile browsers fully support IndexedDB or have buggy support. If they don’t, they still use WebSQL. So what are you to do?