preface

For a long time, when developing mobile applications (including Web applications), we have been conditioned to think of “offline” as a mistake. As creators of apps, we design and develop these apps on increasingly stable and fast office networks, and gradually lose empathy for users who can’t always be online. They may be commuters who have to squeeze into subways with no signal on their way to work, or gamers who like to grab their phones and sit in toilets where Wi-Fi is out of reach. When they are with us, they are us. From “Redis Getting Started guide” by Luin Lee

Embrace offline first

The company’s products are not connected to the Internet because of the region, in some cases. A certain function of the APP must be used to ensure the normal operation of front-line business personnel. Providing offline function is of great significance to our products. To meet these complex and trivial offline requirements. We finally settled on an offline first development model.

Offline is not a bug, online is a feature

Offline first refers to developing applications with offline scenarios in mind while adding additional functionality for networking. As far as our products are concerned, we will preset that users are always in a state without network connection, and enable users to use most functions normally in this state. At the same time, when connected to the Internet, we provide users with offline synchronization and other functions.

Data is modified and then synchronized

By default, users are offline regardless of whether they are online or not. All changes made by the user to the data are written directly to the local data (even if it is currently networked) and feedback is received in real time. The application synchronizes these changes with the server in the background via a separate component. Therefore, we should store and maintain data in the same place. So, we decided to introduce React-Redux.

Each corresponding module separately encapsulates a Reducer and action, and introduces redux-Logger plug-in to facilitate the detection and debugging of data changes

Redux Offline

For projects that use Redux data management, the quickest way is to use Redux-Offline. The idea is to use Redux Middleware to listen for every change in Acton data, and then serialize the data that needs to be taken offline to the local server. The next time a page is refreshed, Restore data from local restore to store first. The advantage of this solution is that the API interface that needs to be cached can be quickly configured into the middleware, and the full combination of Redux features is very good for applications that want to easily display offline data first.

Unified Data Format, Normalizr

All data is stored in the Redux Store, so we can’t just Store offline data that needs to be updated in the Store. Normalizr serializes data from the API, so we can see the structure of the data very clearly.

Not normalizr

{
  "id": "123"."author": {
    "id": "1"."name": "Paul"
  },
  "title": "My awesome blog post"."comments": [{"id": "324"."commenter": {
        "id": "2"."name": "Nicole"}}}]Copy the code
import { normalize, schema } from 'normalizr';

// Define a users schema
const user = new schema.Entity('users');

// Define your comments schema
const comment = new schema.Entity('comments', {
  commenter: user
});

// Define your article
const article = new schema.Entity('articles', {
  author: user,
  comments: [comment]
});

const normalizedData = normalize(originalData, article);
Copy the code

After normalizr

{
  result: "123",
  entities: {
    "articles": {
      "123": {
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324"]}},"users": {
      "1": { "id": "1"."name": "Paul" },
      "2": { "id": "2"."name": "Nicole"}},"comments": {
      "324": { id: "324"."commenter": "2"}}}}Copy the code

Getting clear structuring, how to save locally and how to update to views, and sending data to back-end updates is a breeze.

conclusion

.

Refer to the article

Explore how to build an offline first React application front-end