Offline first
One of the biggest challenges we face is to ensure that our websites continue to work on all manner of devices. To meet this challenge, many web developers have adopted a mobile first design process. The core principle of mobile first is that the design process should begin by first designing for the smallest screen then scaling up the design to the biggest. In this way, websites can cater for small mobile devices without disadvantaging users on larger screens.
The mobile first progressive enhancement paradigm may now be set to evolve to incorporate a new approach to design. Like mobile first, offline first encourages designers to start from the most constrained environment and scale up to the richest. The majority of websites make the general assumption that users have a reliable network connection, failing to take into consideration the real-world conditions that users can experience whilst accessing the web. In reality, network coverage is far from comprehensive or reliable. Even users that are fortunate to be living in a country with a good network infrastructure will experience difficulties whilst on the move, passing through tunnels, riding lifts, taking flights and so on.
The offline first design process starts with designing websites for users that don’t have an internet connection, then scaling up the design to accommodate patchy or weak connections, all the way to designing for users that have an all singing and dancing super-fast fibre-optic connection. The offline first concept has its origins in mobile application development but is now filtering its way into mainstream website design, most notably as a key feature of progressive web apps (PWA).
How does offline first work?
The principle is relatively simple. When a user visits the website, content is downloaded and saved to the user’s device. When they return a script running on the user’s device will decide where to request content from. If the user has a good connection to the internet, the script will direct the browser to request the latest content from the web server. If the connection is bad, the script will direct the browser to serve the old content that has previously been saved on the device. The benefit of an offline first approach is that it provides a way to deliver uninterrupted access to content and provides the user with a smoother faster and more reliable experience.
The challenges of offline first?
Offline first is not without its challenges, there are a few things to consider before implementing an online first application.
Versioning: the application will need to keep a record of how current the locally stored content is in comparison to the content being served from the website. The application will need to determine what content should be saved locally and how frequently it should be updated. A balance must be struck between updating too frequently and using up the user’s bandwidth and storage, or updating less frequently but risk showing the user outdated content.
Syncing data: if the application allows for the editing of data whilst offline, there will need to be a process to update the data on the web server once back online. This process will need business rules to determine how any data conflicts are to be resolved.
Technology: the application must take into consideration the range of support provided by each device and browser. The design must account for the fact that an offline first approach is not always possible as key technologies are not supported across all devices.
Handling the transition: as well as the user being online or offline the application must consider a range of other network states such as the user having a very weak signal or an intermittent signal. The user should have an uninterrupted browsing experience during the transition between on and offline modes.