React 프로젝트에서 Capacitor로 Background 위치 추적하기

지난 포스팅에 이어 JavaScript(TypeScript) 코드로 안드로이드 백그라운드 위치 추적 코드를 작성해보겠다.

1. 패키지 설치

먼저, 리액트 패키지를 설치해야 한다.

Capacitor는 오픈소스 커뮤니티가 매우 잘되어 있어서 npm에 등록된 background geolocation 관련 패키지가 몇 개 있었는데, 나는 그 중에 등록된 이슈와 사용된 횟수가 가장 많은 @capacitor-community/background-geolocation를 사용했다.

여기서 자세한 사용법을 볼 수 있다.

> pnpm add @capacitor-community/background-geolocation

먼저 위와 같이 패키지를 추가한다.

import { registerPlugin } from '@capacitor/core';
import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';

import { postNotifications } from '@/api/notification';

const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>('BackgroundGeolocation');

export const backgroundGeolocation = () => {
  // addWatcher()로 watcher 추가
  // watcher는 watcher를 제거하는데 필요한 id를 담은 promise를 반환
  // 여러개의 watcher를 추가할 수 있음
  BackgroundGeolocation.addWatcher(
    {
      // backgroundMessage가 정의되어야 background에서도 location을 추적함
      backgroundMessage: "Cancel to prevent battery drain.",
      backgroundTitle: "Tracking You.",

      // 사용자에게 권한 요청 여부
      requestPermissions: true,

      // false인 경우 항상 최신 상태임이 보장되고, true인 경우 이전 위치가 전송될 수 있음
      stale: false,

      // 다음 위치와의 최소 미터 수 (default value: 0)
      distanceFilter: 50,
    },
    (location, error) => {
      if (error) {
        if (error.code === 'NOT_AUTHORIZED') {
          if (
            window.confirm(
              'This app needs your location, ' +
                'but does not have permission.\n\n' +
                'Open settings now?',
            )
          ) {
            // 위치 권한이 거부되었을 때, 사용자가 장치의 설정으로 이동할 수 있도록 함
            BackgroundGeolocation.openSettings();
          }
        }
        return console.error(error);
      }

      // ✅ do something...
      
      return console.log(location);
    },
  );
};

위치 감지하는 코드는 이렇게 작성한다.

나는 여기서 backgroundMessage와 backgroundTitle을 우리 서비스에 맞게 바꾸었고, do something 부분에서 서버로 위치 전송하는 코드를 작성했다.

이걸 안드로이드에서 실행해보려면 설정을 조금 추가해줘야 한다.

2. Android Manifest file 수정

    <uses-permission android:name="android.permission.SCHEDULE_EXACT_ALARM" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-feature android:name="android.hardware.location.gps" />

이전 포스팅에서처럼 AndroidManifest.xml 파일에 위치 관련 권한을 추가한다.

위치 추적 중임을 사용자에게 반드시 표시해야되므로 알림 권한도 추가한다.

<string name="default_notification_channel_id">Channel ID</string>

그리고 string.xml 파일에 알림을 날리기 위한 id 값도 추가해준다.

---

이론상 이게 끝이지만? 나는 안드로이드에서 위치 추적이 안되는 문제가 발생했다.

3. gradle 의존성 추가

여기를 보면 알 수 있듯이, google play service에서 제공하는 서비스 API를 사용하려면 의존성을 추가해줘야 한다고 한다.

buildscript {
	// ...
	dependencies {
		classpath 'com.google.android.gms:play-services-location:21.1.0'
	}
}

그래서 android/build.gradle에 위 코드를 추가해줬다.

여기까지 하면 JS(TS) 코드와 안드로이드 설정 몇 줄만으로 안드로이드 앱에서 백그라운드 위치 추적 구현 끝났다. 👏👏👏

다음은 FCM 설정과 알림 받는 과정을 포스팅 해보겠다.

---

읽어주셔서 감사하고, 피드백은 언제나 환영합니다. 👐