使用 React Native 建立離線優先應用程式-js教程-PHP中文網

Building Offline-first Applications with React Native

想像一下您的應用程式被零售商用來更新庫存水準、銷售代表存取客戶資料或任何在間歇性連線期間發送訊息的使用者。在所有這些情況下，離線功能可能意味著無縫用戶體驗和令人沮喪的用戶體驗之間的差異。這就是線下優先思維發揮作用的地方。

離線優先的方法確保您的應用程式即使在網路無法使用時也能保持功能。 WhatsApp 等應用程式完美地詮釋了這個概念。當您在離線狀態下發送訊息時，訊息會儲存在本機，並在連線恢復後自動發送。這種無縫體驗是透過利用本地儲存和監控網路狀態來實現的。無論是透過資料庫還是裝置內存，應用程式都會繼續運行，並在連接再次可用時將儲存的資料與伺服器同步。

在本文中，我將指導您使用本機儲存、資料庫同步和 Expo API 在 React Native 應用程式中實現離線支援。離線優先方法的好處包括：

改善使用者體驗：使用者遇到停機的可能性較小，這提高了他們的整體滿意度。
資料一致性：資料本地存儲，線上同步，防止資料遺失或損壞。
提高參與度：離線工作的應用程式提供了更大的靈活性，提高了參與度和保留率，特別是在網路不可靠的地區。

使用 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,
  },
});

登入後複製

它是如何運作的？

網路狀態偵測：使用NetInfo庫，我們檢查設備是否線上或離線。如果在線，應用程式會從 API 取得資料並快取。如果裝置處於離線狀態，應用程式會從 AsyncStorage 擷取快取的資料。
資料快取：AsyncStorage 允許我們儲存從 API 取得的資料以供離線存取。這對於在沒有有效互聯網連接的情況下使應用程式正常運作至關重要。
資料同步：當連接恢復時，應用程式從 API 獲取新資料並更新緩存，確保用戶在線上時始終擁有最新資訊。

進階離線功能和關鍵注意事項

您可以透過整合更高級的功能來建立此基本功能，例如：

同步策略：某些應用程式需要進階同步策略，這可能會出現衝突（例如，兩個使用者離線更新相同的資料）。 PouchDB 或 Firebase 等工具可以協助管理即時資料同步和衝突解決。
資料庫解決方案：對於更複雜的應用程序，您可能需要使用 Realm 或 SQLite 等本地資料庫來處理更大的資料集和更複雜的查詢。
樂觀更新：在某些應用程式中，特別是那些具有用戶生成內容（例如社交媒體）的應用程序，通常允許用戶離線創建、更新或刪除資料。您可以實施樂觀更新，即立即在 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:

Last Write Wins (LWW)
Manual Conflict Resolution
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:

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

Cons:

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:

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

Cons:

Requires user intervention, which can be disruptive.
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:

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

Cons:

Complex to implement.
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中文網其他相關文章！