[Flutter] App Links 적용기 (Deep Link)

Angela Jeong·2024년 8월 30일

Flutter 딥링크

목록 보기

2/7

https://docs.flutter.dev/cookbook/navigation/set-up-app-links
모든 단계는 플러터 공식 문서를 따라가고 있으니 문서를 보면서 참고하면 좋다:)

본격적인 작업이 들어가기 전에 앱 미설치 유저에게 보여줄 웹 페이지가 필요하다. 나는 테스트를 위해 github.io로 간단한 웹페이지를 만들었다.

👉 github.io 빠르게 만드는 방법: https://pages.github.com/

1. AndroidManifest 파일에 태그 추가하기

먼저 android/app/src/main/AndroidManifest.xml파일에 아래처럼 태그를 추가한다.

android:host 부분에 꼭 "example.com" 형태와 동일하게 넣어주셔야 한다!!

<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="example.com" />
    <data android:scheme="https" />
</intent-filter>

2. assetlinks.json 파일 호스팅

1) 웹 프로젝트에 .well-known 폴더 생성하기

플러터 앱 프로젝트 내에 생성하는 것이 아니라, 웹 프로젝트에 생성해야한다!

루트 디렉토리에 .well-known 폴더를 생성
해당 폴더 안에 assetlinks.json 파일 생성
(apple-app-site-association 은 universal link 만들 때 추가하는 파일이다.)

2) assetlinks.json 파일 생성하기

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example.deeplink_cookbook",
    "sha256_cert_fingerprints":
    ["FF:2A:CF:7B:DD:CC:F1:03:3E:E8:B2:27:7C:A2:E3:3C:DE:13:DB:AC:8E:EB:3A:B9:72:A1:0E:26:8A:F5:EC:AF"]
  }
}]

package_name
build.gradle파일에 아래와 같은 형태로 패키지 네임이 있다.

android {
    namespace "com.exapmle"

sha256_cert_fingerprints
공식 문서에 따르면 Release>Setup>App Integrity>App Signing 탭에서 찾을 수 있다.

엄청 생소해보이지만 그냥 연결해주고 싶은 앱과 디바이스에 설치된 앱이 같은 앱인지 확인하기 위한 지문이라고 생각하면 된다.

🚨 Google Play 앱 서명 키와 업로드 키는 다르니 꼭 서명키로 확인해야 한다.
🚨 서명키가 없다면 아래 명령어를 통해 확인할 수 있다.

adb shell pm get-app-links com.example.app

3. 테스트 해보기

잊지 말고 웹 프로젝트도 push 를 해주고! 앱 프로젝트는 저장하고, 아래 명령어로 애뮬레이터에서 테스트를 해보자.

adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://<web-domain>/details"' \
    <package name>

앱 미설치 시에 우리가 임시로 만든 웹페이지로 잘 떨어지고, 앱 설치시에 앱이 잘 열린다면 성공이다:)

실기기에서 테스트할 때는 안드로이드는 메모장 앱이 따로 없어서 문자 메시지에 링크를 넣어 테스트를 했다.