°³¿ä
Ǫ½Ã ¸Þ½ÃÁö´Â »ç¿ëÀÚ°¡ ´Ù½Ã Âü¿©Çϵµ·Ï À¯µµÇÏ´Â °£´ÜÇϸ鼵µ È¿°úÀûÀÎ ¹æ¹ýÀÔ´Ï´Ù. ÀÌ Äڵ左¿¡¼´Â ÀÚ½ÅÀÇ °³¹ßÇÑ À¥ ¾Û¿¡ Ǫ½Ã ¾Ë¸²À» Ãß°¡ÇÏ´Â ¹æ¹ýÀ» ¹è¿öº¸°Ú½À´Ï´Ù.
¹è¿ï ³»¿ë
- Ǫ½Ã ¸Þ½ÃÁö¿¡ ´ëÇÑ »ç¿ëÀÚ ±¸µ¶ ¹× ±¸µ¶ Ãë¼Ò ¹æ¹ý
- ¼ö½Å Ǫ½Ã ¸Þ½ÃÁö ó¸® ¹æ¹ý
- ¾Ë¸² Ç¥½Ã ¹æ¹ý
- ¾Ë¸² Ŭ¸¯¿¡ ´ëÇÑ ÀÀ´ä ¹æ¹ý
ÇÊ¿äÇÑ »çÇ×
- Chrome 52 ÀÌ»ó
- Web Server for Chrome ¶Ç´Â ÀÚ½ÅÀÌ Á÷Á¢ ¼±ÅÃÇÑ À¥ ¼¹ö
- ÅؽºÆ® ÆíÁý±â
- HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ® ¹× Chrome DevTools¿¡ ´ëÇÑ ±âº»ÀûÀÎ Áö½Ä
- »ùÇà ÄÚµå(¼³Ä¡Çϱâ ÂüÁ¶)
¼³Ä¡Çϱâ
»ùÇà ÄÚµå ´Ù¿î·Îµå
´ÙÀ½ ¸µÅ©¿¡¼ zip ÆÄÀÏÀ» ´Ù¿î·ÎµåÇÏ¿© ÀÌ Äڵ忡 ´ëÇÑ »ùÇà Äڵ带 ¾òÀ» ¼ö ÀÖ½À´Ï´Ù.
¶Ç´Â ´ÙÀ½ git ÀúÀå¼Ò¸¦ º¹Á¦Çصµ µË´Ï´Ù.
git clone https://github.com/GoogleChrome/push-notifications.git
¼Ò½º¸¦ zipÀ¸·Î ´Ù¿î·ÎµåÇÑ °æ¿ì zip ÆÄÀÏÀ» Ç®¸é ·çÆ® Æú´õ°¡ push-notifications-master
·Î ¾ÐÃà ÇØÁ¦µÇ¾î¾ß ÇÕ´Ï´Ù.
À¥ ¼¹ö ¼³Ä¡ ¹× ÀÎÁõ
ÀÚü À¥ ¼¹ö¸¦ »ç¿ëÇصµ µÇÁö¸¸ ÀÌ Äڵ左Àº Chrome Web Server¿¡¼ Àß µ¹¾Æ°¡µµ·Ï °í¾ÈµÇ¾î ÀÖ½À´Ï´Ù. ÀÌ ¾ÛÀ» ¾ÆÁ÷ ¼³Ä¡ÇÏÁö ¾ÊÀ¸¼Ì´Ù¸é Chrome À¥ ½ºÅä¾î¿¡¼ ¼³Ä¡ÇÒ ¼ö ÀÖ½À´Ï´Ù.
Web Server for Chrome ¾ÛÀ» ¼³Ä¡ÇÑ ÈÄ ºÏ¸¶Å©¹Ù¿¡¼ Apps ´ÜÃàÅ°¸¦ Ŭ¸¯Çϼ¼¿ä.
È®ÀÎÇϴ â¿¡¼ Web Server ¾ÆÀÌÄÜÀ» Ŭ¸¯Çϼ¼¿ä.
±×·¯¸é ¾Æ·¡ ´ëÈ»óÀÚ°¡ ³ªÅ¸³ª´Âµ¥, ¿©±â¼ ·ÎÄà À¥ ¼¹ö¸¦ ±¸¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù.
choose folder ¹öÆ°À» Ŭ¸¯ÇÏ°í ¾Û Æú´õ¸¦ ¼±ÅÃÇϼ¼¿ä. ±×·¯¸é À¥ ¼¹ö ´ëÈ»óÀÚ¿¡ °Á¶Ç¥½ÃµÈ URLÀ» ÅëÇØ(Web Server URL(s) ¼½¼Ç) ÁøÇà ÁßÀÎ ÀÛ¾÷À» Á¦°øÇÒ ¼ö ÀÖ½À´Ï´Ù.
¾Æ·¡ ±×¸²°ú °°ÀÌ, Options ¾Æ·¡¿¡¼ 'Automatically show index.html' ¿·¿¡ ÀÖ´Â È®ÀζõÀ» ¼±ÅÃÇϼ¼¿ä.
±×·± ´ÙÀ½, 'Web Server: STARTED'¶ó´Â ·¹À̺í·Î Ç¥½ÃµÈ Àüȯ ¹öÆ°À» ¿ÞÂÊÀ¸·Î ¹Ð¾ú´Ù°¡ ´Ù½Ã ¿À¸¥ÂÊÀ¸·Î ¹Ð¾î ¼¹ö¸¦ ÁßÁöÇß´Ù°¡ ´Ù½Ã ½ÃÀÛÇϼ¼¿ä.
ÀÌÁ¦´Â À¥ºê¶ó¿ìÀú¿¡¼ »çÀÌÆ®¸¦ ¹æ¹®Çϼ¼¿ä(°Á¶Ç¥½ÃµÈ Web Server URLÀ» Ŭ¸¯ÇÔ). ±×·¯¸é ´ÙÀ½°ú °°Àº ÆäÀÌÁö°¡ ³ªÅ¸³¯ °ÍÀÔ´Ï´Ù.
¼ºñ½º ¿öÄ¿´Â Ç×»ó ¾÷µ¥ÀÌÆ®ÇÒ °Í
°³¹ß Áß¿¡ ¼ºñ½º ¿öÄ¿°¡ Ç×»ó ÃֽŠ¹öÀüÀÌ°í ÃֽŠº¯°æ »çÇ×ÀÌ Àû¿ëµÈ »óÅÂÀÎÁö È®ÀÎÇÏ´Â °ÍÀÌ À¯¿ëÇÕ´Ï´Ù.
Chrome¿¡¼ À̸¦ ¼³Á¤ÇÏ·Á¸é DevTools(¸¶¿ì½º ¿À¸¥ÂÊ ¹öÆ° Ŭ¸¯ > Inspect)¸¦ ¿°í ApplicationÆгηΠÀ̵¿ÇÏ°í Service Workers ÅÇÀ» Ŭ¸¯ÇÑ ÈÄ Update on Reload È®ÀζõÀ» ¼±ÅÃÇϼ¼¿ä. ÀÌ È®ÀζõÀ» ¼±ÅÃÇϸé ÆäÀÌÁö¸¦ »õ·Î °íÄ¥ ¶§¸¶´Ù ¼ºñ½º ¿öÄ¿°¡ °Á¦·Î ¾÷µ¥ÀÌÆ®µË´Ï´Ù.
¼ºñ½º ¿öÄ¿ µî·Ï
app
µð·ºÅ丮¿¡´Â sw.js
·Î ¸í¸íµÈ ºó ÆÄÀÏÀÌ ÀÖ½À´Ï´Ù. ÀÌ ÆÄÀÏÀÌ ÀÚ½ÅÀÇ ¼ºñ½º ¿öÄ¿À̸ç Áö±ÝÀº ºó »óÅ·ΠÀÖÀ» ¼ö ÀÖ½À´Ï´Ù. ÀÌÈÄ¿¡ Äڵ带 Ãß°¡Çسª°¥ °ÍÀÔ´Ï´Ù.
¸ÕÀú ÀÌ ÆÄÀÏÀ» ¼ºñ½º ¿öÄ¿·Î µî·ÏÇØ¾ß ÇÕ´Ï´Ù.
app/index.html
ÆäÀÌÁö¿¡¼ scripts/main.js
¸¦ ·ÎµåÇϴµ¥, ¼ºñ½º ¿öÄ¿¸¦ µî·ÏÇÒ ÀÌ ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏ¿¡ µé¾î ÀÖ½À´Ï´Ù.
´ÙÀ½ Äڵ带 scripts/main.js
¿¡ Ãß°¡Çϼ¼¿ä.
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push is supported');
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
})
.catch(function(error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
pushButton.textContent = 'Push Not Supported';
}
ÀÌ ÄÚµå´Â ÇöÀç ºê¶ó¿ìÀú¿¡¼ ¼ºñ½º ¿öÄ¿¿Í Ǫ½Ã ¸Þ½ÃÁö¸¦ Áö¿øÇÏ´ÂÁö È®ÀÎÇϸç, Áö¿øÇÑ´Ù¸é sw.js
ÆÄÀÏÀ» µî·ÏÇÕ´Ï´Ù.
½Ç½À
ºê¶ó¿ìÀú¿¡¼ URL 127.0.0.1:8887À» ¿¾î º¯°æ ³»¿ëÀ» È®ÀÎÇϼ¼¿ä.
´ÙÀ½°ú °°ÀÌ Chrome DevTools¸¦ ¿¾î Service Worker is registered
¿ë ÄܼÖÀ» È®ÀÎÇϼ¼¿ä.
¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö Å° °¡Á®¿À±â
ÀÌ Äڵ左À¸·Î ÀÛ¾÷ÇÏ·Á¸é ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö Å°¸¦ ¸î °³ »ý¼ºÇÒ ÇÊ¿ä°¡ Àִµ¥, µµ¿ì¹Ì »çÀÌÆ®ÀÎ https://web-push-codelab.glitch.me/¿¡¼ »ý¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù.
¿©±â¼ °ø°³ Å° ½Ö°ú ºñ°ø°³ Å° ½ÖÀ» »ý¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù.
´ÙÀ½°ú °°ÀÌ scripts/main.js
·Î °ø°³ Å°¸¦ º¹»çÇÏ¿© <Your Public Key>
°ªÀ» ¹Ù²Ù¼¼¿ä.
const applicationServerPublicKey = '<Your Public Key>';
Âü°í: Àý´ë·Î ºñ°ø°³ Å°¸¦ À¥ ¾Û¿¡ µÎ¸é ¾È µË´Ï´Ù!
»óÅ ÃʱâÈ
Áö±ÝÀº À¥ ¾ÛÀÇ ¹öÆ°ÀÌ ºñÈ°¼ºÈµÇ¾î ÀÖ¾î Ŭ¸¯ÇÒ ¼ö ¾ø½À´Ï´Ù. À̴ Ǫ½Ã ¹öÆ°À» ±âº»ÀûÀ¸·Î ºñÈ°¼ºÈÇÏ°í Ǫ½Ã°¡ Áö¿øµÇ´Â »ç½ÇÀ» ¾Ë°í »ç¿ëÀÚ°¡ ÇöÀç ±¸µ¶ÇÑ »óÅÂÀÎÁö ¾Ë ¼ö ÀÖÀ» ¶§ È°¼ºÈÇÏ´Â °ÍÀÌ ÁÁÀº ¹æ¹ýÀ̱⠶§¹®ÀÔ´Ï´Ù.
scripts/main.js
¿¡¼ µÎ °³ÀÇ ÇÔ¼ö¸¦ ¸¸µé¾îº¾½Ã´Ù. Çϳª´Â initialiseUI
¶ó´Â ÇÔ¼ö·Î¼ »ç¿ëÀÚ°¡ ÇöÀç ±¸µ¶ÇÑ »óÅÂÀÎÁö È®ÀÎÇÏ°í, ´Ù¸¥ Çϳª´Â updateBtn
À̶ó´Â ÇÔ¼ö·Î¼ »ç¿ëÀÚ°¡ ±¸µ¶ÇÑ »óÅÂÀÎÁö ¿©ºÎ¿¡ µû¶ó ¹öÆ°À» È°¼ºÈÇÏ°í ÅؽºÆ®¸¦ º¯°æÇÕ´Ï´Ù.
initialiseUI
ÇÔ¼ö¸¦ ´ÙÀ½°ú °°ÀÌ ÀÛ¼ºÇÏ·Á°í ÇÕ´Ï´Ù.
function initialiseUI() {
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}
»õ ¸Þ¼µå´Â ÀÌÀü ´Ü°è¿¡¼ swRegistration
À» »ç¿ëÇÏ°í pushManager
¿¡¼ getSubscription()
À» È£ÃâÇÕ´Ï´Ù. getSubscription()
Àº ±¸µ¶ÀÌ ÀÖ´Â °æ¿ì ÇöÀç ±¸µ¶À¸·Î È®ÀεǴ ÇÁ¶ó¹Ì½º¸¦ ¹ÝȯÇÏ°í ±×·¸Áö ¾ÊÀ¸¸é null
À» ¹ÝȯÇÏ´Â ¸Þ¼µåÀÔ´Ï´Ù. ÀÌ ¸Þ¼µå·Î »ç¿ëÀÚ°¡ ÀÌ¹Ì ±¸µ¶ÇÑ »óÅÂÀÎÁö È®ÀÎÇÏ°í ¸î °¡Áö »óŸ¦ ¼³Á¤ÇÏ°í updateBtn()
À» È£ÃâÇÏ¿© µµ¿ò¸» ¿ªÇÒÀ» ÇÏ´Â ÅؽºÆ®¿Í ÇÔ²² ¹öÆ°À» È°¼ºÈÇÒ ¼ö ÀÖ½À´Ï´Ù.
´ÙÀ½ Äڵ带 Ãß°¡ÇÏ¿© updateBtn()
ÇÔ¼ö¸¦ ±¸ÇöÇϼ¼¿ä.
function updateBtn() {
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}
ÀÌ ÇÔ¼ö´Â »ç¿ëÀÚ°¡ ±¸µ¶ÇÏ´ÂÁö ¿©ºÎ¿¡ µû¶ó ´Ü¼øÈ÷ ÅؽºÆ®¸¦ º¯°æÇÑ ÈÄ ¹öÆ°À» È°¼ºÈÇÕ´Ï´Ù.
¸¶Áö¸·À¸·Î ÇÒ ÀÏÀº ¼ºñ½º ¿öÄ¿°¡ µî·ÏµÉ ¶§ initialiseUI()
¸¦ È£ÃâÇÏ´Â °ÍÀÔ´Ï´Ù.
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
initialiseUI();
})
½Ç½À
À¥ ¾ÛÀ» ¿¸é ¡®Enable Push Messaging' ¹öÆ°ÀÌ È°¼ºÈµÇ¾î ÀÖÀ» °ÍÀ̸ç(Áï, Ŭ¸¯ÇÒ ¼ö ÀÖÀ½) Äֿܼ¡ ¡®User is NOT subscribed.'·Î Ç¥½ÃµÉ °ÍÀÔ´Ï´Ù.
Äڵ左ÀÇ ³ª¸ÓÁö ºÎºÐÀ¸·Î °è¼Ó ÁøÇàÇÏ¸é¼ »ç¿ëÀÚ°¡ ±¸µ¶/±¸µ¶ Ãë¼ÒÇÒ ¶§ ¹öÆ° ÅؽºÆ®°¡ ¹Ù²î´Â °ÍÀ» º¼ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.
»ç¿ëÀÚ ±¸µ¶
Áö±ÝÀº ¡®Enable Push Messaging' ¹öÆ°ÀÇ ¿ªÇÒÀÌ ¹Ì¹ÌÇÕ´Ï´Ù. ÀÌÁ¦ ±× ºÎºÐÀ» °íÃĺ¾½Ã´Ù.
´ÙÀ½°ú °°ÀÌ initialiseUI()
ÇÔ¼ö¿¡¼ ¹öÆ°¿¡ Ŭ¸¯ ¸®½º³Ê¸¦ Ãß°¡Çϼ¼¿ä.
function initialiseUI() {
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
// TODO: Unsubscribe user
} else {
subscribeUser();
}
});
// Set the initial subscription value
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
isSubscribed = !(subscription === null);
updateSubscriptionOnServer(subscription);
if (isSubscribed) {
console.log('User IS subscribed.');
} else {
console.log('User is NOT subscribed.');
}
updateBtn();
});
}
»ç¿ëÀÚ°¡ Ǫ½Ã ¹öÆ°À» Ŭ¸¯ÇÒ ¶§ Ǫ½Ã¸¦ ±¸µ¶ÇÏ´Â µ¥ ½Ã°£ÀÌ Á» °É¸± ¼ö ÀÖÀ¸¹Ç·Î ¸ÕÀú ¹öÆ°À» ºñÈ°¼ºÈÇÏ¿© ±¸µ¶ÇÏ´Â µ¿¾È »ç¿ëÀÚ°¡ ¹öÆ°À» ´Ù½Ã Ŭ¸¯ÇÒ ¼ö ¾øµµ·Ï ÇÕ´Ï´Ù.
±×·± ´ÙÀ½, »ç¿ëÀÚ°¡ ÇöÀç ±¸µ¶ÇÏÁö ¾ÊÀº »óÅÂÀÓÀ» ¾Ë ¶§ subscribeUser()
¸¦ È£ÃâÇÏ¿© ´ÙÀ½ Äڵ带 º¹»çÇØ scripts/main.js
·Î ºÙ¿©³Ö½À´Ï´Ù.
function subscribeUser() {
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed:', subscription);
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
updateBtn();
});
}
´Ü°èº°·Î ÁøÇàÇÏ¸é¼ ÀÌ Äڵ尡 ¼öÇàÇÏ´Â ÀÛ¾÷°ú ¾î¶»°Ô »ç¿ëÀÚ¿¡ ´ëÇØ Çª½Ã ¸Þ½ÃÁö¸¦ ±¸µ¶ÇÏ´ÂÁö »ìÆ캸¼¼¿ä.
¸ÕÀú ±âº» 64 URL ¾ÈÀü ÀÎÄÚµùµÈ ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹öÀÇ °ø°³ Å°¸¦ ÃëÇÏ¿© UInt8Array
·Î º¯È¯ÇÕ´Ï´Ù. ÀÌ°ÍÀÌ ¹Ù·Î ±¸µ¶ È£ÃâÀÇ ¿¹»ó ÀÔ·ÂÀ̱⠶§¹®ÀÔ´Ï´Ù. scripts/main.js
ÀÇ ¸Ç À§¿¡ ÀÌ¹Ì urlB64ToUint8Array
ÇÔ¼ö¸¦ Á¦°øÇß½À´Ï´Ù.
°ªÀ» º¯È¯ÇÑ ÈÄ ¼ºñ½º ¿öÄ¿ÀÇ pushManager
¿¡¼ subscribe()
¸Þ¼µå¸¦ È£ÃâÇÏ¿© ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹öÀÇ °ø°³ Å°¿Í userVisibleOnly: true
°ªÀ» Á¦ÃâÇÕ´Ï´Ù.
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
userVisibleOnly
¸Å°³º¯¼ö´Â ±âº»ÀûÀ¸·Î Ǫ½Ã°¡ Àü¼ÛµÉ ¶§¸¶´Ù ¾Ë¸²À» Ç¥½ÃÇϵµ·Ï Çã¿ëÇÏ´Â °ÍÀÔ´Ï´Ù. ÀÛ¼º ½ÃÁ¡¿¡¼´Â ÀÌ °ªÀÌ ÇʼöÀÌ°í true¿©¾ß ÇÕ´Ï´Ù.
subscribe()
¸¦ È£ÃâÇÏ¸é ´ÙÀ½ ´Ü°è ÈÄ È®À뵃 ÇÁ¶ó¹Ì½º°¡ ¹ÝȯµË´Ï´Ù.
- »ç¿ëÀÚ°¡ ¾Ë¸²À» Ç¥½ÃÇÒ ±ÇÇÑÀ» Çã¿ëÇß½À´Ï´Ù.
- ºê¶ó¿ìÀú°¡ PushSubscription »ý¼ºÀ» À§ÇÑ ¼¼ºÎ Á¤º¸¸¦ ¾ò±â À§ÇØ Çª½Ã ¼ºñ½º·Î ³×Æ®¿öÅ© ¿äûÀ» º¸³Â½À´Ï´Ù.
ÀÌ·± ´Ü°è¸¦ ¼º°øÀûÀ¸·Î ¼öÇàÇÑ °æ¿ì subscribe()
ÇÁ¶ó¹Ì½º´Â PushSubscription
À¸·Î È®Àε˴ϴÙ. »ç¿ëÀÚ°¡ ±ÇÇÑÀ» Çã¿ëÇÏÁö ¾Ê°Å³ª »ç¿ëÀÚ ±¸µ¶¿¡ ¹®Á¦°¡ ÀÖ´Â °æ¿ì ÇÁ¶ó¹Ì½º´Â ¿À·ù¿Í ÇÔ²² °ÅºÎÇÕ´Ï´Ù. ÀÌ¿¡ µû¶ó Äڵ左¿¡ ´ÙÀ½°ú °°Àº ÇÁ¶ó¹Ì½º üÀÎÀÌ »ý±é´Ï´Ù.
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
console.log('User is subscribed:', subscription);
updateSubscriptionOnServer(subscription);
isSubscribed = true;
updateBtn();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
updateBtn();
});
À̸¦ ÀÌ¿ëÇØ ±¸µ¶À» ¹Þ°í »ç¿ëÀÚ¸¦ ±¸µ¶ »óÅ·Πó¸®Çϰųª ¿À·ù¸¦ ÆľÇÇØ ÄַܼΠÃâ·ÂÇÕ´Ï´Ù. µÎ °æ¿ì ¸ðµÎ updateBtn()
À» È£ÃâÇÏ¿© ¹öÆ°ÀÌ ´Ù½Ã È°¼ºÈµÇ°í ¾Ë¸ÂÀº ÅؽºÆ®°¡ ÀÖ´ÂÁö È®ÀÎÇÕ´Ï´Ù.
¸Þ¼µå updateSubscriptionOnServer
´Â ½ÇÁ¦ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ ¹é¿£µå·Î ±¸µ¶À» º¸³»´Â ¸Þ¼µåÀÌÁö¸¸, ÀÌ Äڵ左¿¡¼´Â ³ªÁß¿¡ µµ¿òÀÌ µÇµµ·Ï UI¿¡ ±¸µ¶À» Ãâ·ÂÇÏ°Ú½À´Ï´Ù. ´ÙÀ½°ú °°ÀÌ scripts/main.js
¿¡ ÀÌ ¸Þ¼µå¸¦ Ãß°¡Çϼ¼¿ä.
function updateSubscriptionOnServer(subscription) {
// TODO: Send subscription to application server
const subscriptionJson = document.querySelector('.js-subscription-json');
const subscriptionDetails =
document.querySelector('.js-subscription-details');
if (subscription) {
subscriptionJson.textContent = JSON.stringify(subscription);
subscriptionDetails.classList.remove('is-invisible');
} else {
subscriptionDetails.classList.add('is-invisible');
}
}
½Ç½À
À¥ ¾ÛÀ¸·Î ´Ù½Ã µ¹¾Æ°¡ ¹öÆ°À» Ŭ¸¯ÇÏ¸é ´ÙÀ½°ú °°Àº ±ÇÇÑ ÇÁ·ÒÇÁÆ®°¡ ³ªÅ¸³¯ °ÍÀÔ´Ï´Ù.
±ÇÇÑÀ» Çã¿ëÇϸé Äֿܼ¡¼ PushSubscription
°ú ÇÔ²² User is subscribed:
¸¦ Ãâ·ÂÇÏ°í ¹öÆ°ÀÇ ÅؽºÆ®°¡ ¡®Disable Push Messaging'À¸·Î ¹Ù²î´Â °ÍÀ» ¾Ë ¼ö ÀÖ°í ÆäÀÌÁö ÇÏ´Ü¿¡¼ ±¸µ¶À» JSONÀ¸·Î º¼ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.
°ÅºÎµÈ ±ÇÇÑ Ã³¸®
¿ì¸®°¡ ¾ÆÁ÷ ó¸®ÇÏÁö ¾ÊÀº ÇÑ °¡Áö°¡ Àִµ¥, ±×°ÍÀº »ç¿ëÀÚ°¡ ±ÇÇÑ ¿äûÀ» Â÷´ÜÇÒ °æ¿ì¿¡ ¹ß»ýÇÏ´Â ÀÏÀÔ´Ï´Ù. ÀÌ ¹®Á¦´Â Ưº°È÷ Àß »ý°¢ÇØ¾ß ÇÕ´Ï´Ù. ¿Ö³ÄÇÏ¸é »ç¿ëÀÚ°¡ ±ÇÇÑÀ» Â÷´ÜÇϸé À¥ ¾ÛÀÌ ±ÇÇÑ ÇÁ·ÒÇÁÆ®¸¦ ´Ù½Ã Ç¥½ÃÇÒ ¼ö ¾ø°í »ç¿ëÀÚ°¡ ±¸µ¶ÇÒ ¼ö ¾ø°Ô µÇ¹Ç·Î »ç¿ëÀÚ°¡ Ǫ½Ã ¹öÆ°À» »ç¿ëÇÒ ¼ö ¾øÀ½À» ¾Ëµµ·Ï ÃÖ¼ÒÇÑ ¹öÆ°À» ºñÈ°¼ºÈÇÒ ÇÊ¿ä°¡ Àֱ⠶§¹®ÀÔ´Ï´Ù.
ÀÌ·± »óȲÀ» ´Ù·ç¾î¾ß ÇÒ ºÐ¸íÇÑ À§Ä¡´Â ¹Ù·Î updateBtn()
ÇÔ¼ö ³»¿¡ ÀÖ½À´Ï´Ù. ´ÙÀ½°ú °°ÀÌ Notification.permission
°ªÀ» È®ÀÎÇϱ⸸ ÇÏ¸é µË´Ï´Ù.
function updateBtn() {
if (Notification.permission === 'denied') {
pushButton.textContent = 'Push Messaging Blocked.';
pushButton.disabled = true;
updateSubscriptionOnServer(null);
return;
}
if (isSubscribed) {
pushButton.textContent = 'Disable Push Messaging';
} else {
pushButton.textContent = 'Enable Push Messaging';
}
pushButton.disabled = false;
}
±ÇÇÑÀÌ denied
ÀÎ °æ¿ì »ç¿ëÀÚ ±¸µ¶ÀÌ ºÒ°¡´ÉÇؼ ¿ì¸®°¡ ÇÒ ¼ö ÀÖ´Â ÀÏÀº ´õ ÀÌ»ó ¾øÀ¸¹Ç·Î, ¹öÆ°À» ¿µ±¸ÀûÀ¸·Î ºñÈ°¼ºÈÇÏ´Â °ÍÀÌ ÃÖ¼±ÀÇ ¹æ¹ýÀÔ´Ï´Ù.
½Ç½À
ÀÌÀü ´Ü°è¿¡¼ À¥ ¾Û¿¡ ´ëÇÑ ±ÇÇÑÀ» ÀÌ¹Ì Çã¿ëÇßÀ¸¹Ç·Î URL Ç¥½ÃÁÙÀÇ ¿ø ¾È¿¡ Ç¥½ÃµÈ i¸¦ Ŭ¸¯ÇÏ°í ¾Ë¸² ±ÇÇÑÀ» Use global default (Ask)·Î º¯°æÇØ¾ß ÇÕ´Ï´Ù.
ÀÌ ¼³Á¤À» º¯°æÇÑ ÈÄ ÆäÀÌÁö¸¦ »õ·Î °íÄ¡°í Enable Push Messaging ¹öÆ°À» Ŭ¸¯ÇÑ ÈÄ, À̹ø¿¡´Â ±ÇÇÑ ´ëÈ»óÀÚ¿¡¼ BlockÀ» ¼±ÅÃÇϼ¼¿ä. ±×·¯¸é ¹öÆ° ÅؽºÆ®°¡ Push Messaging Blocked·Î Ç¥½ÃµÇ¸é¼ ºñÈ°¼ºÈµË´Ï´Ù.
ÀÌ·¸°Ô º¯°æÇÏ¸é »ç¿ëÀÚ ±¸µ¶ÀÌ °¡´ÉÇÏ°í °¡´ÉÇÑ ±ÇÇÑ °ü·Ã ½Ã³ª¸®¿À¸¦ ó¸®ÇÒ ¼ö ÀÖ°Ô µË´Ï´Ù.
Ǫ½Ã À̺¥Æ® ó¸®
¹é¿£µå¿¡¼ Ǫ½Ã ¸Þ½ÃÁö¸¦ º¸³»´Â ¹æ¹ýÀ» ´Ù·ç±â Àü¿¡ ¸ÕÀú ±¸µ¶ÇÑ »ç¿ëÀÚ°¡ Ǫ½Ã ¸Þ½ÃÁö¸¦ ¹ÞÀ» ¶§ ½ÇÁ¦·Î ¾î¶² ÀÏÀÌ ÀϾÁö »ý°¢Çغ¼ ÇÊ¿ä°¡ ÀÖ½À´Ï´Ù.
Ǫ½Ã ¸Þ½ÃÁö¸¦ Æ®¸®°ÅÇÒ ¶§ ºê¶ó¿ìÀú´Â Ǫ½Ã ¸Þ½ÃÁö¸¦ ¼ö½ÅÇÏ°í Ǫ½ÃÀÇ ´ë»óÀÌ µÇ´Â ¼ºñ½º ¿öÄ¿¸¦ ¹ß°ßÇÑ ÈÄ ±× ¼ºñ½º ¿öÄ¿¸¦ ±ú¿ö Ǫ½Ã À̺¥Æ®¸¦ ¹ß¼ÛÇÕ´Ï´Ù. ÀÌ À̺¥Æ®¸¦ ¼ö½Å ´ë±âÇÏ°í À̺¥Æ®¸¦ ¼ö½ÅÇßÀ» ¶§ ±× °á°ú·Î¼ ¾Ë¸²À» Ç¥½ÃÇØ¾ß ÇÕ´Ï´Ù.
sw.js
ÆÄÀÏ¿¡ ´ÙÀ½ Äڵ带 Ãß°¡Çϼ¼¿ä.
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});
ÀÌ Äڵ带 ´Ü°èº°·Î ÁøÇàÇغ¾½Ã´Ù. ¼ºñ½º ¿öÄ¿¿¡ À̺¥Æ® ¸®½º³Ê(¾Æ·¡ÀÇ ÄÚµå)¸¦ Ãß°¡ÇÏ¿© ¼ºñ½º ¿öÄ¿¿¡¼ ¹ß»ýÇϴ Ǫ½Ã À̺¥Æ®¸¦ ¼ö½ÅÇÒ ¼ö ÀÖµµ·Ï ÇÕ´Ï´Ù.
self.addEventListener('push', ...... );
ÀÌÀü¿¡ À¥ ¿öÄ¿¸¦ ´Ù·ç¾îº» ÀûÀÌ ¾ø´Ù¸é ¾Æ¸¶ self
¸¦ óÀ½ Á¢ÇÏ½Ç °ÍÀÔ´Ï´Ù. self
´Â ¼ºñ½º ¿öÄ¿ ÀÚü¸¦ ÂüÁ¶ÇϹǷΠ¼ºñ½º ¿öÄ¿¿¡ À̺¥Æ® ¸®½º³Ê¸¦ Ãß°¡ÇÕ´Ï´Ù.
Ǫ½Ã ¸Þ½ÃÁö°¡ ¼ö½ÅµÇ¸é À̺¥Æ® ¸®½º³Ê°¡ ½ÇÇàµÇ°í, µî·Ï ½Ã showNotification()
À» È£ÃâÇÏ¿© ¾Ë¸²À» »ý¼ºÇÕ´Ï´Ù. showNotification()
˼ title
À» ¿¹»óÇÒ °ÍÀ̸ç options
°´Ã¼¸¦ Á¦°øÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿©±â¼´Â ¿É¼Ç¿¡¼ º»¹® ¸Þ½ÃÁö, ¾ÆÀÌÄÜ ¹× ¹èÁö¸¦ ¼³Á¤Çغ¸°Ú½À´Ï´Ù(Á÷¼º ½ÃÁ¡¿¡¼ ¹èÁö´Â Android¿¡¼¸¸ »ç¿ëµÊ).
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
self.registration.showNotification(title, options);
Ǫ½Ã À̺¥Æ®¿¡¼ ¸¶Áö¸·À¸·Î ´Ù·ê »çÇ×Àº event.waitUntil()
ÀÔ´Ï´Ù. ÀÌ ¸Þ¼µå´Â ÇÁ¶ó¹Ì½º¸¦ ÃëÇÏ¸ç ºê¶ó¿ìÀú´Â Àü´ÞµÈ ÇÁ¶ó¹Ì½º°¡ È®À뵃 ¶§±îÁö ¼ºñ½º ¿öÄ¿¸¦ È°¼ºÈ ¹× ½ÇÇà »óÅ·ΠÀ¯ÁöÇÒ °ÍÀÔ´Ï´Ù.
À§ÀÇ Äڵ带 Á» ´õ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï, ´ÙÀ½°ú °°ÀÌ ´Ù½Ã ÀÛ¼ºÇÒ ¼ö ÀÖ½À´Ï´Ù.
const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);
Ǫ½Ã À̺¥Æ®¸¦ ´Ü°èº°·Î ÁøÇàÇغÃÀ¸¹Ç·Î, ÀÌÁ¦ Ǫ½Ã À̺¥Æ®¸¦ Å×½ºÆ®Çغ¾½Ã´Ù.
½Ç½À
¼ºñ½º ¿öÄ¿¿¡ Ǫ½Ã À̺¥Æ®°¡ ÀÖ´Â »óÅ¿¡¼ DevTools¸¦ »ç¿ëÇØ ÇãÀ§ Ǫ½Ã À̺¥Æ®¸¦ Æ®¸®°ÅÇÏ¿© ¸Þ½ÃÁö°¡ ¼ö½ÅµÉ ¶§ ¾î¶² ÀÏÀÌ ¹ß»ýÇÏ´ÂÁö Å×½ºÆ®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
À¥ ¾Û¿¡¼ Ǫ½Ã ¸Þ½ÃÁö¸¦ ±¸µ¶ÇÏ¿© Äֿܼ¡ User IS subscribed°¡ Ç¥½ÃµÇ´ÂÁö È®ÀÎÇÑ ´ÙÀ½, DevToolsÀÇ Application ä³Î·Î À̵¿ÇØ Service Workers ÅÇ¿¡¼ ÀÚ½ÅÀÇ ¼ºñ½º ¿öÄ¿ ¾Æ·¡¿¡ ÀÖ´Â Push ¸µÅ©¸¦ Ŭ¸¯Çϼ¼¿ä.
Ŭ¸¯ÇÏ¸é ´ÙÀ½°ú °°Àº ¾Ë¸² ¸Þ½ÃÁö°¡ ³ªÅ¸³¯ °ÍÀÔ´Ï´Ù.
Âü°í: ÀÌ ´Ü°è¸¦ ¼öÇàÇߴµ¥ ¿øÇÏ´Â °á°ú°¡ ³ª¿ÀÁö ¾ÊÀ¸¸é DevTools Application Æгο¡¼ Unregister ¸µÅ©¸¦ ÅëÇØ ¼ºñ½º ÀÛ¾÷À» µî·Ï Ãë¼ÒÇÏ°í ¼ºñ½º ¿öÄ¿°¡ ÁßÁöµÇ±â¸¦ ±â´Ù·È´Ù°¡ ÆäÀÌÁö¸¦ »õ·Î °íÃÄ º¸¼¼¿ä.
¾Ë¸² Ŭ¸¯
ÀÌ·± ¾Ë¸² Áß Çϳª¸¦ Ŭ¸¯Çصµ ¾Æ¹«·± Àϵµ ÀϾÁö ¾Ê´Â´Ù´Â »ç½ÇÀ» ¾Ë ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù. ¼ºñ½º ¿öÄ¿¿¡¼ notificationclick
À̺¥Æ®¸¦ ¼ö½Å ´ë±âÇÏ´Â ¹æ¹ýÀ¸·Î ¾Ë¸² Ŭ¸¯À» ó¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
´ÙÀ½°ú °°ÀÌ sw.js
¿¡¼ notificationclick
¸®½º³Ê¸¦ Ãß°¡ÇÏ´Â ´Ü°èºÎÅÍ ½ÃÀÛÇÕ´Ï´Ù.
self.addEventListener('notificationclick', function(event) {
console.log('[Service Worker] Notification click Received.');
event.notification.close();
event.waitUntil(
clients.openWindow('https://developers.google.com/web/')
);
});
»ç¿ëÀÚ°¡ ¾Ë¸²À» Ŭ¸¯Çϸé notificationclick
À̺¥Æ® ¸®½º³Ê°¡ È£ÃâµË´Ï´Ù.
ÀÌ Äڵ左¿¡¼´Â ¸ÕÀú Ŭ¸¯ÇÑ ¾Ë¸²ºÎÅÍ ´Ý½À´Ï´Ù.
event.notification.close();
±×·± ´ÙÀ½, developers.google.com URLÀ» ·ÎµåÇÏ´Â »õ â/ÅÇÀ» ¿±´Ï´Ù. ÀÌ URLÀº ¸¶À½´ë·Î ¹Ù²ãµµ µË´Ï´Ù.
clients.openWindow('https://developers.google.com/web/')
event.waitUntil()
À» ´Ù½Ã È£ÃâÇÏ¿© »õ âÀÌ Ç¥½ÃµÇ±â Àü¿¡´Â ºê¶ó¿ìÀú°¡ ¼ºñ½º ¿öÄ¿¸¦ Á¾·áÇÏÁö ¸øÇÏ°Ô ÇÕ´Ï´Ù.
½Ç½À
DevTools¿¡¼ Ǫ½Ã ¸Þ½ÃÁö¸¦ ´Ù½Ã Æ®¸®°ÅÇÏ°í ¾Ë¸²À» Ŭ¸¯Çغ¸¼¼¿ä. ±×·¯¸é ¾Ë¸²ÀÌ ´ÝÈ÷°í »õ ÅÇÀÌ ¿¸®´Â °ÍÀ» È®ÀÎÇÒ ¼ö ÀÖÀ» °ÍÀÔ´Ï´Ù.
Ǫ½Ã ¸Þ½ÃÁö º¸³»±â
¿ì¸®°¡ ¸¸µç À¥ ¾ÛÀÌ DevTools¸¦ »ç¿ëÇÏ¿© ¾Ë¸²À» Ç¥½ÃÇÒ ¼ö ÀÖ´Ù´Â Á¡À» »ìÆ캸¾Ò°í Ŭ¸¯ ¾Ë¸²À» ´Ý´Â ¹æ¹ýµµ ¾Ë¾Æº¸¾Ò½À´Ï´Ù. ´ÙÀ½ ´Ü°è´Â ½ÇÁ¦ Ǫ½Ã ¸Þ½ÃÁö¸¦ º¸³¾ Â÷·ÊÀÔ´Ï´Ù.
º¸Åë À̸¦ À§ÇÑ ÇÁ·Î¼¼½º´Â À¥ÆäÀÌÁö¿¡¼ ¹é¿£µå·Î ±¸µ¶À» Àü¼ÛÇÏ¸é ¹é¿£µå°¡ ±¸µ¶¿¡¼ ¿£µåÆ÷ÀÎÆ®¿¡ ´ëÇÑ API È£ÃâÀ» ½ÇÇàÇÏ¿© Ǫ½Ã ¸Þ½ÃÁö¸¦ Æ®¸®°ÅÇÏ´Â °ÍÀÔ´Ï´Ù.
ÀÌ ³»¿ëÀº º» Äڵ左ÀÇ ¹üÀ§¸¦ ¹þ¾î³ªÁö¸¸, ÀÌ Äڵ左ÀÇ µµ¿ì¹Ì »çÀÌÆ®(https://web-push-codelab.glitch.me/)¸¦ ÅëÇØ ½ÇÁ¦ Ǫ½Ã ¸Þ½ÃÁö¸¦ Æ®¸®°ÅÇÒ ¼ö ÀÖ½À´Ï´Ù. ´ÙÀ½°ú °°ÀÌ ±¸µ¶ Á¤º¸¸¦ º¹»çÇØ ÆäÀÌÁö ÇÏ´Ü¿¡ ºÙ¿©³ÖÀ¸¼¼¿ä.
±×·± ´ÙÀ½, ¾Æ·¡¿Í °°ÀÌ µµ¿ì¹Ì »çÀÌÆ®ÀÇ Subscription to Send To ÅؽºÆ® ¿µ¿ª¿¡µµ ºÙ¿©³ÖÀ¸¼¼¿ä.
±×·¯¸é Text to Send ¾Æ·¡¿¡¼ Ǫ½Ã ¸Þ½ÃÁö·Î º¸³»°í ½ÍÀº ¹®ÀÚ¿À» Ãß°¡ÇÒ ¼ö ÀÖ°í, ¸¶Áö¸·À¸·Î Send Push Message ¹öÆ°À» Ŭ¸¯ÇÏ¸é µË´Ï´Ù.
±×·¯¸é Ǫ½Ã ¸Þ½ÃÁö°¡ ¼ö½ÅµÇ°í ÀÚ½ÅÀÌ Æ÷ÇÔÇÑ ÅؽºÆ®°¡ Äֿܼ¡ Ãâ·ÂµÉ °ÍÀÔ´Ï´Ù.
ÀÌ·± ½ÄÀ¸·Î µ¥ÀÌÅÍ ¼Û¼ö½ÅÀ» Å×½ºÆ®ÇÏ¸é¼ ¾Ë¸²À» ¿øÇÏ´Â ÇüÅ·ΠÁ¶ÀÛÇÒ ¼ö ÀÖ½À´Ï´Ù.
µµ¿ì¹Ì ¾ÛÀº ½ÇÁ¦·Î´Â À¥ Ǫ½Ã ¶óÀ̺귯¸®¸¦ »ç¿ëÇÏ¿© ¸Þ½ÃÁö¸¦ º¸³»´Â ³ëµå ¼¹öÀÏ »ÓÀÔ´Ï´Ù. GithubÀÇ web-push-libs org¸¦ È®ÀÎÇØ ¾î¶² ¶óÀ̺귯¸®¸¦ »ç¿ëÇÏ¿© ÀÚµ¿À¸·Î Ǫ½Ã ¸Þ½ÃÁö¸¦ º¸³¾ ¼ö ÀÖ´ÂÁö ¾Ë¾Æº¸¸é µµ¿òÀÌ µÉ °ÍÀÔ´Ï´Ù. Ǫ½Ã ¸Þ½ÃÁö¸¦ Æ®¸®°ÅÇϱâ À§ÇÑ ÇÙ½ÉÀûÀÎ ¼¼ºÎ »çÇ×À» ¸¹ÀÌ ´Ù·ç°í Àֱ⠶§¹®ÀÔ´Ï´Ù.
»ç¿ëÀÚ ±¸µ¶ Ãë¼Ò
¿ì¸®°¡ ÇÑ °¡Áö ³õÄ¡°í ÀÖ´Â Á¡Àº »ç¿ëÀÚ°¡ Ǫ½Ã ¾Ë¸² ±¸µ¶À» Ãë¼ÒÇÒ ¼ö ÀÖµµ·Ï ÇÏ´Â ±â´ÉÀÔ´Ï´Ù. À̸¦ À§ÇØ PushSubscription
¿¡¼ unsubscribe()
¸¦ È£ÃâÇØ¾ß ÇÕ´Ï´Ù.
scripts/main.js
ÆÄÀÏ·Î ´Ù½Ã µ¹¾Æ°¡¼ initialiseUI()
¿¡¼ pushButton
ÀÇ Å¬¸¯ ¸®½º³Ê¸¦ ¾Æ·¡ ÄÚµå·Î º¯°æÇϼ¼¿ä.
pushButton.addEventListener('click', function() {
pushButton.disabled = true;
if (isSubscribed) {
unsubscribeUser();
} else {
subscribeUser();
}
});
¿ì¸®´Â ÀÌÁ¦ »õ·Î¿î ÇÔ¼öÀÎ unsubscribeUser()
¸¦ È£ÃâÇÏ·Á°í ÇÕ´Ï´Ù. ÀÌ ¸Þ¼µå¿¡¼´Â ÇöÀç ±¸µ¶À» °¡Á®¿Í ÀÌ¿¡ ´ëÇØ ±¸µ¶ Ãë¼Ò¸¦ È£ÃâÇÒ °ÍÀÔ´Ï´Ù. ´ÙÀ½ Äڵ带 scripts/main.js
¿¡ Ãß°¡Çϼ¼¿ä.
function unsubscribeUser() {
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
});
}
ÀÌ ÇÔ¼ö¸¦ ´Ü°èº°·Î ÁøÇàÇغ¾½Ã´Ù.
¸ÕÀú getSubscription()
À» È£ÃâÇÏ¿© ÇöÀç ±¸µ¶À» °¡Á®¿É´Ï´Ù.
swRegistration.pushManager.getSubscription()
À̶§ PushSubscription
À¸·Î È®ÀεǴ ÇÁ¶ó¹Ì½º°¡ Á¸ÀçÇÒ °æ¿ì ÀÌ·± ÇÁ¶ó¹Ì½º°¡ ¹ÝȯµÇ°í, Á¸ÀçÇÏÁö ¾ÊÀ¸¸é null
ÀÌ ¹ÝȯµË´Ï´Ù. ±¸µ¶ÀÌ ÀÖÀ» °æ¿ì ±× ±¸µ¶¿¡ ´ëÇØ unsubscribe()
¸¦ È£ÃâÇÏ¿© PushSubscription
À» ¹«È¿·Î ¸¸µì´Ï´Ù.
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
// TODO: Tell application server to delete subscription
return subscription.unsubscribe();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
})
unsubscribe()
¸¦ È£ÃâÇϸé ÇÁ¶ó¹Ì½º°¡ ¹ÝȯµË´Ï´Ù. ÀÌ °úÁ¤ÀÌ ¿Ï·áµÇ±â±îÁö ¾î´À Á¤µµ ½Ã°£ÀÌ °É¸± ¼ö ÀÖÀ¸¹Ç·Î, üÀο¡¼ ±× ´ÙÀ½ then()
ÀÌ unsubscribe()
°¡ ÀÛ¾÷À» ¸¶Ä¥ ¶§±îÁö ´ë±âÇϵµ·Ï ÇØ´ç ÇÁ¶ó¹Ì½º¸¦ ¹ÝȯÇÕ´Ï´Ù. ¶ÇÇÑ, unsubscribe()
È£Ã⠽à ¿À·ù°¡ ¹ß»ýÇÏ´Â °æ¿ì catch Çڵ鷯¸¦ Ãß°¡ÇÕ´Ï´Ù. ±× ÈÄ¿¡ UI¸¦ ¾÷µ¥ÀÌÆ®ÇÒ ¼ö ÀÖ½À´Ï´Ù.
.then(function() {
updateSubscriptionOnServer(null);
console.log('User is unsubscribed.');
isSubscribed = false;
updateBtn();
})
½Ç½À
À¥ ¾Û¿¡¼ Enable Push Messaging / Disable Push MessagingÀ» ´©¸¦ ¼ö ÀÖ¾î¾ß ÇÏ¸ç ·Î±×¿¡´Â »ç¿ëÀÚÀÇ ±¸µ¶ ¿©ºÎ°¡ Ç¥½ÃµË´Ï´Ù.
¿Ï¼º
µåµð¾î Äڵ左À» ¿Ï¼ºÇß½À´Ï´Ù!
ÀÌ Äڵ左¿¡¼´Â À¥ ¾Û¿¡ Ǫ½Ã¸¦ Ãß°¡ÇÏ¿© È°¼ºÈÇÏ°í ½ÇÇàÇÏ´Â ¹æ¹ýÀ» ¾Ë ¼ö ÀÖ¾ú½À´Ï´Ù. À¥ ¾Ë¸²À¸·Î ¹«¾ùÀ» ÇÒ ¼ö ÀÖÀ»Áö Á» ´õ ÀÚ¼¼È÷ ¾Ë¾Æº¸°í ½ÍÀ¸¸é ÀÌ ¹®¼¸¦ È®ÀÎÇغ¸¼¼¿ä.
»çÀÌÆ®¿¡ Ǫ½Ã¸¦ ¹èÆ÷ÇÒ ¹æ¹ýÀ» ã°í ÀÖ´Ù¸é, GCMÀ» »ç¿ëÇÏ´Â °ú°ÅÀÇ ºê¶ó¿ìÀú³ª Ç¥ÁØÀ» ÁؼöÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú¸¦ À§ÇÑ Áö¿øÀ» Ãß°¡ÇÏ´Â µ¥µµ °ü½ÉÀÌ ÀÖÀ»Áö ¸ð¸£°Ú½À´Ï´Ù. ÀÚ¼¼ÇÑ ³»¿ëÀº ¿©±â¼ È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.
Ãß°¡ ÀÚ·á
- WebFundamentalsÀÇ À¥ Ǫ½Ã ¾Ë¸² ¹®¼
- À¥ Ǫ½Ã ¶óÀ̺귯¸® - Node.js, PHP, ÀÚ¹Ù ¹× PythonÀ» Æ÷ÇÔÇÑ À¥ Ǫ½Ã ¶óÀ̺귯¸®
°ü·Ã ºí·Î±× °Ô½Ã¹°
- À¥ Ǫ½Ã ÆäÀÌ·Îµå ¾ÏÈ£È
- ¾ÖÇø®ÄÉÀÌ¼Ç ¼¹ö Å°¿Í À¥ Ǫ½Ã
- ¾Ë¸² ÀÛ¾÷
- ¾ÆÀÌÄÜ, À̺¥Æ® ´Ý±â, ´Ù½Ã ¾Ë¸² ±âº» ¼³Á¤ ¹× ŸÀÓ½ºÅÆÇÁ
¹®Á¦°¡ Àְųª ÀÇ°ßÀÌ ÀÖÀ¸¼¼¿ä?
¾ðÁ¦µç ¸Á¼³ÀÌÁö ¸»°í ¹®Á¦¸¦ Á¦ÃâÇØ Áֽøé Äڵ左¿¡¼ ´õ¿í ³ªÀº ¼ºñ½º¸¦ Á¦°øÇÏ´Â µ¥ Å« µµ¿òÀÌ µÉ °ÍÀÔ´Ï´Ù. °¨»çÇÕ´Ï´Ù!