개발

firebase의 dynamic link를 react-natvie에서 수신

고양이양말 2022. 9. 29. 17:49

push 관련 firebase 는 적용되어 있는 상황

 

https://rnfirebase.io/dynamic-links/usage 참고

 

google firebase의 dynamic link는 https://~~~.page.link/로 하겠다.

1. react native

% npm @react-native-firebase/app
% npm @react-native-firebase/dynamic-links
  • App.js
import dynamicLinks from '@react-native-firebase/dynamic-links';
...
	useEffect(() => {
        // background
        dynamicLinks()
            .getInitialLink()
            .then(link => {
                if(link != null && link.url != null){
                    // link.url에 firebase 동적링크의 딥링크 url이 들어온다
                    ...
                }
        });
        // foreground
        const unsubscribe = dynamicLinks().onLink(link => {
            if (link != null && link.url != null) {
                // link.url에 firebase 동적링크의 딥링크 url이 들어온다
                ...
            }
        });
        // When the component is unmounted, remove the listener
        return () => {
        	unsubscribe();
        };
	},[]);

 

2. Android

  • android/app/src/main/AndroidManifest.xml
<activity
        android:name=".MainActivity"
        ...>
        	...
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="https" android:host="도메인1" />
                <data android:scheme="https" android:host="https://~~~~.page.link" />
            </intent-filter>
        	...

 

 

 

3. IOS

  • ios/앱/AppDelegate.m
#import <Firebase.h>	<- 파일 맨 위에 추가
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];	<- didFinishLaunchingWithOptions 제일 앞에 추가
  ...
  • ios/앱/Info.plist
...
<plist version="1.0">
<dict>
...
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLName</key>
			<string>dynamic page link</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>https</string>
			</array>
		</dict>
	</array>

	<key>FirebaseDynamicLinksCustomDomains</key>
	<array>
		<string>https://~~~.page.link/</string>
	</array>
    ...
  • ios/앱/앱.entitlements
...
<dict>
...
	<key>com.apple.developer.associated-domains</key>
	<array>
		<string>applinks:~~~.page.link</string>
	</array>
    ...

또는 xcode에서는 프로젝트 > targets의 앱 > Signing & Capabilities에서 Build,Simulators 옆의 "+"를 클릭해 Associated Domains 추가 > Domains에 applinks:~~~.page.link 추가

  • 테스트

ios는 android와 다르게 safari로 직접 https://~~~.page.link를 호출하면 안 됨. simulator에는 note가 없으니 캘린더에 일정을 등록해서 테스트 할 수 있다. 

일정의 url이나 메모에 https://~~~.page.link를 저장해놓고 해당 링크를 누르고 있으면 "'작업한앱'에서 열기"가 뜬다. 이를 클릭하여 테스트를 수행한다.

 

 

 

  • 에러잡기(명확하지 않은 install fail이나 build fail 에러가 잘 안잡히면 command창 닫기, build clean, xcode 껐다 켜기 등 기본적으로 다 해보는게 좋다)

. % pod install 실패시 % arch -x86_64 pod install 시도

 

. pod install시 The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies. 에러

=> ios/Podfile

...
target {앱} do
  config = use_native_modules!
  pod 'GoogleUtilities', :modular_headers => true	<- use_native_modules 아래에 추가
  ...

 

. build시 Module 'FirebaseCore' not found 에러(arch -x86_64 pod install을 하면 되돌아가는 것 같음)

=> ios/Pods/FirebaseDynamicLinks/FirebaseCore/Extension/FirebaseCoreInternal.h unlock하여 수정

@import FirebaseCore; 를 #import "FirebaseCore.h" 로 변경

 

. 에러는 없는데 "'작업한앱'에서 열기"가 뜨지 않으면 Associated Domains가 설정이 안 된 것.