Push Notification is comming!

ChromeでPush通知が使えるようになったので、それを紹介してみた記事です〜。
HTML5 minitutes
第9回

Transcript

1. Push Notification is Coming!! :PIFJ
   .VOFTBEB $ZCFS"HFOU
   *OD )5.-NJOVUFT
   WPM
2. .VOFTBEB
   :PIFJ 㾎 ג αΠόʔΤʔδΣϯτॴଐ
   㾎 νʔϜϦʔσΟϯάɺάϩεϋοΫɺΤϯδχΞ
   㾎 #MPH
   
   IUUQXXXZPIFJNOFU
   㾎 5XJUUFS
   
   !ZPIFJ.VOF
3. ϒϥ΢βͷऑΈʁ
4. 8FBLOFTT
   PG
   UIF
   8FC 㾎ωοτϫʔΫपΓ
   㾎ϨϯμϦϯά΍Ξχϝʔγϣϯ
   㾎࠶ੜػೳ
   㾎ετϨʔδ
5. 8FBLOFTT
   PG
   UIF
   8FC 㾎ωοτϫʔΫपΓ
   㾎ϨϯμϦϯά΍Ξχϝʔγϣϯ
   㾎࠶ੜػೳ
   㾎ετϨʔδ ΦϑϥΠϯɺόοΫάϥ΢ϯυಉظɺ164)௨஌ ϒϥ΢βੑೳ61ɺ8FC(-ܥͷٕज़ 8FC
   "VEJP
   "1*ɺ8FC
   .*%*ɺͳͲ 8FC
   4UPSBHFɺ'JMF
   "1*ɺͳͲ
6. 8FBLOFTT
   PG
   UIF
   8FC 㾎ωοτϫʔΫपΓ
   㾎ϨϯμϦϯά΍Ξχϝʔγϣϯ
   㾎࠶ੜػೳ
   㾎ετϨʔδ ΦϑϥΠϯɺόοΫάϥ΢ϯυಉظɺ164)௨஌ ϒϥ΢βੑೳ61ɺ8FC(-ܥͷٕज़ 8FC
   "VEJP
   "1*ɺ8FC
   .*%*ɺͳͲ 8FC
   4UPSBHFɺ'JMF
   "1*ɺͳͲ
7. ωοτϫʔΫܥͷऑΈΛࠀ෰͢Δ 4FSWJDF8PSLFS
8. ωοτϫʔΫܥͷऑΈΛࠀ෰͢Δ 4FSWJDF8PSLFS 㾎 ߴ౓ͳϓϩΩγػೳ
   㾎 ΦϑϥΠϯͷ࣮ݱ
   㾎 όοΫάϥϯυಉظ
   㾎 164)௨஌
   㾎 ͳͲ
9. IUUQTTQFBLFSEFDLDPNDIJOUSPEVDUJPOUP TFSWJDFXPSLFS ࢀߟ
10. IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTTFSWJDF XPSLFSJOUSPEVDUJPO ࢀߟ
11. 㾎 $ISPNF
    
    ʙ
    㾎 "OESPJE΋ؚΉ
    㾎 ϒϥ΢βΛด͍ͯͯ͡΋164)Λ
 ड͚औΓՄೳ 1VTI
    /PUJGJDBUJPO
12. 1VTI
    /PUJpDBUJPOͷ࢓૊Έ ᶃߪಡॲཧ
    ᶄ164)ड͚औΓ
    ᶅ164)ૹ৴
13. 1VTI
    /PUJpDBUJPOͷ࢓૊Έ
    
    ᶃߪಡॲཧ ࢀߟ
    IUUQVQEBUFTIUNMSPDLTDPNQVTIOPUJpDBUPOTPOUIFPQFOXFC ࢀߟ
    IUUQRJJUBDPNUPNPZVLJMBCTJUFNT⒎GCDCBBE 1BHF
    +BWB4DSJQU 4FSWJDF
    8PSLFS (PPHMF
    $MPVE
    .FTTBHJOH www.yoheim.net TVCTDSJCF TVCTDSJCF@JE
14. ࢀߟ
    IUUQVQEBUFTIUNMSPDLTDPNQVTIOPUJpDBUPOTPOUIFPQFOXFC ࢀߟ
    IUUQRJJUBDPNUPNPZVLJMBCTJUFNT⒎GCDCBBE 1BHF
    +BWB4DSJQU 4FSWJDF
    8PSLFS (PPHMF
    $MPVE
    .FTTBHJOH 1VTI
    /PUJpDBUJPOͷ࢓૊Έ
    
    ᶄ1VTIड͚औΓɺᶅ164)ૹ৴ DBMM
    "1* QVTI
    /PUJpDBUJPO TIPX
    /PUJpDBUJPO www.yoheim.net
15. ۩ମతͳ࣮૷͸
16. ࣮૷Πϝʔδ
    
    ᶃߪಡॲཧ navigator.serviceWorker.ready.then(function (reg) { // ߪಡॲཧ reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) { console.debug('ߪಡ੒ޭ!!'); // ServerʹߪಡIDΛ௨஌ sendSubscriptionIdToServer(subscription); }); }); 1BHF
    +BWB4DSJQU
17. ࣮૷Πϝʔδ
    
    ᶄ164)ड͚औΓ self.addEventListener('push', function (event) { var title = 'Yay a message.'; var body = 'We have received a push message.'; var icon = './images/icon-192x192.png'; var tag = 'simple-push-demo-notification-tag'; event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag })); }); 4FSWJDF
    8PSLFS
18. ࣮૷Πϝʔδ
    
    ᶅ164)ͷૹ৴ྫʢࢀߟʣ curl --header "Authorization: key=<API_KEY>" --header "Content-Type: application/json" https://android.googleapis.com/gcm/send -d '{"registration_ids":["<ߪಡID>", "<ߪಡID>", ...]}' 5FSNJOBMͳͲ
19. 1VTI
    /PUJGJDBUJPO
    JT $PNJOH
    4PPPPPPO $ISPNF͸ࠓ೥ͷ ݄ʹ͸ຊ֨ϦϦʔεʢͷ͸ͣʣ
20. $ISPNF
    
     ͱ͋Δ8FCαΠτͷϒϥ΢βγΣΞ
    ʢ೥݄ʣ
21. ·ͱΊ 㾎 ϒϥ΢βͷऑ఺͸ͲΜͲΜࠀ෰͞Ε͍ͯΔ
    㾎 164)௨஌͸͙ͦ͢͜ʂ
    㾎 ৘ใͷΩϟονΞοϓ͸ੵۃతʹ
    㾎 σϞίʔυ͸ͪ͜Βˣˣˣ IUUQTHJUIVCDPNZPIFJ.VOFZPIFJ.VOFHJUIVCJPUSFFNBTUFSQVTIOPUJpDBUJPO
22. IUUQHJUIVCDPNZPIFJ.VOF IUUQXXXZPIFJNOFU IUUQUXJUUFSDPNZPIFJ.VOF 5IBOL
    ZPV
    
    ;͒ΖʙΈʙ