이 Codelab에서는 Notifications API의 기본 기능을 사용하여 다음 작업을 실행합니다.
- 알림 전송 권한 요청
- 알림 보내기
- 알림 옵션 실험
샘플 앱을 리믹스하고 새 탭에서 보기
삽입된 Glitch 앱에서는 알림이 자동으로 차단되므로 이 페이지에서 앱을 미리 볼 수 없습니다. 대신 다음 단계를 따르세요.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
Glitch가 새 Chrome 탭에서 열립니다.
이 Codelab을 진행하면서 이 페이지에 삽입된 Glitch의 코드를 변경합니다. 실시간 앱이 있는 새 탭을 새로고침하여 변경사항을 확인합니다.
시작 앱 및 코드 숙지
먼저 새 Chrome 탭에서 실시간 앱을 확인해 보세요.
`Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다. 콘솔 탭을 클릭합니다.
콘솔에 다음 메시지가 표시됩니다.
Notification permission is default
그 의미를 모르겠다면 걱정하지 마세요. 곧 모든 것이 공개됩니다.
실시간 앱에서 알림 보내기 권한 요청 및 알림 보내기 버튼을 클릭합니다.
콘솔은
requestPermission
및sendNotification
라는 두 개의 함수 스텁에서 'TODO' 메시지를 출력합니다. 다음은 이 Codelab에서 구현할 함수입니다.
이제 이 페이지에 삽입된 Glitch에서 샘플 앱의 코드를 살펴보겠습니다.
public/index.js
를 열고 기존 코드의 몇 가지 중요한 부분을 살펴봅니다.
showPermission
함수는 Notifications API를 사용하여 사이트의 현재 권한 상태를 가져와 콘솔에 로깅합니다.// Print current permission state to console;
// update onscreen message.
function showPermission() {
let permission = Notification.permission;
console.log('Notification permission is ' + permission);
let p = document.getElementById('permission');
p.textContent = 'Notification permission is ' + permission;
}권한을 요청하기 전에 권한 상태는
default
입니다.default
권한 상태에서는 사이트가 알림을 보내기 전에 권한을 요청하고 부여받아야 합니다.requestPermission
함수는 스텁입니다.// Use the Notification API to request permission to send notifications.
function requestPermission() {
console.log('TODO: Implement requestPermission()');
}다음 단계에서 이 함수를 구현합니다.
sendNotification
함수는 스텁입니다.// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
console.log('TODO: Implement sendNotification()');
}requestPermission
를 구현한 후에 이 함수를 구현합니다.window.onload
이벤트 리스너는 페이지 로드 시showPermission
함수를 호출하여 콘솔과 페이지에 현재 권한 상태를 표시합니다.window.onload = () => { showPermission(); };
알림 전송 권한 요청
이 단계에서는 알림을 보내는 사용자의 권한을 요청하는 기능을 추가합니다.
Notification.requestPermission()
메서드를 사용하여 사용자에게 사이트의 알림을 허용하거나 차단하도록 요청하는 팝업을 트리거합니다.
public/index.js의
requestPermission
함수 스텁을 다음 코드로 바꿉니다.// Use the Notification API to request permission to send notifications.
function requestPermission() {
Notification.requestPermission()
.then((permission) => {
console.log('Promise resolved: ' + permission);
showPermission();
})
.catch((error) => {
console.log('Promise was rejected');
console.log(error);
});
}실시간 앱을 보고 있는 Chrome 탭을 새로고침합니다.
실시간 앱 인터페이스에서 알림 전송 권한 요청을 클릭합니다. 팝업이 표시됩니다.
사용자는 권한 팝업에 대해 다음 세 가지 응답 중 하나를 할 수 있습니다.
사용자 응답 | 알림 권한 상태 |
---|---|
사용자가 허용을 선택합니다. | granted |
사용자가 차단을 선택합니다. | denied |
사용자가 선택하지 않고 팝업을 닫음 | default |
사용자가 허용을 클릭하는 경우:
Notification.permission
이granted
로 설정되어 있습니다.사이트에서 알림을 표시할 수 있습니다.
이후
Notification.requestPermission
호출은 팝업 없이granted
로 확인됩니다.
사용자가 '차단'을 클릭하는 경우:
Notification.permission
이denied
로 설정되어 있습니다.사이트에서 사용자에게 알림을 표시할 수 없습니다.
이후
Notification.requestPermission
호출은 팝업 없이denied
로 확인됩니다.
사용자가 팝업을 닫는 경우:
Notification.permission
는default
로 남아 있습니다.사이트에서 사용자에게 알림을 표시할 수 없습니다.
이후
Notification.requestPermission
를 호출하면 더 많은 팝업이 표시됩니다.그러나 사용자가 팝업을 계속 닫으면 브라우저에서 사이트를 차단하여
Notification.permission
를denied
로 설정할 수 있습니다. 그러면 사용자에게 권한 요청 팝업이나 알림을 표시할 수 없습니다.이 글을 작성하는 시점에서는 닫힌 알림 권한 팝업에 대한 브라우저 동작이 아직 변경될 수 있습니다. 이를 처리하는 가장 좋은 방법은 사용자가 시작한 상호작용에 항상 응답하여 알림 권한을 요청하여 사용자가 알림을 예상하고 어떤 일이 일어나고 있는지 알 수 있도록 하는 것입니다.
알림 전송
이 단계에서는 사용자에게 알림을 전송합니다.
Notification
생성자를 사용하여 새 알림을 만들고 표시해 보겠습니다.
권한 상태가 granted
이면 알림이 표시됩니다.
index.js의
sendNotification
함수 스텁을 다음 코드로 바꿉니다.// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
}Notification
생성자는 두 매개변수title
와options
를 사용합니다.options
는 알림에 포함할 수 있는 시각적 설정 및 데이터를 나타내는 속성이 있는 객체입니다. 자세한 내용은 알림 매개변수에 관한 MDN 문서를 참고하세요.실시간 앱을 보고 있는 Chrome 탭을 새로고침하고 알림 보내기 버튼을 클릭합니다.
Test body
텍스트가 포함된 알림이 표시됩니다.
권한 없이 알림을 보내면 어떻게 되나요?
이 단계에서는 사용자의 허가 없이 알림을 표시하려고 할 때 어떤 일이 발생하는지 확인할 수 있는 코드 몇 줄을 추가합니다.
public/index.js
의sendNotification
함수 끝에서 새 알림의onerror
이벤트 핸들러를 정의합니다.
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
알림 권한 오류를 확인하려면 다음 단계를 따르세요.
Chrome URL 표시줄 옆에 있는 자물쇠 아이콘을 클릭하고 사이트의 알림 권한 설정을 기본값으로 재설정합니다.
알림 보내기 권한 요청을 클릭하고 이번에는 팝업에서 차단을 선택합니다.
알림 보내기를 클릭하고 결과를 확인합니다. 오류 텍스트 (
Could not send notification
) 및 이벤트 객체가 콘솔에 로깅됩니다.
원하는 경우 사이트의 알림 권한을 다시 재설정합니다. 권한을 요청하고 팝업을 여러 번 닫아 어떤 일이 일어나는지 확인해 볼 수 있습니다.
알림 옵션 실험
이제 권한을 요청하고 알림을 보내는 방법에 관한 기본사항을 알아봤습니다. 또한 사용자 응답이 앱의 알림 표시 기능에 어떤 영향을 미치는지 확인했습니다.
이제 알림을 만들 때 사용할 수 있는 다양한 시각적 및 데이터 옵션을 실험해 볼 수 있습니다. 사용 가능한 옵션의 전체 목록은 다음과 같습니다. 이러한 옵션에 관한 자세한 내용은 MDN의 알림 문서를 참고하세요.
브라우저와 기기는 이러한 옵션을 다르게 구현하므로 여러 플랫폼에서 알림이 어떻게 표시되는지 테스트해 보는 것이 좋습니다.
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
피터 비버루의 알림 생성기에서 더 많은 아이디어를 얻어 보세요.
문제가 발생한 경우 이 Codelab의 완성된 코드를 참고하세요. glitch.com/edit/#!/codelab-notifications-get-started-completed
이 시리즈의 다음 Codelab인 서비스 워커로 알림 처리를 살펴보면서 자세히 알아보세요.