블루베리 템플릿 딥링크

딥링크가 무엇? (다이나믹링크의 여의치 않은 상황. 공식문서에서 추천하는 url이용방식)

https://help.dfinery.io/hc/ko/articles/360039757433-%EB%94%A5%EB%A7%81%ED%81%AC-Deeplink-URI%EC%8A%A4%ED%82%B4-%EC%9C%A0%EB%8B%88%EB%B2%84%EC%85%9C-%EB%A7%81%ED%81%AC-%EC%95%B1%EB%A7%81%ED%81%AC-%EA%B5%AC%EB%B6%84%EA%B3%BC-%EC%9D%B4%ED%95%B4

 

딥링크는 3가지 방식으로 구분됨.

• URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용
• 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용
• 유니버셜 링크 (Universal Link) : iOS 제공  - 도메인 주소를 이용한 딥링크 사용

URL 스킴 -> 유니크한 도메인 없이 앱이 설치되어있다는 전제하에 간단하게 연결 설정하기.

 

우리가 서비스에 필요한것은

(폰에서)링크클릭 -> [ 앱 설치안되어있으면 웹페이지로 / 되어있으면 앱으로  연결 ] OR [ 앱 설치안되어있으면 스토어로.(지연된 딥링크 방식) ] OR [ 설치 안되어있으면 웹으로 가고 거기서 스토어로 연결가능한 버튼 처리 ] 정도로 3가지 예상함.

 

(웹상에서)링크클릭 -> 웹페이지로 연결

 

서비스에 의도대로 하기 위해서는 앱이 설치되어있지 않은 상태도 고려해야한다 URL scheme은 불가. 도메인 필요.     

-> Firebase Hosting 이용!

 

=========

1. 앱링크 (for Android)

참고.

https://baladnes.medium.com/deeplinking-in-flutter-apps-no-firebase-dynamic-links-9fa4ceffed3b

ㄴ https://youtu.be/sj42EFSM3wc?si=QOP170OTxOdhtJMk

 

따로 웹서버를 두지 않았기에

플러터프로젝트/public/.well-known/  <= 폴더를 만들고
assetlinks.json 파일을 만든다.

 

내용 

[
{
"relation": [
"delegate_permission/common.handle_all_urls"
],
"target": {
"namespace": "android_app",
"package_name": "<app_package_name>",
"sha256_cert_fingerprints": [
"<sha256_fingerprint>"
]
}
}
]

여기에서  <> 로 감싸진 부분을 갈아끼우면 된다.

 

sha부분은 프로젝트/android/ 여기서  ./gradlew signingReport 커맨드 입력후 릴리즈 쪽의 키를 복붙.

 

$cd ..

 

이제 호스팅.

$firebase init hosting

$firebase deploy

 

그후

AndroidManifest.xml의 active 태그 안에

<!-- App Links -->
<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" />
<!-- Accepts URIs that begin with https://YOUR_HOST -->
<data
android:scheme="https"
android:host="[YOUR_HOST]"
android:pathPrefix="/[NAME][/NAME...]" />
</intent-filter>

[] 부분은 맞춰서 하면 됨. 

여기서 host는 호스팅한 도매인 주소. (https:// 이후의 것들)

android:pathPrefix="/[NAME][/NAME...]" />

는 생략가능

 

 

 

============

2. 유니버셜 링크 (for IOS)

참고.

https://docs.flutter.dev/cookbook/navigation/set-up-universal-links

1. 먼저 xcode 열고 info에서

  1)ctrl+왼쪽마우스 -> Raw Keys and Values

 

  2)ctrl+왼쪽마우스 -> Add Row ->

• Change the Key to FlutterDeepLinkingEnabled
• Change the Type to Boolean
• Change the Value to YES.

 

2. ios/Runner/Runner.entitlements 열고 파일 수정

<dict>안에

<key>com.apple.developer.associated-domains</key> <array> <string>applinks:example.com</string> </array> 추가!

example.com은 패키지명으로 변경.

 

3. 프로젝트/public/.well-known/   안에

apple-app-site-association 파일 생성 (확장자 없이 이대로 생성)

후에 

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appIDs": [
          "<teamId>.<bundleId>"
        ],
        "paths": [
          "*"
        ],
        "components": [
          {
            "/": "/*"
          }
        ]
      }
    ]
  },
  "webcredentials": {
    "apps": [
      "<teamId>.<bundleId>"
    ]
  }
}

입력. 

<teamId>랑 <bundleId>는 프로젝트에 맞춰서 변경. (teamId 필요)

 

그후 firebase deploy.   

 

 

============

3. 웹 접근.

프로젝트/firebase.json에서

"hosting" 안쪽에 

"rewrites": [

{

"source": "/mbti",

"destination": "/mbti/index.html"

},

{

"source": "**",

"destination": "/index.html"

}

]

이렇게 추가함으로써 원하는 페이지로 리디렉션 가능! 

 

 

============================================================================================

 

동작확인.

1. AOS

디바이스에서 (메모장이나 인터넷검색창)
https://blueberrytemplate-2024-summer.web.app/mbti

(여기서 도메인은 blueberrytemplate-2024-summer.web.app/  이고 /mbti 자리에는 고라우터에 path로 명명된것을 넣으면 된다.

Welcome to Firebase Hosting

라고 치게 되면, 앱설치시에는 mbti페이지로. 아니라면 웹으로 가게된다.(현재로서는 웹 페이지 라우팅이 안되어있어서  404not found가 뜰것이다.) => 추후 앱설치 안될때 바로 스토어로 갈지 웹페이지로 갈지 정해야 할것이다.

 

2. IOS

1번과 같다. 다만 현재 teamID의 설정을 스킵한 상황이기에 동작확인 불가능한 상태이다.

3. WEB

앱 설치가 안되어있다면 자동으로 웹으로 가게 될것이다.

프로젝트 내에서 firebase.json에서 rewrites를 통해 원하는 페이지를 연결 할 수 있다.