이 Codelab에서는 알림 API의 기본 기능을 사용하여 다음을 수행합니다.
- 알림 전송 권한 요청
- 알림 보내기
- 알림 옵션 실험
샘플 앱을 리믹스하여 새 탭에서 보기
삽입된 Glitch 앱의 알림이 자동으로 차단되므로 이 페이지에서 앱을 미리 볼 수 없습니다. 방법은 다음과 같습니다.
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 설정합니다.
- 사이트를 미리 보려면 View App을 누릅니다. 그런 다음 Fullscreen
을 누릅니다.
새 Chrome 탭에서 Glitch가 열립니다.
이 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 표시줄 옆에 있는 자물쇠 아이콘을 클릭하고 사이트의 알림 권한 설정을 기본값으로 재설정하세요.
Request permission to send notifications(알림 전송 권한 요청)를 클릭하고 이번에는 팝업에서 차단을 선택합니다.
알림 보내기를 클릭하고 어떻게 되는지 확인합니다. 오류 텍스트 (
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'
},],
*/
}
자세한 내용은 Peter Beverloo의 알림 생성기를 참고하세요.
문제가 발생한 경우 이 Codelab의 완성된 코드는 다음과 같습니다. glitch.com/edit/#!/codelab-notifications-get-started-completed
더 자세히 알아보려면 이 시리즈의 다음 Codelab인 서비스 워커로 알림 처리를 살펴보세요.