使用 React Native 构建离线优先应用程序

想象一下您的应用程序被零售商用来更新库存水平、销售代表访问客户数据或任何在间歇性连接期间发送消息的用户。在所有这些情况下，离线功能可能意味着无缝用户体验和令人沮丧的用户体验之间的区别。这就是线下优先思维发挥作用的地方。

离线优先的方法确保您的应用程序即使在互联网不可用时也能保持功能。 WhatsApp 等应用程序完美地诠释了这个概念。当您在离线状态下发送消息时，消息会存储在本地，并在连接恢复后自动发送。这种无缝体验是通过利用本地存储和监控网络状态来实现的。无论是通过数据库还是设备内存，应用程序都会继续运行，并在连接再次可用时将存储的数据与服务器同步。

在本文中，我将指导您使用本地存储、数据库同步和 Expo API 在 React Native 应用程序中实现离线支持。离线优先方法的好处包括：

1. 改善用户体验：用户遇到停机的可能性较小，这提高了他们的整体满意度。
2. 数据一致性：数据本地存储，在线同步，防止数据丢失或损坏。
3. 提高参与度：离线工作的应用程序提供了更大的灵活性，提高了参与度和保留率，特别是在互联网不可靠的地区。

使用 Expo 和 React Native 设置离线支持

Expo 是 React Native 开发的一个很棒的框架，因为它抽象了许多特定于平台的配置，使您能够专注于构建功能。在本节中，我们将探索如何使用 Expo、用于本地存储的 AsyncStorage 和用于网络状态检测的 NetInfo 在简单的 React Native 应用程序中实现离线支持。

1. 设置项目

首先，让我们开始创建一个新的由 Expo 驱动的 React Native 项目。

npx create-expo-app offline-first-app
cd offline-first-app

第2步：安装依赖项

在此示例中，我们将使用两个关键库：

@react-native-async-storage/async-storage：这个库将允许我们在设备上存储数据。
@react-native-community/netinfo：这个库将帮助我们检测网络状态，确定设备是在线还是离线。

安装必要的软件包：

expo install @react-native-async-storage/async-storage @react-native-community/netinfo

第三步：实现离线逻辑

接下来，我们将构建一个简单的应用程序，在线时从 API 获取数据并将其存储在本地以供离线时使用。我们将从在 App.js 中设置基本结构开始：

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

const DATA_API = 'https://jsonplaceholder.typicode.com/posts';

export default function App() {
  const [data, setData] = useState([]);
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      // Check network status
      const netInfo = await NetInfo.fetch();
      setIsOffline(!netInfo.isConnected);

      if (netInfo.isConnected) {
        // Fetch data from API when online
        try {
          const response = await fetch(DATA_API);
          const result = await response.json();
          setData(result);

          // Cache the data for offline use
          await AsyncStorage.setItem('cachedData', JSON.stringify(result));
        } catch (error) {
          console.error('Failed to fetch data:', error);
        }
      } else {
        // Load data from AsyncStorage when offline
        try {
          const cachedData = await AsyncStorage.getItem('cachedData');
          if (cachedData) {
            setData(JSON.parse(cachedData));
          }
        } catch (error) {
          console.error('Failed to load data from cache:', error);
        }
      }
    };

    loadData();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Offline-First App</Text>
      <Text>Status: {isOffline ? 'Offline' : 'Online'}</Text>

      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
      />

      <Button title="Reload" onPress={() => loadData()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  title: {
    fontSize: 16,
  },
});

它是如何工作的？

1. 网络状态检测：使用NetInfo库，我们检查设备是否在线或离线。如果在线，应用程序会从 API 获取数据并缓存。如果设备处于离线状态，应用程序会从 AsyncStorage 检索缓存的数据。

2. 数据缓存：AsyncStorage 允许我们存储从 API 获取的数据以供离线访问。这对于在没有有效互联网连接的情况下使应用程序正常运行至关重要。

3. 数据同步：当连接恢复时，应用程序会从 API 获取新数据并更新缓存，确保用户在线时始终拥有最新信息。

高级离线功能和关键注意事项

您可以通过集成更高级的功能来构建此基本功能，例如：

1. 同步策略：某些应用程序需要高级同步策略，这可能会出现冲突（例如，两个用户离线更新相同的数据）。 PouchDB 或 Firebase 等工具可以帮助管理实时数据同步和冲突解决。

2. 数据库解决方案：对于更复杂的应用程序，您可能需要使用 Realm 或 SQLite 等本地数据库来处理更大的数据集和更复杂的查询。

3. 乐观更新：在某些应用程序中，特别是那些具有用户生成内容（例如社交媒体）的应用程序，通常允许用户离线创建、更新或删除数据。您可以实施乐观更新，即立即在 UI 中进行更改，并在应用程序重新连接到互联网时与服务器同步。

---

Handling Complex Syncing and Conflict Resolution

In an offline-first app, conflicts arise when multiple users update the same data while offline and their changes are later synced with the server once the app reconnects to the internet. Handling these conflicts is crucial to maintain data consistency and provide a smooth user experience.

There are different strategies for resolving such conflicts, including:

1. Last Write Wins (LWW)
2. Manual Conflict Resolution
3. Operational Transformation (OT)

I have some examples here for you to check.

1. Last Write Wins (LWW)

In this strategy, the most recent change (based on a timestamp) is accepted as the final value when syncing data. It is simple and works well for many applications, but it may lead to data loss if multiple users edit the same data.

Imagine you are building a note-taking app, if two users edit the same note while offline, the user who syncs their changes last will overwrite the previous user’s changes.

Let’s assume we have a local storage system (using AsyncStorage) and a remote server.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Simulate syncing the note data with the server
const syncNoteWithServer = async (localNote) => {
  try {
    // Fetch the server data
    const response = await fetch('https://api.example.com/note');
    const serverNote = await response.json();

    // Compare timestamps
    if (localNote.updatedAt > serverNote.updatedAt) {
      // Local version is newer, so overwrite the server
      await fetch('https://api.example.com/note', {
        method: 'PUT',
        body: JSON.stringify(localNote),
        headers: { 'Content-Type': 'application/json' },
      });
    } else {
      // Server version is newer, discard local changes
      await AsyncStorage.setItem('note', JSON.stringify(serverNote));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localNote = {
  content: 'This is an updated note.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncNoteWithServer(localNote);

In this example:
The app compares the updatedAt timestamp of the local note (stored offline) with the note stored on the server.
If the local note is newer, it overwrites the server version. Otherwise, it discards local changes and updates the app with the server version.

Pros:

1. Simple to implement.
2. Works well for non-critical data.

Cons:

1. May lead to data loss (e.g., if both users made significant changes).

2. Manual Conflict Resolution

With manual conflict resolution, the user is prompted to resolve conflicts when multiple versions of the same data exist. This approach is more user-friendly in scenarios where every change is valuable and users need to decide which data to keep.

Here is a potential case: In a collaborative editing app, two users edit the same document while offline. Once both versions are synced, the user is prompted to choose which version to keep or merge.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { Alert } from 'react-native';

// Simulate syncing the document with the server
const syncDocumentWithServer = async (localDoc) => {
  try {
    // Fetch the server data
    const response = await fetch('https://api.example.com/document');
    const serverDoc = await response.json();

    if (localDoc.updatedAt !== serverDoc.updatedAt) {
      // Conflict detected, ask the user to resolve it
      Alert.alert(
        'Document Conflict',
        'Both you and another user have edited this document. Choose which version to keep.',
        [
          {
            text: 'Keep Local',
            onPress: async () => {
              // Overwrite the server with local changes
              await fetch('https://api.example.com/document', {
                method: 'PUT',
                body: JSON.stringify(localDoc),
                headers: { 'Content-Type': 'application/json' },
              });
            },
          },
          {
            text: 'Keep Server',
            onPress: async () => {
              // Discard local changes and update the app with the server version
              await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
            },
          },
        ],
      );
    } else {
      // No conflict, proceed with syncing
      await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localDoc = {
  content: 'This is my latest edit.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncDocumentWithServer(localDoc);

Here's what's happening
If the updatedAt timestamps differ between the local and server versions, the app alerts the user and asks them to choose which version to keep. The user can decide whether to keep the local or server version.

Pros:

1. Ensures that no important data is lost.
2. Suitable for collaborative apps where user input is valuable.

Cons:

1. Requires user intervention, which can be disruptive.
2. May confuse non-technical users.

3. Operational Transformation (OT)
Operational Transformation is a more advanced technique used in real-time collaboration apps like Google Docs. It automatically merges conflicting changes by transforming operations in a way that preserves both sets of edits. OT allows multiple users to work on the same document simultaneously, and their changes are merged intelligently.

In a document editor app, two users edit different parts of a document. OT ensures that both sets of edits are applied without overwriting each other.

This implementation is a bit complex and require specialized libraries, such as ShareDB or Yjs. Here’s a basic pseudocode example of how OT works:

// Example of transforming two concurrent operations
const operation1 = { type: 'insert', position: 5, value: 'Hello' }; // User 1 adds 'Hello' at position 5
const operation2 = { type: 'insert', position: 3, value: 'World' }; // User 2 adds 'World' at position 3

const transformOperations = (op1, op2) => {
  // If both operations modify different positions, no conflict
  if (op1.position !== op2.position) return [op1, op2];

  // If operations conflict, adjust positions accordingly
  if (op1.position > op2.position) op1.position += op2.value.length;
  else op2.position += op1.value.length;

  return [op1, op2];
};

// Transform the operations to avoid conflicts
const [transformedOp1, transformedOp2] = transformOperations(operation1, operation2);

The positions of the two conflicting operations are adjusted so that they can both be applied without overwriting each other.

Pros:

1. Ideal for real-time collaboration.
2. Automatically resolves conflicts without user intervention.

Cons:

1. Complex to implement.
2. Requires specialized algorithms and libraries.

Conclusion
Each conflict resolution strategy comes with its trade-offs. For simpler apps, Last Write Wins may suffice. However, for collaborative apps where user data is crucial, Manual Conflict Resolution or more advanced techniques like Operational Transformation might be necessary. Choosing the right strategy depends on the complexity of your app and the importance of the data being modified.

---

I plan to create a series of articles that dive deeper into the following key topics:

Optimistic UI Updates – We'll explore how to immediately reflect changes made while offline in the UI, giving users the impression that their actions were successful. This approach greatly improves the user experience.

将 Service Workers 用于基于 Web 的应用程序 – 如果您通过 React Native Web 在 Web 上部署应用程序，我将解释 Service Workers 如何为渐进式 Web 启用离线缓存和后台同步应用程序 (PWA)。这确保用户即使在离线状态下也可以访问资源和数据。

离线优先应用程序的真实用例 – 我将仔细研究 Google 地图、Slack、Trello 和 Notion 等应用程序如何处理离线场景。通过研究这些示例，您将更好地了解离线优先技术的实际应用。

测试离线功能 – 我们将介绍测试离线功能的重要性，并回顾 React Native 调试器、Expo 工具和 Network Link Conditioner（适用于 iOS）等工具来模拟网络中断。我还将向您展示如何使用 Jest 和 React Native 测试库等库编写测试，以确保您的应用程序在离线条件下正常运行。

性能和存储注意事项 – 性能不仅仅与速度有关，还与速度有关。这也与用户体验有关。我将讨论通过减少缓存数据和实施数据过期策略来优化性能的策略，以避免本地存储不堪重负。

请继续关注开发者。

---

感谢您从头到尾阅读。我真的很喜欢记录和分享我的学习成果。我计划创建更多内容，包括视频教程，我将在 Instagram 和 TikTok 上分享。如果您是新来的，我是 Zidane Gimiga，一位热衷于优化用户体验的软件开发人员。随着技术越来越融入我们的生活，让每个人都尽可能轻松地使用技术至关重要。让我们继续推动更好、用户友好的解决方案。

哦，我在 Github

以上是使用 React Native 构建离线优先应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！