블리피 런처를 사용하는 Activity에 선언된 Javascript Interface 내 sharedInviteLink 케이스를 추가합니다.
Interface function | Description |
|---|
sharedInviteLink(inviteCode: String, infoMessage: String, link: String) | 친구 초대 링크 공유 시 호출되는 함수
- inviteCode - 발급된 초대코드
- infoMessage - Client Admin에 입력된 안내 메세지
- link - Client Admin에 입력된 초대 링크
|
kotlin
class ExampleWebAppInterface(private val mContext: Context) {
...
@JavascriptInterface
fun sharedInviteLink(inviteCode: String, infoMessage: String, link: String) {
val msg = "$infoMessage\n초대코드: $inviteCode\n\n$link"
val sendIntent: Intent = Intent().apply {
action = Intent.ACTION_SEND
putExtra(Intent.EXTRA_TEXT, msg)
type = "text/plain"
}
val shareIntent = Intent.createChooser(sendIntent, null)
mContext.startActivity(shareIntent)
}
...
}
친구를 초대하기 위해서 클라이언트는 초대 링크 공유 기능이 필요합니다.
1. 링크 공유 시트 노출을 위한 구조체 생성
친구 초대 데이터를 전달 받고 IOS 앱 안에서 공유 시트를 노출 시키는 구조체를 하나 생성합니다.
swift
import SwiftUI
import UIKit
struct InviteLink: Codable {
var inviteCode: String
var infoMessage: String
var link: String
}
struct ShareSheet: UIViewControllerRepresentable {
var items: [Any]
func makeUIViewController(context: Context) -> UIActivityViewController {
let controller = UIActivityViewController(activityItems: items, applicationActivities: nil)
return controller
}
func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {
}
}
2. WebView 구조체에서 Script Message 핸들링 추가
WKWebView 의 userContentController 에서 친구 초대 링크 공유 관련 이벤트 처리 로직을 추가합니다.
postMessage를 통해 JSON.stringify 형태의 문자열로 전달 받기에 JSON string에 대한 디코딩이 필요합니다.
디코딩된 데이터를 부모 contentView의 onSharedInviteLink 콜백 함수에 전달합니다.
swift
import WebKit
import SwiftUI
struct LauncherWebView: UIViewRepresentable {
...
let onSharedInviteLink: (String, String, String) -> Void
class Coordinator: NSObject, WKNavigationDelegate, WKScriptMessageHandler {
...
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name == "sharedInviteLink" {
if let jsonString = message.body as? String,
let jsonData = jsonString.data(using: .utf8) {
do {
let inviteData = try JSONDecoder().decode(InviteLink.self, from: jsonData)
parent.onSharedInviteLink(inviteData.inviteCode, inviteData.infoMessage, inviteData.link)
} catch {
print("Failed to decode JSON: (error.localizedDescription)")
}
} else {
print("Failed to convert message body to String or Data")
}
}
}
...
}
...
func makeUIView(context: Context) -> WKWebView {
...
contentController.add(context.coordinator, name: "sharedInviteLink")
...
}
...
static func dismantleUIView(_ uiView: WKWebView, coordinator: Self.Coordinator) {
uiView.configuration.userContentController.removeScriptMessageHandler(forName: "sharedInviteLink")
}
}
3. WebView가 포함된 ContentView 내에서 ShareSheet 클래스 호출
WebView 내에서 친구 초대 링크 공유에 대한 이벤트가 발생하면 해당 ContentView에 선언된 onSharedInviteLink 콜백 함수가 호출 됩니다.
swift
import SwiftUI
import WebKit
struct LauncherContentView: View {
...
@State private var isShowingShareSheet = false
@State private var shareItems: [Any] = []
var body: some View {
LauncherWebView(
url: URL(string: "런처 URL"),
onSharedInviteLink: { inviteCode, infoMessage, link in
shareItems = ["\(infoMessage)\n\n초대코드 : \(inviteCode)\n\n\(link)"]
isShowingShareSheet = true
},
)
.navigationBarBackButtonHidden(true)
.sheet(isPresented: $isShowingShareSheet) {
ShareSheet(items: shareItems)
}
}
...
}
1. 링크 공유를 위한 패키지 설치
Flutter에서는 아래 패키지를 설치하여 해당 기능을 수행하도록 가이드 합니다.
사용 패키지: share_plus
- 플랫폼의 공유 대화상자를 통해 콘텐츠 공유를 가능하게 합니다.
shell
flutter pub add share_plus
2. Javascript Handler 추가
블리피 런처를 사용하는 Screen에 선언된 Javascript Handler 에 sharedInviteLink 타입을 추가합니다.
handlerName | Type | Description |
|---|
BlpLauncher | sharedInviteLink | 친구 초대 링크 공유 시 호출되는 함수
- inviteCode - 발급된 초대코드
- infoMessage - Client Admin에 입력된 안내 메세지
- link - Client Admin에 입력된 초대 링크
|
dart
InAppWebView(
key: webViewKey,
initialUrlRequest:
URLRequest(url: WebUri(widget.launcherUrl)),
initialSettings: options,
onWebViewCreated: (controller) {
webViewController = controller;
controller.addJavaScriptHandler(handlerName: 'BlpLauncher', callback: (message) {
final data = jsonDecode(message[0]);
final key = data['type'];
switch (key) {
...
case "sharedInviteLink":
sharedInviteLink(data["inviteCode"], data["infoMessage"], data["link"]);
break;
default:
break;
}
});
}
)
3. sharedInviteLink(inviteCode, infoMessage, link)
share_plus 패키지를 통해서 친구 초대 링크를 공유하는 기능을 수행합니다.
dart
import 'package:share_plus/share_plus.dart';
void sharedInviteLink(String infoMessage, String inviteCode, String link) async {
try {
const msg = "$infoMessage\n초대코드 : $inviteCode\n\n$link"
await Share.share(msg);
} catch (error: any) {
}
}
React Native는 기본 제공되는 Share API 를 통해서 친구 초대 링크를 공유하는 기능을 수행합니다.
블리피 런처를 사용하는 Screen에 선언된 WebView 의 onMessage 함수에 케이스를 추가합니다.
Type | Description |
|---|
sharedInviteLink | 친구 초대 링크 공유 시 호출되는 함수
- inviteCode - 발급된 초대코드
- infoMessage - Client Admin에 입력된 안내 메세지
- link - Client Admin에 입력된 초대 링크
|
typescript
import {WebView, WebViewMessageEvent} from 'react-native-webview';
export default function Launcher() {
const onMessage = (e: WebViewMessageEvent) => {
const {type, inviteCode, infoMessage, link}
= JSON.parse(e.nativeEvent.data);
switch (type) {
...
case 'sharedInviteLink':
sharedInviteLink(inviteCode, infoMessage, link);
break;
}
};
return (
<View>
<WebView
...
onMessage={onMessage}
...
/>
</View>
);
}
}
sharedInviteLink(inviteCode, infoMessage, link)
Share API 를 통해서 친구 초대 링크를 공유하는 기능을 수행합니다.
typescript
import { Share } from 'react-native';
const sharedInviteLink = async (inviteCode: string, infoMessage: string, link: string) => {
try {
const msg = '{infoMessage}\n초대코드 : {inviteCode}\n\n{link}'
await Share.share({
message: msg,
});
} catch (error: any) {
}
};
