친구 초대 미션은 [Client Admin]에서 프로모션 등록 시 설정할 수 있는 게임 미션입니다.
친구 초대 코드를 공유하여 신규 유저를 초대하면 초대한 유저와 초대받은 유저가 모두 리워드를 받을 수 있습니다.
언어별 설정 방법이 다르므로 개발 언어를 먼저 확인해 주세요!
Android
런처 Activity 내 선언된 Javascript Interface 에 sharedInviteLink 케이스를 추가합니다.
해당 코드 실행 시 OS 공유 시트를 노출 시키게 됩니다.
Interface function
Description
sharedInviteLink()
친구 초대 링크 공유 시 호출되는 함수
parameters
inviteCode - 발급된 초대코드
infoMessage - 안내 메세지
link - 초대 링크
// 블리피 Launcher Web <-> App 인터페이스 규격classExampleWebAppInterface(privateval mContext: Context) {...@JavascriptInterfacefunsharedInviteLink(inviteCode: String, infoMessage: String, link: String) {// 초대 미션 공유val msg ="초대코드: $inviteCode\n$infoMessage\n$link"// Android Sharesheet를 통해 텍스트 콘텐츠를 공유합니다.val sendIntent: Intent=Intent().apply { action = Intent.ACTION_SENDputExtra(Intent.EXTRA_TEXT, msg) type ="text/plain" }val shareIntent = Intent.createChooser(sendIntent, null) mContext.startActivity(shareIntent) }...}
iOS
1. 링크 공유 시트 노출을 위한 구조체 생성
친구 초대 데이터를 전달 받고 iOS 앱 안에서 공유 시트를 노출 시키는 구조체를 생성합니다.
공유 시트 노출을 위해 UIViewControllerRepresentable 사용
// ShareSheet.swift
import SwiftUI
import UIKit
// postMessage로 넘어오는 문자열을 JSON 형태로 파싱하기 위해 선언
// inviteCode - 발급된 초대코드
// infoMessage - Client Admin에 입력된 안내 메세지
// link - Client Admin에 입력된 초대 링크
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 형태로 디코딩 과정이 필요합니다.
디코딩된 데이터를 부모 contentView의 onSharedInviteLink 콜백 함수에 전달합니다.
// LauncherWebView.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" {
// 메시지의 body는 JSON.stringify 문자열이라 디코딩 필요
if let jsonString = message.body as? String,
let jsonData = jsonString.data(using: .utf8) {
do {
// JSON 문자열을 ShareSheet 클래스 내 InviteLink 구조체로 디코딩
let inviteData = try JSONDecoder().decode(InviteLink.self, from: jsonData)
// 부모의 onSharedInviteLink 메서드 호출
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 {
...
// javascript에서 전달하는 이벤트 등록
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 콜백 함수가 호출 됩니다.
shareItems state 값에 공유할 내용을 설정합니다.
isShowingShareSheet state 값 변경을 통해 ShareSheet 노출 여부를 결정합니다.
// LauncherContentView.swift
import SwiftUI
import WebKit
struct LauncherContentView: View {
...
// ShareSheet를 표시할 때 사용할 상태 변수
@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)"]
// ShareSheet를 표시하도록 상태를 변경
isShowingShareSheet = true
},
)
.navigationBarBackButtonHidden(true)
// ShareSheet를 표시하는 시트 추가
.sheet(isPresented: $isShowingShareSheet) {
ShareSheet(items: shareItems)
}
}
...
}
Flutter
🤝 OS 공유 시트 사용 시
1. 링크 공유 패키지 설치
아래 패키지를 설치하면 링크 공유 기능을 수행할 수 있습니다.
사용 패키지: share_plus
해당 패키지는 플랫폼의 공유 대화상자를 통해 콘텐츠 공유를 가능하게 합니다.
flutter pub add share_plus
2. javascript handler 추가
런처를 사용하는 Screen 내 Javascript Handler 에 sharedInviteLink 타입을 추가합니다. handlerName 값은 BlpLauncher로 설정해야 합니다.
Type
Description
sharedInviteLink
친구 초대 링크 공유 시 호출
inviteCode - 발급된 초대코드
infoMessage - 안내 메세지
link - 초대 링크
// lib/screens/bleepy_screen.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;
}
});
}
)
