플러터에서 외부 라이브러리(파이어베이스 dynamic link 혹은 appsflyer 등) 없이 앱링크(유니버셜링크) 붙이기

나고수·2023년 8월 23일
0

플러터

목록 보기
1/5
post-thumbnail

💡 앱링크란?
앱의 특정 페이지로 이동하는 링크

💡 URL Scheme
tell:// , market:// 등 custom scheme을 이용해 앱으로 이동시킴
장점:
1. https(브라우저, 웹 사이트)를 이용하는게 아니기 때문에 도메인이 필요 없음
단점 :
1. 해당 스킴을 가진 앱이 깔려있지 않을 경우 아무 액션도 일어나지 않음 (마켓으로 이동이 안됨)
2. 해당 스킴을 가진 앱이 여러개일 경우
→ 안드로이드 : 해당 스킴을 가진 앱들 중 어느 앱으로 열지 다이어로그가 뜸
→ ios : 해당 스킴을 가진 앱들 중 가장 최근에 열린 앱이 뜸

💡 앱링크(안드로이드), 유니버셜링크(ios)
https:// , http:// 로 시작하는 링크를 이용해 앱으로 이동시킴
하나의 링크로 ios,android 모두 관리 할 수 있는지 궁금했는데 된다
장점:
1. https(브라우저, 웹 사이트)를 이용하기때문에 무조건 해당 앱으로 이동됨
2. (각 os가 만든 브라우저를 통해 열린다면 -안드로이드는 크롬, ios는 사파리-)해당 앱이 없으면 해당 앱의 마켓으로 자동으로 이동됨
단점:
1. 도메인이 있어야함
2. os와 브라우저에 따른 제약
→ 앱링크는 크롬을 통해 열렸을 때만 앱이 열림(앱이 없으면 마켓으로 이동). 해당 링크가 삼성브라 우저, 카카오톡 자체 인앱브라우저, 인스타그램 자체 인앱브라우저 등으로 열리면 앱이 열리지 않고 웹으로 해당 페이지가 열림
→ 유니버셜링크는 사파리를 통해 열렸을 때만 앱이 열림(앱이 없으면 마켓으로 이동). 해당 링크가 크롬, 카카오톡 자체 인앱브라우저, 인스타그램 자체 인앱브라우저 등으로 열리면 앱이 열리지 않고 웹으로 해당 페이지가 열림

💡 deferred depplink
앱이 설치되지 않았을 때 - 해당 유저가 링크를 클릭한 후 앱을 설치하고 앱을 실행하기까지 기다렸다가 딥링크를 실행해 주는 기술
ex) 앱이 설치 되지 않았을 때 : a식당 링크 클릭 - 마켓 이동 후 앱 설치 - 설치 후 a 식당 페이지로 이동시킴
deferred depplink는 이번에 구현대상이 아니였음. deferred depplink까지 구현하려면 유료 앱링크 서비스를 사용하는것이 좋아보임.

앱링크와 유니버셜링크 생성법

  • android , ios
  • 안드로이드 assetlink json 파일 생성 시 주의점
    [{
      "relation": ["delegate_permission/common.handle_all_urls"],
      "target": {
        "namespace": "android_app",
        "package_name": "com.example.deeplink_cookbook",
        "sha256_cert_fingerprints":
        ["키1",
         "키2",
    	"안드로이드는 배포 버전을 제외하고는 sha256 인증키가 컴퓨터 기기마다 다르니, 여러 사람이 작업 중이라면 각자 컴퓨터에서 인증키를 추출해 등록해야합니다.
         또한 sha256 인증키 속 알파벳은 모두 대문자입니다. 
         여러개의 인증키를 등록할때는 지금처럼 sha256 인증키를 sha256_cert_fingerprints array 안에 ,로 구분하여 넣으면 됩니다."
     ]}}]
  • 안드로이드 assetlinks.json 테스트 방법
이링크에 도메인을 넣었을 때 assetlinks.json의 내용이 잘 나오면 성공이다. 그렇지 않다면 중간에 ****ERRORR**** 표시가 나고 에러의 원인을 알려준다.

https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site= [https://](https://example.com/)당신의도메인&relation=delegate_permission/common.handle_all_urls

앱링크와 유니버셜링크 단점(2번) 해결법

  • 해당 문제점을 해결하려면 결국 앱링크(유니버셜링크)와 url scheme을 같이 사용해야 한다.
  • 해당 앱의 url scheme을 test:// 이라고 해보자.
  • 해당 링크를 웹으로 열었을때 → test:// 으로 리다이렉션 시킨다 → 해당 앱이 없어서 리다이렉션 되지 않으면 ios와 안드로이드 각각 해당 앱의 마켓으로 이동시킨다
    라는 플로우의 js코드를 해당 웹페이지에 넣어줘야한다.
    이 앱의 js를 참고했다.
  • 안드로이드에서 url scheme 지정하기
    //android manifest.xml
    <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="test" />
  • ios에서 url scheme 지정하기
  • 카카오톡에서 링크를 열어보면 url scheme으로 열리는 것을 테스트 할 수 있다.

플러터에서 앱링크(유니버셜링크, url scheme)로 앱 들어왔을 때 캐치하기

링크 공유 시 디자인

앱쪽에서 처리하는것이 아니라 해당 웹페이지 html meta tag에 적절한 값을 넣어주면 된다.

etc) 안드로이드 intent-filter에 앱링크 path, query param 적용하기

https:/example.com/something/sample
<data android:scheme="https" />
<data android:host="example.com" />
<data android:pathPattern="/something/.*" /> 
https://example.com/something/username?username=sample
<data android:scheme="https" />
<data android:host="example.com" />
<data android:pathPrefix="/something/username" /> 
https://example.com/?username=sample
<data android:scheme="https" />
<data android:host="example.com" />
profile
되고싶다

0개의 댓글