Offline Web Application

Lino Mari
linomari
Published in
3 min readSep 8, 2016

Applications can still function when there is no connection, introducing the the Offline First approach.

We are all convinced that we live in a connected world where everything is always available. We have been saying this for years, but never really thought how true this is?

The reality is different because we live in a world where connections are not as stable as it seems. We know that in many countries Internet is not fast and not reliable, even in developed countries Internet connection is not always available and reliable.

We are increasingly connected with mobile devices and at times mobile networks leave us without a connection. When we travel to remote places or even the countryside, when we get on a plane and detach the mobile network due to huge roaming costs.

Thinking about these connection obstacles is a discussion that has come up over the past two years and is becoming a trend among web developers. Hence, the discussion Offline First.

What do we mean by Offline First?
Offline First is a new challenge for web applications and developers.
The aim is to create web applications that can work even with the absence of the Internet connection.

The challenge is to think about this right from the design phase, how can the application still be of value even without connection?

The first step is to think about the architecture and the technologies to use. We know that the trend is to move the bulk of the application to the client using JS libraries distributing workload between the server and the client. This approach has created more efficient and better performing applications.

To create offline applications one also needs to consider the use of local caching systems and data synchronization mechanisms.

Cache and synchronization
If the application is simply a set of static pages it will be relatively simple to make sure it works offline. Is becomes complex when we talk about dynamic applications.

Among the best known applications based on this concept we find Google Gmail that allows users to continue reading emails even without Internet connection.

To create dynamic web applications that work offline, you should first be able to save all data or part of the data locally. There are several approaches to save data in local cache, but it is strongly recommend to use a library that provides API to easily save on IndexedDB, WebSQL or local storage.

Libraries such as localForage is readily available on GitHub. With this library, you can save different types of data such as, objects, arrays, or media.

The data stored in the local cache when the Internet connection is available again can be synchronized. Another very interesting library is PouchDB, not only makes available for saving in local API as localForage but additionally provides a powerful data synchronization between client and server.

PouchDB is an open source JavaScript database designed to work well within the browser. PouchDB was created to help web developers create applications that work offline. The library is available on GitHub.

Conclusion
To make web applications that really take into account the possibility that the user is not always connected is possible thanks to the technologies like the ones covered above. Today, it is easier to design and deploy web applications that work even offline.

Offline First has become a topic of discussion but it is still rare to see web applications that can work offline. It is no longer a technical problem but a concept and behaviour change that is not widespread as it should be.

Today it is common practice to think mobile device first and all well know the value of responsive design. We hope that tomorrow Offline First will also be common practice.

For more information on standards that can be adopted, please visit the W3C website

--

--

Lino Mari
linomari

I’m working with international teams and supports clients in identifying the right fit of Software Architecture and Technology