앱 도우미 스크립트

업데이트 날짜 27. 12월 2022 작성자 Jan Bunk


웹사이트와 앱 간의 통신을 간소화하는 몇 가지 유용한 도우미 함수가 포함된 JavaScript 스크립트 파일을 만들었어요.

사용법

스크립트 전체 또는 일부를 복사해 직접 호스팅하거나 저희 웹사이트에서 바로 불러올 수 있어요.

앱 도우미 스크립트 보기

<script src="https://app-control-panel.com/static/js/app-helper.js"></script>

스크립트는 축소되어 있지만 난독화되지는 않았으므로, 함수 구현을 살펴보고 싶다면 JavaScript 포매터/뷰티파이어를 사용할 수 있어요.

함수

executeWhenAppReady

페이지가 로드될 때마다 앱은 먼저 로드된 페이지에 JavaScript를 삽입해야 해요. 이는 웹사이트에서 다음과 같은 JavaScript 함수를 호출할 수 있도록 하기 위한 작업이에요. setNotificationTopicSubscriptionStatus. 안타깝게도 이 작업은 즉시 완료되지 않으므로, 페이지가 로드된 직후 앱과 상호작용하는 JavaScript 함수를 너무 빨리 호출하면 해당 함수가 아직 정의되지 않았을 수 있어요.

앱과 상호작용하는 코드를 다음 호출로 감싸면 이 문제를 방지할 수 있어요. executeWhenAppReady.

웹사이트가 브라우저에서 로드되면 executeWhenAppReady 내부의 코드는 실행되지 않아요. 따라서 이 함수를 사용하여 웹사이트가 앱에서 로드되었는지 브라우저에서 로드되었는지 감지할 수도 있어요. 이를 확인하는 다른 방법은 여기에서 설명해요.


<script>
    // setNotificationTopicSubscriptionStatus interacts with the app, so it won't immediately be available after a new page was loaded
    executeWhenAppReady(function () {
        console.log("Website was loaded by the app and the app is ready for interaction");

        // by running inside a executeWhenAppReady call, we avoid potentially calling it while still undefined
        setNotificationTopicSubscriptionStatus(true, "new-games");
    });
        
    // remember to make the function async if you use await inside it!
    // getSubscribedNotificationTopics also interacts with the app and returns a result that needs to be awaited
    executeWhenAppReady(async function () {
        var topics = (await getSubscribedNotificationTopics())["topics"];
    });
</script>

getAppPlatform

이 함수를 사용하면 현재 사용자가 어떤 운영체제에서 앱을 사용하고 있는지 확인할 수 있어요.

이 함수는 executeWhenAppReady 내부에 넣을 필요가 없어요. 현재 사용자가 앱을 사용 중인지 확인하는 데도 사용할 수 있어요(반환된 값이 null이 아닌지 확인하세요). 하지만 이것만으로 앱이 JavaScript 상호작용을 할 준비가 되었다고 보장할 수는 없어요. 앱과 상호작용하는 JavaScript 함수를 호출하려면 여전히 executeWhenAppReady로 감싸야 해요.


<script>
    // possible return values are:
    // "android"
    // "ios"
    // null -> not using app, most likely a regular browser
    var platform = getAppPlatform();
</script>
이 함수는 사용자 에이전트를 확인하는 방식이므로, 앱의 사용자 에이전트를 식별할 수 있도록 설정한 경우에만 작동해요. 앱의 탐색 설정에서 이 옵션을 활성화할 수 있어요. 탐색 설정 열기

isInCustomTab, getCustomTabData, closeCustomTab

이 함수들은 다음 작업에 사용돼요. 커스텀 탭 관리하기.