댓글 검색 목록

[Reactjs] React Native에서 오프라인 모드 처리

페이지 정보

작성자 운영자 작성일 21-05-11 15:23 조회 1,304 댓글 0

앱 개발자로서 우리는 항상 사용자 측에서 가능한 한 많은 불편을 없애려고 노력합니다. 이러한 불편 함 중 하나는 앱 사용 중에 인터넷 연결이 끊어 질 수 있습니다. 이를 방지하려면 제품과 사용자 모두에게 윈윈 인 오프라인 모드로 설계해야 합니다.

이 기사에서는 React Native에서 오프라인 애플리케이션을 설계하기 위한 기반 역할을 하는 전략을 살펴볼 것입니다. 또한 오프라인 모드를 달성하기 위해 일부 라이브러리, 복잡성 및 가장자리 사례를 검토합니다.

대부분의 모바일 앱은 저장하기 쉽고 Realm, SQLite, Redux 등의 여러 지원 기술을 가지고 있기 때문에 text/JSON 데이터를 사용합니다. 일반 데이터도 캐시할 수 있지만 캐시 된 데이터의 무효화가 문제가 됩니다. 경우에 따라 이미 캐시 된 데이터를 덮어 쓸 수 있습니다.

모바일 애플리케이션은 사용자가 소비하거나 생성하는 데이터에 따라 크게 두 가지 범주로 나눌 수 있습니다.

예를 들어 날씨 앱을 사용하면 서버의 거의 모든 데이터를 표시하고 모바일 앱에 표시합니다. 인터넷 캐시가 없는 경우 데이터를 표시 할 수 있습니다. 또한 앱이 서버에서 업데이트 된 데이터를 가져 오면 이전에 캐시 된 데이터를 삭제하고 서버에서 새 데이터를 저장합니다.

또 다른 사례 인 Skype를 살펴 보겠습니다. 여기에서 사용자는 지속적으로 데이터를 생성하고 인터넷이 작동하지 않는 경우에도 계속 메시지를 받습니다. 인터넷에 연결되자마자 앱은 모든 데이터를 서버에 업로드합니다. 이것은 본질적으로 오프라인 앱의 데이터 동기화 개념입니다.

데이터 동기화는 모든 장치에서 데이터의 일관성을 보장하기 위한 지속적인 프로세스입니다. 이 기사에서 개념을 자세히 살펴볼 것입니다.

인터넷이 작동하지 않습니까?

인터넷이 작동하지 않는 경우 모바일 앱을 개발하는 방법에 대해 알아 보겠습니다.

1) 첫째, UI / UX는 우리가 오프라인 모드에 있다는 사실을 반영해야 하므로 인터넷이 작동하지 않음을 나타내는 배너 / 메시지를 수용해야 합니다. 오프라인 모드에서 일부 기능을 사용할 수 없는 경우 화면에 이 기능을 오프라인 모드에서 사용할 수 없음을 나타내는 몇 가지 시각적 신호가 표시되어야 합니다.

2) 그런 다음 데이터 수준에서 오프라인으로 처리 할 수 있는 기능을 서버와 동기화해야 합니다. 인터넷이 작동하지 않는 경우 앱은 특정 요청에 대해 서버의 작업을 수행하거나 앱이 다시 온라인 상태가 될 때까지 대기열에 넣어야 합니다.

이 권한을 얻으려면 인터넷 연결이 작동 할 때 요청을 실행하기 위해 모든 API 요청에 대해 대기열을 유지해야 합니다.

큐에는 URL, 매개 변수, 본문과 같은 API 데이터의 기본 정보가 있는 객체가 있을 수 있습니다. 인터넷이 연결될 때마다 대기열의 API 요청이 하나씩 전달되고 데이터가 서버와 모바일 앱간에 동기화 됩니다.

작업 배열을 redux-persist에 화이트리스트에 추가하여 로컬 스토리지에 저장할 수 있습니다. 작업 추가, 제거 및 디스패치를 담당하는 큐 관리자 클래스를 유지할 수 있습니다.

다음은 저장된 작업에 대해 취할 수 있는 조치입니다.

큐 관리자는 앱 실행시 모든 스토어 작업을 읽습니다.
인터넷이 작동하면 백그라운드에서 작업을 파견합니다.
작업이 성공적으로 완료되면 큐 관리자는 저장된 작업을 제거합니다.
작업이 실패하면 큐 관리자는 저장된 작업에서 해당 작업을 제거하지 않고 다시 디스패치를 시도합니다.
이 루프는 모든 작업이 성공적으로 발송 될 때까지 계속됩니다.

큐 관리자의 자세한 구현에 대해서는 이 링크를 확인하는 것이 좋습니다.

오프라인 모드에서 인증

인터넷이 작동하지 않을 때 API 요청을 대기열에 추가하므로 권한 부여 처리가 번거롭지 않은지 확인해야 합니다.

일반적으로 인증에는 인증 토큰 및 새로 고침 토큰이 사용됩니다. 토큰이 특정 시간에 새로 고쳐지지 않으면 만료됩니다. 그 후 앱이 인터넷에 다시 연결되고 대기열이 요청을 전달하기 시작하면 서버에 '권한 없음'오류가 표시됩니다.

앱이 승인되지 않은 경우 refresh_token API를 눌러 다시 승인을 받을 수 있습니다 (referesh_token도 만료 된 경우). 앱 흐름을 로그인 화면으로 이동하거나 '데이터를 동기화 하려면 다시 로그인 하십시오'라는 메시지가 표시되어야 합니다. 승인 후 데이터 동기화를 위해 요청을 서버로 보낼 수 있습니다.

Data Sync

동기화는 로컬 앱과 서버의 데이터가 항상 동일한 지 확인하기 위해 사용하는 개념입니다. 둘 다 인터넷에 연결될 때마다 둘 다 동일한 데이터 버전을 갖습니다.

보다 원활한 사용자 경험을 구현하는 데 도움이 되는 몇 가지 예외 사례를 관찰하는 것이 항상 유용합니다.

영화 티켓팅 앱을 봅시다. 이 앱은 영화관에서 예정된 모든 영화와 상영 날짜를 보여줍니다. 일반적으로 영화 일정이 계획되면 변경없이 그대로 유지됩니다.

동기화 할 때 다음 시나리오를 처리해야 합니다.

다음 목록의 서버에 추가 된 새 영화
서버에서 제거 된 영화를 장치에서 삭제
일부 영화 정보가 업데이트 된 경우 정보를 로컬로 동기화 (예 : 이름 변경 등)
일부 추가 정보 (데이터 노드)가 영화와 함께 추가됩니다 (예 : 추가 된 캐스트 정보 등).

로컬 앱 데이터와 서버 데이터간에 동기화 기준이 결정되어야 합니다.

데이터를 동기화하는 주요 전략 중 하나는 최신 서버 데이터가 동기화 될 때 로컬 앱 데이터에 타임 스탬프를 저장하는 것입니다. 이 타임 스탬프는 서버로 전송되며 서버가 마지막 동기화 시간 이후에 데이터를 업데이트 한 경우 반환됩니다.

여기에서 CRDT (충돌없는 복제 데이터 유형)에 대한이 훌륭한 강연에서 동기화에 대해 자세히 알아보십시오.

React Native의 아키텍처

위에서 논의한 모든 개념을 확인하는 아키텍처를 구현하려면 Redux-Persist 및 NetInfo와 같은 라이브러리의 도움이 필요합니다.

Redux Persist는 데이터를 유지하고 재수 화하기 위한 JavaScript 라이브러리입니다. React Native 용어로 Asyncstorage는 전역 적이며 앱에 대한 redux-persist를 사용하여 로컬 스토리지로 사용할 수 있는 키-값 기반의 암호화되지 않은 비동기 스토리지 시스템입니다.

데이터 영구 저장소에 redux-persist 라이브러리를 사용합니다. 이제 앱이 시작될 때마다 redux 상태에 저장된 모든 데이터를 다시 로드합니다. redux-persist로 오프라인 모드의 모든 측면을 어떻게 다룰 수 있는지 개념에 더 중점을 둘 것입니다.

Redux-persist는 redux 저장소가 설정되는 방식과 유사하게 애플리케이션 수준에서 설정됩니다. 전체 애플리케이션을 redux-store 계층으로 래핑합니다. 마찬가지로 redux-persist 구성은 앱 수준에서 redux와 함께 사용됩니다. PersistReducer는 루트 리듀서를 래핑하여 redux 상태가 변경 될 때마다 영구 스토리지에 저장되도록 합니다.

NetInfo 라이브러리는 인터넷 연결을 감지하는 데 사용할 수 있습니다.

리스너는 Netinfo로 구현할 수 있지만 인터넷 상태는 redux에 저장할 수 있으므로 모든 구성 요소에서 액세스 할 수 있으며 인터넷 연결의 현재 상태를 기반으로 UI 렌더링을 수행 할 수 있습니다.

Post Data Request Flow

사용자가 오프라인 모드에서 영화 리뷰를 게시하고 싶다고 가정 해 보겠습니다. 명확한 이해를 위해 단계별로 흐름을 실행해야 합니다.

사용자가 리뷰를 작성하고 게시 버튼을 눌렀습니다.
앱은 리뷰를 게시하기 위해 redux 작업을 전달합니다.
요청은 감속기 레이어로 전달되어 인터넷이 작동하는지 확인합니다.
인터넷이 작동하지 않으면 요청 데이터가 sync_queue에 저장되는 동시에 유지됩니다. 또한 redux-persist에서 리뷰 목록을 화이트리스트에 올릴 것입니다.
인터넷이 다시 연결될 때마다 앱은 sync_queue에서 작업을 하나씩 전달합니다. 백그라운드에서 작업 디스패치를 지원하는 대기열의 자세한 구현은이 리소스를 확인하세요.
API가 성공하면 sync_queue의 작업이 대기열에서 제거됩니다.
이 루프는 이렇게 계속 굴러갑니다.

Fetch Data Request Flow

사용자가 앱에서 예정된 영화를 보고 싶다고 가정합니다. 이제 흐름의 모든 단계를 살펴 보겠습니다.

인터넷이 작동하지 않으면 redux-persist를 사용하여 로컬에 저장된 데이터에서 영화 목록이 채워집니다.
인터넷이 작동하는 경우 앱의 타임 스탬프가 가져 오기 요청으로 전송됩니다.
서버는 모바일 앱과 동기화되지 않은 새 데이터를 서버로 보내며, 타임 스탬프는 마지막 데이터 동기화를 위해 서버와 모바일 앱 간의 체크 포인트가됩니다.
서버의 새 레코드는 나중에 유지하기 위해 로컬 데이터에 추가됩니다.
원활한 로컬 운영을 위해 API 구조를 결정하는 것은 개발자의 몫입니다.
로컬에 저장된 영화 목록에서 일부 데이터를 삭제해야 하는 경우 서버는 삭제할 레코드의 ID를 보냅니다.

{ "movies" : [ { "id" : 3, "name" : "Avengers" }], "updates": [{ "id" : 1, "name" : "Avengers" }], "toDelete" : [1,2,3] }