퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 자바스크립트 APIs
  4. 로컬알림[Local notifications]

로컬알림[Local notifications]

FuseJS/LocalNotifications 모듈 (JS)

로컬에서 생성된 알림을 작성, 예약, 대응합니다.

앱이 포그라운드에서 실행되지 않는 경우에도 앱의 이벤트에 대해 사용자에게 경고해야 하는 경우가 있습니다. 이를 위해 대부분의 모바일 장치에는 알림(Notifications)이라는 개념이 있습니다. 이 문서에는 앱 자체에서 예약한 알림인 ‘로컬 알림’이 포함되어 있습니다. ‘푸시 알림’은 다른 곳의 서버에서 보낸 알림이며 여기에서 다룹니다.

OS 기능에 대한 많은 바인딩과 마찬가지로 가벼운 API로 시작하여 구축하는 것이 좋습니다. 우리는 의견 및 요청에 매우 관심이 많으므로 포럼에 들려서 알려주십시오.

설정하기

.unoproj 파일에 다음을 추가하여 퓨즈 로컬 알림 라이브러리를 포함시킵니다.

1
2
3
4
5
"Packages": [
    ...
    "Fuse.LocalNotifications",
    ...
],

이거 하나면 충분합니다. 이제 살펴 보겠습니다.

앱 예제

로컬 알림을 사용하는 완전한 퓨즈 앱입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<App>
    <JavaScript>
        var LocalNotify = require("FuseJS/LocalNotifications");

        LocalNotify.on("receivedMessage", function(payload) {
            console.log("Received Local Notification: " + payload);
            LocalNotify.clearAllNotifications();
        });

        function sendLater() {
            LocalNotify.later(4, "Finally!", "4 seconds is a long time", "hmm?", true);
        }

        function sendNow() {
            LocalNotify.now("Boom!", "Just like that", "payload", true);
        }

        module.exports = {
            sendNow: sendNow,
            sendLater: sendLater
        };
    </JavaScript>
    <DockPanel>
        <TopFrameBackground DockPanel.Dock="Top" />
        <ScrollView>
            <StackPanel>
                <Button Clicked="{sendNow}" Text="Send notification now" Height="60"/>
                <Button Clicked="{sendLater}" Text="Send notification in 4 seconds" Height="60"/>
            </StackPanel>
        </ScrollView>
        <BottomBarBackground DockPanel.Dock="Bottom" />
    </DockPanel>
</App>

여기서 일어나고 있는 일을 깊게 살펴봅시다.

작동 방식

DockPanel 내부의 module.exports 내용 등은 건너 뜁니다. 다른 가이드에서 더 잘 설명되어 있으니까요. 대신 JS 부분을 살펴보겠습니다.

모듈을 정상적으로 가져온(require) 후에, 4초 동안의 알림을 전달할 함수를 설정합니다.

1
2
3
function sendLater() {
    LocalNotify.later(4, "Finally!", "4 seconds is a long time", "hmm?", true);
}

later 함수는 다음 매개 변수를 사용합니다:

  • secondsFromNow: 알림이 시작될 때까지의 시간 (초)
  • title: 디바이스의 알림 표시줄에 알림이 표시될 때 제목이 될 문자열입니다.
  • body: 알림 표시줄에 표시될 때 알림 본문이 될 문자열입니다.
  • payload: 알림 자체에는 표시되지 않지만 콜백에는 표시되는 문자열입니다.
  • sound: 알림 표시줄에 디바이스가 알림을 표시할 때 기본 알림 소리를 내야하는지 여부입니다. (bool)
  • badgeNumber: iOS에서만 사용되는 선택적 매개 변수로 앱 아이콘에 배지 번호를 표시합니다. 이것은 종종 사용자의 주의가 필요한 ‘어떤 것[things]’의 양을 보여주기 위해 사용됩니다. 예를 들어 이메일 앱은 읽지 않은 이메일 수를 표시할 수 있습니다.
1
2
3
function sendNow() {
    LocalNotify.now("Boom!", "Just like that", "payload", true);
}

now 함수는 secondFromNow 매개 변수를 가지고 있지 않다는 점을 제외하면 later 함수와 거의 동일합니다.

두 함수 모두 앱이 열려 있는 경우 사용자에게 알림을 전달하지 않습니다. 대신 receivedMessage 이벤트를 자동으로 트리거합니다.

마지막으로, 알림을 받을 때마다 호출될 함수를 설정합니다.

1
2
3
4
5
LocalNotify.on("receivedMessage", function(payload) {
    console.log("Received Local Notification: " + payload);
    LocalNotify.clearAllNotifications();
    LocalNotify.clearBadgeNumber();
});

이 함수는 앱이 열려있는 동안 또는 사용자가 선택한 알림에서 앱이 시작된 후 알림이 전달될 때마다 호출됩니다.

payload는 다음 키가 포함된 JSON 형식의 문자열입니다:

  • ‘title’: 문자열로 된 알림 제목
  • ‘body’: 문자열의 알림 본문
  • ‘payload’: 알림과 함께 전송된 문자열 데이터입니다.

clearAllNotifications()는 이미 전달된 앱의 모든 알림을 지웁니다. 버튼 등을 클릭했을 때 유사한 알림을 제거하는 데 사용할 수 있습니다.

마지막으로, clearBadgeNumber()는 홈 화면의 앱 아이콘 옆에 표시된 작은 숫자를 지우고 앱이 가진 알림의 갯수를 보여줍니다.

라이프사이클 비헤이비어(Lifecyle Behavior)

OS가 알림을 처리하는 방법은 앱의 상태에 따라 다릅니다. 앱이 Interactive 상태인 경우 알림이 표시되지 않고 대신 실행중인 앱에 바로 전달됩니다. Interactive가 아닌 경우 OS는 사용자가 나중에 제공한 매개 변수 또는 사용자가 제공하지 않은 기능을 기반으로 알림을 작성합니다. Interactive는 앱이 포그라운드에 있음을 의미할 뿐만 아니라 다른 창에 의해 가려지지 않는다는 것을 의미합니다. Interactive가 아닌 포그라운드에 있는 한 가지 예는 상태 표시줄을 스와이프하여 ‘Notification Center/Drawer’를 열었을 때입니다.

위의 예제 앱을 사용하여 이 작업을 시도할 수 있습니다. 4초 후에 알림 보내기 버튼을 클릭하고 ‘Notification Center/Drawer’를 열어보세요.

비고

이 모듈은 EventEmitter이므로 EventEmitter의 메서드를 사용하여 이벤트를 수신할 수 있습니다.

이 기능을 사용하려면 프로젝트 파일에서 “Fuse.LocalNotifications”에 대한 참조를 추가해야 합니다.

LocalNotify의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/localnotifications/localnotify#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?