Push API는 웹사이트가 열려 있지 않은 경우에도 웹사이트가 서버에서 푸시 알림을 받을 수 있도록 하는 JavaScript API입니다. 푸시 알림은 사용자의 장치로 전송되는 메시지이며 사용자가 웹사이트나 애플리케이션을 적극적으로 사용하지 않는 경우에도 표시될 수 있습니다.
다음은 JavaScript에서 Push API를 사용하는 방법의 예입니다.
// First, check if the browser supports the Push API
if ('PushManager' in window) {
// Request permission to show notifications
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
// Register a service worker to handle push notifications
navigator.serviceWorker.register('service-worker.js').then(() => {
console.log('Service worker registered');
// Get a push subscription from the server
return navigator.serviceWorker.ready.then(serviceWorkerRegistration => {
return serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('your-public-key')
});
});
}).then(subscription => {
console.log('Push subscription successful');
// Send the subscription to the server to store it for later use
fetch('/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
subscription: subscription
})
}).then(() => {
console.log('Subscription sent to server');
}).catch(error => {
console.error('Error sending subscription to server:', error);
});
}).catch(error => {
console.error('Error registering service worker:', error);
});
} else {
console.error('Permission to show notifications denied');
}
});
} else {
console.error('Push notifications not supported');
}
// Convert a base64-encoded string to a Uint8Array
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
이 코드는 다음을 수행합니다.
- 브라우저가 Push API를 지원하는지 확인합니다.
- 알림을 표시하려면 사용자에게 권한을 요청합니다.
- 푸시 알림을 처리할 서비스 워커를 등록합니다.
- 서버에서 푸시 구독을 가져옵니다.
- 나중에 사용할 수 있도록 저장하기 위해 구독을 서버로 보냅니다.
`urlBase64ToUint8Array` 함수는 base64로 인코딩된 문자열을 `pushManager.subscribe` 메서드의 `applicationServerKey` 속성에 필요한 Uint8Array로 변환하는 데 사용됩니다.
구독이 서버에 저장되면 서버는 올바른 장치를 대상으로 하는 구독을 사용하여 사용자의 장치에 푸시 알림을 보낼 수 있습니다.
'IT' 카테고리의 다른 글
| 자바스크립트 "Presentation API" (0) | 2023.03.13 |
|---|---|
| 자바스크립트 "Prioritized Task Scheduling API" (0) | 2023.03.13 |
| 자바스크립트 "Reporting API" (0) | 2023.03.13 |
| 자바스크립트 "Resize Observer API" (0) | 2023.03.13 |
| 자바스크립트 "Screen Capture API" (0) | 2023.03.13 |