Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Service Workerとブラウザでの通知について

Service Workerとブラウザでの通知について

Ehime.js #4の資料です。
https://ehimejs.connpass.com/event/162348/

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

January 22, 2020
Tweet

Transcript

  1. 4FSWJDF8PSLFSͱ ϒϥ΢βͷ௨஌ʹ͍ͭͯ &IJNFKT 5PTIJIJTB5PNBUTV

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV  αΠϘ΢ζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ۚ୔ˠ౦ژˠѪඤ &IJNFKT !UPTIJUPNB !UPTIJ@@UPNB 2

  3. None
  4. ࠷ۙɺ௨஌ΛٻΊΔαΠτ͕ଟ͘ͳ͖ͬͯͨ ▸ αΠτʹΞΫηεͨ͠ޙɺ௨஌ͷڐՄΛٻΊΔμΠΞϩά͕ग़ͨΒͲ͏͢Δʁ

  5. ▸ αΠτʹΞΫηεͨ͠ޙɺ௨஌ͷڐՄΛٻΊΔμΠΞϩά͕ग़ͨΒͲ͏͢Δʁ ▸ ͱΓ͋͑ͣʮ#MPDLʯ ▸ αʔϏεʹΑͬͯ͸ॏཁ ▸ ͦͷαʔϏεΛϝΠϯͰ͸࢖ͬͯͳ͍͚Ͳɺ௨஌͕དྷͨΒݟ͍ͨ ▸ ϦϚΠϯμʔػೳɺλΠϚʔػೳFUD

    ࠷ۙɺ௨஌ΛٻΊΔαΠτ͕ଟ͘ͳ͖ͬͯͨ
  6. ϒϥ΢βͰ௨஌Λग़͢ʹ͸ʁ

  7. ϒϥ΢βͰ௨஌Λग़͢ʹ͸ ▸ ํ๏ ▸ 8FC"1*/PUJpDBUJPO ▸ ํ๏ ▸ 8FC"1*1VTI"1*
 4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

  8. 8FC"1*/PUJpDBUJPO

  9. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*OPUJpDBUJPO

  10. ํ๏/PUJpDBUJPO ▸ /PUJpDBUJPOT"1*ͷ/PUJpDBUJPOΠϯλϑΣʔε ▸ σεΫτοϓ௨஌ͷઃఆ΍දࣔΛՄೳʹ͢Δ ▸ λϒΛ੾Γସ͑ͨΓɺผͷΞϓϦʹҠಈ͍ͯͯ͠΋0, ▸ ௨஌Λදࣔ͢Δʹ͸ɺݱࡏͷΦϦδϯʹରͯ͠ڐՄΛಘΔඞཁ͕͋Δ ▸

    $ISPNF 'JSFGPY 4BGBSJ
  11. ௨஌ͷڐՄ

  12. ௨஌ͷදࣔ

  13. ؆୯

  14. $ISPNF%FW5PPMTͷ$POTPMFͰ؆୯ʹࢼͤΔ ▸ 'JSFGPY͸$POTPMF͔ΒμΠΞϩάग़ͤͳ͔ͬͨ

  15. ͨͩ͠ɺ/PUJpDBUJPOΛग़ ͢+4Λ࣮ߦ͍ͯ͠ΔϖʔδΛ ։͍͓ͯ͘ඞཁ͕͋Δ

  16. ͭ·ΓɺͦͷϖʔδΛด͡Δ ͱ௨஌͞Εͳ͍

  17. ϒϥ΢βͰ௨஌Λग़͢ʹ͸ ▸ ํ๏ ▸ 8FC"1*/PUJpDBUJPO ▸ ํ๏ ▸ 8FC"1*1VTI"1*
 4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

  18. 8FC"1*1VTI"1*
  4FSWJDF8PSLFS3FHJTUSBUJPO
 TIPX/PUJpDBUJPO

  19. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*1VTI@"1*

  20. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

  21. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

  22. 4FSWJDF8PSLFS

  23. 4FSWJDF8PSLFS ▸ Ұൠతʹϒϥ΢βͰಈ͘+4͸ɺ8FCϖʔδͷϥΠϑαΠΫϧͰ࣮ߦ ▸ 4FSWJDF8PSLFS͸8FCϖʔδͱ͸ผʹϒϥ΢βͷόοΫάϥ΢ϯυͰಈ࡞ ͢Δ+4ͷ࣮ߦ؀ڥ Πϕϯτۦಈ 8FCϖʔδ 4FSWJDF8PSLFS +4

    +4 )5.- $44
  24. 4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨஌ ▸

    όοΫάϥ΢ϯυಉظ
  25. 4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨஌ ▸

    όοΫάϥ΢ϯυಉظ ϞόΠϧͬΆ͍ʂ →PWA
  26. Πϕϯτۦಈ 8FCϖʔδ 4FSWJDF8PSLFS αʔόʔ POGFUDI POQVTI POTZOD ΠϕϯτʹԠͯ͡ ॲཧ͢ΔΑ

  27. 4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨஌ ▸

    όοΫάϥ΢ϯυಉظ
  28. Ұൠతͳ8FCϖʔδ 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ BQQDTT͍ͩ͘͞ NBJOKT͍ͩ͘͞ ʹΞΫηε

  29. 8FCϖʔδXJUI4FSWJDF8PSLFS 8FCϖʔδ αʔόʔ JOEFYIUNM͍ͩ͘͞ ʹΞΫηε 4FSWJDF8PSLFS Cache͋Δ͔Βɺ ͔ͦͬͪΒฦ͢Ͷ $BDIF

  30. 8FCϖʔδXJUI4FSWJDF8PSLFS 8FCϖʔδ αʔόʔ GPPIUNM͍ͩ͘͞ GPPʹΞΫηε 4FSWJDF8PSLFS Cacheͳ͍͔Β αʔόʔʹϦΫΤετ $BDIF 'FUDI"1*

    GPPIUNM
  31. 4FSWJDF8PSLFSͰ ΦϑϥΠϯରԠͷ࣮૷ྫ

  32. JOEFYKT 4FSWJDF8PSLFSͷొ࿥ 8FCϖʔδ

  33. TXKT 4FSWJDF8PSLFSͷΠϯετʔϧΩϟογϡ࡞੒ 4FSWJDF
 8PSLFS

  34. TXKT GFUDIΠϕϯτΛΩϟονΩϟογϡ͔Βฦ͢ 4FSWJDF
 8PSLFS

  35. 4FSWJDF8PSLFS͕͋Δͱ ▸ ͜Ε·ͰͰ͖ͳ͔ͬͨ͜ͱ͕ՄೳʹͳΔ ▸ ྫ ▸ ΦϑϥΠϯମݧ ▸ ϓογϡ௨஌ ▸

    όοΫάϥ΢ϯυಉظ
  36. ํ๏1VTI"1*  4FSWJDF8PSLFS3FTJHUSBUJPOTIPX/PUJpDBUJPO ▸ 4FSWJDF8PSLFSΛར༻ͯ͠ϓογϡ௨஌Λ࣮ݱ ▸ 1VTI4FSWJDF͔Βͷϓογϡ௨஌Λड৴ͯ͠ɺσεΫτοϓ௨஌Λදࣔ͢Δ ▸ 4FSWJDF8PSLFSΛ࢖͏ͷͰɺϖʔδΛดͯ͡΋௨஌͕Մೳ ▸

    $ISPNF'JSFGPY
  37. 4FSWJDF8PSLFSΛ࢖͏͜ͱͰ ϓογϡ௨஌Λ࣮ݱ͢Δ

  38. 1VTI"1*ͱ/PUJpDBUJPOT"1*Ͱͷ࣮૷  4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ 4FSWJDF8PSLFS3FHJTUSBUJPO   4FSWJDF8PSLFS3FHJTUSBUJPOΦϒδΣΫτ͔Β1VTI.BOBHFSΛऔಘ  1VTI.BOBHFSͷTVCTDSJCFؔ਺ͰBQQMJDBUJPO4FSWFS,FZΛ౉͢ͱϓογϡͷߪಡ Λ։࢝

    ʙαʔόʔͰϓογϡαʔϏεʹϝοηʔδΛૹ৴ʙ  4FSWJDF8PSLFSͷPOQVTIͰ1VTI4FSWJDF͔Βͷϓογϡ௨஌Λड৴  /PUJpDBUJPOT"1*ͷ4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPOͰ௨஌Λ ग़͢
  39. ϓογϡ௨஌ͷͬ͘͟ΓΠϝʔδ
 ຊ౰͸ࣄલʹαʔόʔʹ1VTI4VCTDSJQUJPOΛૹ৴͓ͯ͘͠ 8FCϖʔδ αʔόʔ 4FSWJDF8PSLFS 1VTI4FSWJDF ྫ'$. POQVTI

  40. ΫϥΠΞϯτଆͷ ࣮૷ͷϙΠϯτ͚ͩൈਮ

  41. JOEFYKT 4FSWJDF8PSLFSͷొ࿥ 8FCϖʔδ

  42. JOEFYKT 1VTI.BOBHFSΛऔಘ 8FCϖʔδ

  43. JOEFYKT ϓογϡαʔϏεͷߪಡΛཁٻ 8FCϖʔδ

  44. "QQMJDBUJPO4FSWFS,FZͷ࡞੒ٴͼ1VTI௨஌Λ؆୯ʹࢼͤΔ IUUQTXFCQVTIDPEFMBCHMJUDINF

  45. TXKT QVTIΠϕϯτ͕དྷͨΒ௨஌Λग़͢ 4FSWJDF
 8PSLFS

  46. TXKT ௨஌ΛΫϦοΫͨ࣌͠ͷॲཧ΋࣮૷Մೳ 4FSWJDF
 8PSLFS

  47. ϖʔδΛดͯ͡΋௨஌

  48. αʔόʔଆͷ࣮૷͕ඞཁͳͷͰେม

  49. ·ͱΊ ▸ σεΫτοϓ௨஌Λग़͢৔߹ɺ/PUJpDBUJPOT"1*Λ࢖͏ ▸ ϖʔδ͕ดͯͯ͡΋௨஌Λग़͢ʹ͸ɺ4FSWJDF8PSLFSͷ1VTI"1*ͱ૊Έ߹ Θͤͯ࢖͏ αʔόʔαΠυͷ࣮૷͕ඞཁ  ▸ ϖʔδ͕։͍ͯΔ࣌ʹ௨஌Λग़͢ͳΒɺ/PUJpDBUJPOT"1*ͷ/PUJpDBUJPO

    ΠϯλϑΣʔεΛ࢖͑͹؆୯ʹग़ͤΔ ▸ ؆୯ʹ௨஌Λग़͗͢͠ΔͱϢʔβʔʹݏΘΕΔͷͰ࢖͍ํ͸஫ҙ
  50. ৄ͘͠஌Γ͍ͨਓ͸ ▸ 4FSWJDF8PSLFSͷ঺հc8FC'VOEBNFOUBMT ▸ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST IMKB ▸ 8FC1VTIΛʢͪΐͬͱʣৄ͘͠ղઆ͢ΔGVLVPLBQXB ▸

    IUUQTTQFBLFSEFDLDPNQJSPTJLJDLXFCQVTIXPUJZPUVUP YJBOHTJLVKJFTIVPTVSVOVNCFSGVLVPLBQXB