This article is the fifteenth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
Offline mode is a version of an application that usually depends on internet but can work without an internet connection. Offline mode ensures that software can be useful even if a user does not have access to the internet at a given time.
There are two main types of offline mode: read-only, and read-and-write. In a read-only offline mode, you can read the content you have available locally but not make any changes to the content or state of data stored in an application. Applications that support read and write offline mode let you both read and make changes to content. These changes will then be saved when a device is connected to the internet.
Notion, the application I use for taking notes, has a read-and-write offline mode. When I lose access to the internet on my phone, I can still take notes. Those notes are then saved when my internet connection is restored. This means I can continue using the application as I would. This is important to me because I want to be able to record all my notes in one application at any time – an idea, TODO, or story could come at any moment that I want to write down.
When Notion is in offline mode, a message appears to indicate that access to the internet connection is lost:
This is essential because communicating that the user is offline gives important context to the user. If a user thinks they should have an internet connection, their first step may be to go to their WiFi or network settings to try to fix the problem. If a user expected their internet connection would be lost – for example, because they went into a subway – they may decide to continue working with an application knowing that there is support for an offline mode.
In the case of Notion, I can record notes offline. But, my data will not be sync to the cloud and my other devices until I connect back to the internet.
While read and write support functionailty is the best case for offline mode, read mode is still invaluable in case a software does not yet support read and write functions while offline. Without a read offline mode, the alternative is no content. A read-mode may show all of the data that you have been directly working with – for example, a blog post you are writing in a web tool – and potentially additional data that has been cached.
For instance, Adactio.com supports offline mode. When you visit his site, articles you visit are periodically cached to your device. If your internet connection stops working, a special page appears that lists articles that have been cached that you can read.
Here is an example showing Adactio’s homepage in offline mode, which lists articles that have been cached that you can read:
I love this feature because it means I can save articles to read for later on my phone, ideal if I am traveling and know that my internet connection will not be available. Of note, Jeremy, the author of Adactio, wrote a book on how to implement offline read support for websites. I recommend his writings on offline support to learn more about the functionalities available in browsers that you can use today.
Losing access to the internet is a reality of working with networked devices. Network connection may be lost by circumstance due to congestion on the network, low connectivity in a region, network maintenance, a temporary modem issue, a power cut, and more. Or a user may terminate their network connection deliberately, such as to save data or due to restrictions like traveling on an aeroplane.
Building robust applications involves planning for a scenario when a user may lose connection. One heuristic I like to keep in mind is the “train WiFi test.” To pass this test, your application should be usable even on a poor train WiFi connection where the internet speed may fluctuate and connections will periodically cut out.
In web applications where users can write data – for example, document writing software – read and write support offline is the best case scenario. But, it may not always be possible, or preferable, to have write support. For example, offline editing support makes sense in document publishing software but makes less sense if someone is preparing an SQL query. In the case of software where write mode is not preferable, a clear indicator should appear to tell the user that actions can only be taken when online.
Having read-only access to online documents when I am offline means that I can continue to refer to them. For example, Google Maps caches London Underground journeys as long as you don’t exit out of the navigation page within the app (you can still switch to other apps). This feature means that I can travel confidently knowing that I always have my itinerary in front of me.
For any written content on the web, having cached content available is useful. I wish that Firefox for iOS had better caching support for open tabs. I would love to be able to go through all my tabs even if they have been open for a week and my internet connection cut out. This may be a hard feature to implement, but I would certainly make use of being able to read all my open tabs offline.
What software that you use supports offline mode? What do you think about the support? Is it robust and reliable, or limited? Let me know! I’m keen to learn more about offline mode and how it is applied.
