이 Codelab에서는 다음을 위한 Notifications API:
- 알림을 보낼 권한 요청
- 알림 보내기
- 알림 옵션 실험
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
샘플 앱 리믹스 및 새 탭에서 보기
삽입된 Glitch 앱에서 알림이 자동으로 차단되므로 이 페이지에서 앱을 미리 볼 수 없습니다. 대신 다음 단계를 따르세요.
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
새 Chrome 탭에서 Glitch가 열립니다.
이 Codelab을 진행하면서 이 페이지에 삽입된 Glitch의 코드를 변경하세요. 라이브 앱에서 새 탭을 새로고침하여 변경사항을 확인하세요.
시작 앱과 코드 익히기
먼저 새 Chrome 탭에서 라이브 앱을 확인해 보세요.
`Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다. 콘솔 탭을 클릭합니다.
콘솔에 다음 메시지가 표시됩니다.
Notification permission is default
잘 모르겠더라도 걱정하지 마세요. 곧 모두 밝혀질 거야!
라이브 앱에서 알림 전송 권한 요청 및 알림 보내기 버튼을 클릭합니다.
콘솔에서 'TODO'를 출력합니다. 메시지 2개(
requestPermission
및sendNotification
)를 사용합니다. 이 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(알림 전송 권한 요청)를 클릭하고 이번에는 팝업에서 Block(차단)을 선택합니다.
알림 보내기를 클릭하고 결과를 확인합니다. 오류 텍스트 (
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인 서비스 워커로 알림 처리를 살펴보고 자세히 알아봅니다.