React Native - 어플 버전 체크

어플을 출시하고 나면 유지보수를 통한 업데이트 및 버전 관리는 굉장히 중요하다. 이 때 RN에서는 react-native-version-check 라는 라이브러리를 통해 어플의 버전을 확인하고 관리할 수 있다.

 

버전을 관리할 때의 기본 플로우는 아래와 같다.

1. 현재 실행 어플의 버전 확인
2. 앱 스토어의 버전 확인
3. 둘 차이가 있을 경우, 앱 스토어 강제 연결 혹은 권장 메세지 노출

https://www.npmjs.com/package/react-native-version-check

react-native-version-check

 

 

1. 설치

npm install react-native-version-check
#or
yarn add react-native-version-check

 

 

2. 설정

android/settings.gradle

...
include ':react-native-version-check'
project(':react-native-version-check').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-version-check/android')

 

android/app/build.gradle

...
dependencies {
   ...
   implementation project(':react-native-version-check')
}

 

android/app/src/main/java/[app]/MainApplication.{java/kotlin}

......
import io.xogus.reactnative.versioncheck.RNVersionCheckPackage;  // <-- add

......

@Override
protected List<ReactPackage> getPackages() {
   ......
   new RNVersionCheckPackage()            // <-- add
   ......
}

 

 

3. 기본 메소드 정리

• getCountry() : 디바이스의 국가 코드
• getPackageName() : 앱의 패키지 이름
• getCurrentBuildNumber() : 현재 앱 빌드 번호
• getStoreUrl([option: Object]) : App store 혹은 Play store 앱 url
• getAppStoreUrl([option: Object]) : App store 앱 url
• getPlayStoreUrl([option: Object]) : Play store 앱 url
• getCurrentVersion() : 현재 앱 버전
• getLatestVersion() : App store 혹은 Play store의 버전
• needUpdate([option: Object]) : 업데이트 필요 여부를 포함한 객체 (현재 버전과 최신 버전이 첫번째로 구분자로 분할 / 각 분할 된 숫자를 확인)

 

 

4. 어플 버전 관리 규칙 (ex. v 2.1.3)

소프트웨어 버전 관리에서 전반적으로 사용되는 규칙이다.

• Major : 가장 먼저 나오는 숫자 (예시에서는 2)
  • 기존 버전과 호환 x
  • 대규모 업데이트
  • 뒤의 숫자들은 0으로 초기화 필요 (ex. v2.1.3 => v3.0.0)
• Minor : 두 번째 숫자 (예시에서는 1)
  • 기존 버전과 호환 o
  • 새로운 기능 추가
• Patch : 마지막 숫자 (예시에서는 3)
  • 버그 수정
  • 디자인 변경
  • 자잘한 업데이트

 

5. 코드

이번 예시 코드와 실행화면의 경우, 공식 문서에서 정리된 코드가 깔끔하고 본인 역시 이를 토대로 입맛에 맞게 변형만 했기 때문에 따로 작성하지 않고 공식문서 코드로 대체한다.

import { Linking } from 'react-native';
import VersionCheck from 'react-native-version-check';

VersionCheck.getCountry()
  .then(country => console.log(country));          // KR
console.log(VersionCheck.getPackageName());        // com.reactnative.app
console.log(VersionCheck.getCurrentBuildNumber()); // 10
console.log(VersionCheck.getCurrentVersion());     // 0.1.1

VersionCheck.getLatestVersion()
  .then(latestVersion => {
    console.log(latestVersion);    // 0.1.2
  });

VersionCheck.getLatestVersion({
    provider: 'appStore'  // for iOS
  })
  .then(latestVersion => {
    console.log(latestVersion);    // 0.1.2
  });

VersionCheck.getLatestVersion({
    provider: 'playStore'  // for Android
  })
  .then(latestVersion => {
    console.log(latestVersion);    // 0.1.2
  });

VersionCheck.getLatestVersion()    // Automatically choose profer provider using `Platform.select` by device platform.
  .then(latestVersion => {
    console.log(latestVersion);    // 0.1.2
  });

VersionCheck.getLatestVersion({
  forceUpdate: true,
  provider: () => fetch('http://your.own/api')
    .then(r => r.json())
    .then(({version}) => version),   // You can get latest version from your own api.
}).then(latestVersion =>{
  console.log(latestVersion);
});

VersionCheck.needUpdate()
  .then(async res => {
    console.log(res.isNeeded);    // true
    if (res.isNeeded) {
      Linking.openURL(res.storeUrl);  // open store if update is needed.
    }
  });

VersionCheck.needUpdate({
  depth: 2
}).then(res => {
  console.log(res.isNeeded);
  // false; because first two fields of current and the latest versions are the same as "0.1".
});

VersionCheck.needUpdate({
  currentVersion: "1.0",
  latestVersion: "2.0"
}).then(res => {
  console.log(res.isNeeded);  // true
});

VersionCheck.needUpdate({
  depth: 1,
  currentVersion: "2.1",
  latestVersion: "2.0",
}).then(res => {
  console.log(res.isNeeded);  // false
});

 

 

6. 유의사항

• 어플 등록 버전을 가져올 때(getLatestVersion), 등록되지 않았다면 undefined 값을 뱉고 warning이 발생한다.
• getLatestVersion에서 provider는 'appStore'와 'playstore'를 확인하는 용도로 본인이 출시한 store를 넣어주면 된다. 만약 값을 추가하지 않으면 실행된 플랫폼 기준으로 버전을 반환한다.
• forceUpdate를 true로 하면 최신 버전 조회하면서 업데이트를 강제로 진행한다. (본인은 반강제 플로우를 제공했다. 방식은 업데이트 안내 메세지와 함께 확인 버튼을 누르면 store로 연결되는 custom alert가 띄어진다.)