This content originally appeared on Bits and Pieces - Medium and was authored by Ravidu Perera
Implementing Offline First Applications in Practice
Offline-first is an application development methodology that ensures the continuous functionality of the application even if you temporarily lose the network connectivity. For example, if you are traveling on a plane or hiking in a network-less area, offline-first applications can function as usual and provide you with uninterrupted service.
However, implementing offline first applications might not be easy as it sounds. Developers need to consider crucial factors like data synchronization, data storing, and data accessing to ensure a smoother workflow for developers.
So, this article will discuss the design patterns, tools, and techniques you can use to create offline-first applications to give you a better understanding.
Why Offline First Web Apps are Important
Usually, developers do not consider designing an offline-first experience when designing applications. However, modern smartphones can access the internet from anywhere, and applications can communicate with the servers through the internet.
However, we can not always trust mobile networks since the coverage strength is inconsistent everywhere. For example, if you’re traveling, you can not ensure that there is a good network connection to run any applications. Therefore those applications should be able to work offline to provide consent service to the users.
Hence, the requirement for offline-first experience is far greater than you think. Applications with offline-first experience allow users to work with the applications without interruptions due to poor connectivity and sync the data once the connection is available. For example, applications like Google Maps allow developers to preload certain map areas and use them as offline maps. But on the other hand, these offline designs offer benefits like reducing data usage, increasing battery life, and allowing for speedy loading times.
Different Design Patterns for Offline-First Web Apps
There are several design patterns available to develop offline-first applications. Following these approaches will help you quickly manage your applications’ data storage, syncing, and access.
1. Make Data Available Offline and Sort Data Offline
Caching is the simplest method for allowing users to access data when they are offline. You can easily achieve it by storing data on a local server or browser that the device access. This approach allows your applications to function in offline environments and improves user experience by quickly accessing data.
In addition to the browser cache, you can use a local database to read and write the required data for your application. Data in the local database can be synced with the main database when network connectivity is available. However, implementing this approach can be difficult and may reduce application performance on many devices.
2. Balance Data Between Offline and Sync Online
Balancing offline and syncing online is another great approach to building offline-first applications. This approach allows users to edit data offline and change it as needed. Once internet connectivity is established, the app can immediately become visible and receive updates.
Any offline design needs the sync cycle since it specifies the entire functionality of the program. The sync cycle decides how much data is stored offline and online. The appropriate sync cycle is determined by the user’s network accessibility, the importance of the data, and the need for business continuity. Three key sync mechanisms can be used to balance data offline and sync it when the network is online.
- Manual sync — The user decides when to sync the data and trigger the process.
- Scheduled sync — Schedule the sync process depending on the traffic and network availability.
- Push notification sync — This will trigger by the push notification to the server by the client device.
3. Edit Other User’s Data offline
Here, data synchronization takes place automatically without any human interaction. And all the updates are communicated between the device and server in a minor binary format. Only a few operations are syncing when the app is online. If there are any conflicts with the update, the system will resolve them automatically.
In this method, the developer needs to consider the database transactions. Database transactions allow communication between the backend server and the offline-first app. The end user can make modifications using the program even if there is no internet connection. The database synchronizes when an internet connection is re-established so both sides can access the same state.
Handling conflicts
Conflict handling is one of the most important aspects of offline-first application building. As developers, we need to ensure that all the operations performed by the user in offline environments are processed correctly and that no data is lost.
There are a few approaches to handling conflicts.
1. Ignore the conflict
You have to assume that the conflict does not affect your application and expect the users will correct the data layer. It is the simplest way to handle conflict. This approach is known as last-write-wins and works well in many applications such as Firebase and Trello.
But if you want to check the conflict and resolve it, you can use versioning your objects and transmit the changes.
2. Versioning the objects
The second approach is to version your objects. For example, let’s consider how Medium keeps track of claps per post.
Imagine a specific post gets an initial clap count as 100 and two devices (Device A & B), modifying this as follows:
- A & B sync data from the server and initially display the number of claps as 100, and devices go offline.
- The user clicks on the clap button on both devices.
- Both devices show the clap count as 101.
- The devices come back online and sync data to the server.
But the correct “clap count” should be 102. So one way to achieve this conflict is to version the change.
Whenever a new version is created, a modification is made. So, we need strategies similar to Git to merge the two diverging versions. In this case, we know that the value saved is a counter. So, we can use auto-merge by changing the final value on each branch to be the sum of (value at current version — value at parent version). The following are two common auto merging strategies:
- Last to write wins: We’ll use the most recent revision to get to the server as the final number.
- Merge by fields: If the two devices changed separate fields of the object, auto merging by taking the new fields from both objects would be doable — similar to how Git auto merges non-conflicting changes.
The server performs the above-mentioned merging, and clients retrieve the merged value. However, if user intervention is required to settle a conflict, the merging must be performed on the client.
Tools and Technologies
Let’s discuss some tools and technologies we can use to design offline-first applications.
Progressive web applications (PWA)
PWAs have the advantage of combining the best of web and native apps by combining discoverability and power. As a result, the consumer receives a similar experience as browsing a webpage. Furthermore, the longer the app is used, the more it develops native-app-like characteristics.
Couchbase Mobile
Couchbase Lite provides an API for storing data locally on Android and iOS devices, while Couchbase Sync Gateway facilitates data replication between the database and the server. These are two other tools that enable the offline-first approach.
Polymer AppToolbox
This app toolkit is a part of Google’s Polymer Project. It offers components, tools, and templates while using service workers to provide offline caching as a gradual enhancement.
Service Workers
The service workers strategy is the most recent and significant advancement in Offline-first. It attempts to create a browser mechanism that permits caching content and assets that may use offline. While AppCache was the first tool to do it, there were several concerns that service workers hoped to address with the new approach.
When they are down, they intercept client queries and deliver cached results. For offline-first functionality, Progressive Web Apps rely primarily on service workers. Google Chrome, Opera now support service workers, and Firefox, with Microsoft Edge, set to follow suit soon.
PouchDB
PouchDB enables direct reading and writing of data on the device, which is subsequently synced to the cloud as soon as internet connectivity is available. It makes the process of generating, reading, updating, and deleting extremely quick because all data is accessible locally. PouchDB can be used in any JavaScript environment, including Node.js and a web browser. It also runs on Ionic, Electron, and Tessel.
Apart from the above-discussed tools and frameworks, the following tools also can use to develop Offline-first applications :
- Sync Adapters
- ConnectivityManager
- Data Saver
- Firebase Cloud Messaging
- Cloudant Envoy
Conclusion
User experience is one of the most important aspects of any application. Although you can not control external parameters like network connectivity and power restrictions in devices, you can take countermeasures for them by adopting offline first application development. It will give you a competitive advantage over other apps and attract more users to your application.
I hope this article helped you to understand different design patterns for offline-first web apps. Thank you for reading.
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with:
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Design Patterns for Offline First Web Apps was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Ravidu Perera
Ravidu Perera | Sciencx (2022-09-20T05:32:13+00:00) Design Patterns for Offline First Web Apps. Retrieved from https://www.scien.cx/2022/09/20/design-patterns-for-offline-first-web-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.