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/

Toshihisa Tomatsu

January 22, 2020
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

Transcript

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

    View Slide

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV

    αΠϘ΢ζגࣜձࣾ
    ϑϩϯτΤϯυΤΩεύʔτνʔϜ
    ۚ୔ˠ౦ژˠѪඤ
    &IJNFKT
    !UPTIJUPNB
    [email protected]@UPNB
    2

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

  6. ϒϥ΢βͰ௨஌Λग़͢ʹ͸ʁ

    View Slide

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

    4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

    View Slide

  8. 8FC"1*/PUJpDBUJPO

    View Slide

  9. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*OPUJpDBUJPO

    View Slide

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

    View Slide

  11. ௨஌ͷڐՄ

    View Slide

  12. ௨஌ͷදࣔ

    View Slide

  13. ؆୯

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

    View Slide

  18. 8FC"1*1VTI"1*


    4FSWJDF8PSLFS3FHJTUSBUJPO

    TIPX/PUJpDBUJPO

    View Slide

  19. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*[email protected]"1*

    View Slide

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

    View Slide

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

    View Slide

  22. 4FSWJDF8PSLFS

    View Slide

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

    8FCϖʔδ
    4FSWJDF8PSLFS
    +4
    +4
    )5.-
    $44

    View Slide

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

    View Slide

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

    View Slide

  26. Πϕϯτۦಈ
    8FCϖʔδ 4FSWJDF8PSLFS αʔόʔ
    POGFUDI
    POQVTI
    POTZOD
    ΠϕϯτʹԠͯ͡
    ॲཧ͢ΔΑ

    View Slide

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

    View Slide

  28. Ұൠతͳ8FCϖʔδ
    8FCϖʔδ
    αʔόʔ
    JOEFYIUNM͍ͩ͘͞
    BQQDTT͍ͩ͘͞
    NBJOKT͍ͩ͘͞
    ʹΞΫηε

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. JOEFYKT 4FSWJDF8PSLFSͷొ࿥

    8FCϖʔδ

    View Slide

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

    4FSWJDF

    8PSLFS

    View Slide

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

    4FSWJDF

    8PSLFS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. 1VTI"1*ͱ/PUJpDBUJPOT"1*Ͱͷ࣮૷
    4FSWJDF8PSLFSΛΠϯετʔϧ͢Δ 4FSWJDF8PSLFS3FHJTUSBUJPO

    4FSWJDF8PSLFS3FHJTUSBUJPOΦϒδΣΫτ͔Β1VTI.BOBHFSΛऔಘ
    1VTI.BOBHFSͷTVCTDSJCFؔ਺ͰBQQMJDBUJPO4FSWFS,FZΛ౉͢ͱϓογϡͷߪಡ
    Λ։࢝
    ʙαʔόʔͰϓογϡαʔϏεʹϝοηʔδΛૹ৴ʙ
    4FSWJDF8PSLFSͷPOQVTIͰ1VTI4FSWJDF͔Βͷϓογϡ௨஌Λड৴
    /PUJpDBUJPOT"1*ͷ4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPOͰ௨஌Λ
    ग़͢

    View Slide

  39. ϓογϡ௨஌ͷͬ͘͟ΓΠϝʔδ

    ຊ౰͸ࣄલʹαʔόʔʹ1VTI4VCTDSJQUJPOΛૹ৴͓ͯ͘͠

    8FCϖʔδ αʔόʔ
    4FSWJDF8PSLFS
    1VTI4FSWJDF ྫ'$.

    POQVTI

    View Slide

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

    View Slide

  41. JOEFYKT 4FSWJDF8PSLFSͷొ࿥

    8FCϖʔδ

    View Slide

  42. JOEFYKT 1VTI.BOBHFSΛऔಘ

    8FCϖʔδ

    View Slide

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

    8FCϖʔδ

    View Slide

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

    View Slide

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

    4FSWJDF

    8PSLFS

    View Slide

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

    4FSWJDF

    8PSLFS

    View Slide

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

    View Slide

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

    View Slide

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

    ▸ ϖʔδ͕։͍ͯΔ࣌ʹ௨஌Λग़͢ͳΒɺ/PUJpDBUJPOT"1*ͷ/PUJpDBUJPO
    ΠϯλϑΣʔεΛ࢖͑͹؆୯ʹग़ͤΔ
    ▸ ؆୯ʹ௨஌Λग़͗͢͠ΔͱϢʔβʔʹݏΘΕΔͷͰ࢖͍ํ͸஫ҙ

    View Slide

  50. ৄ͘͠஌Γ͍ͨਓ͸
    ▸ 4FSWJDF8PSLFSͷ঺հc8FC'VOEBNFOUBMT
    ▸ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT
    QSJNFSTTFSWJDFXPSLFST IMKB
    ▸ 8FC1VTIΛʢͪΐͬͱʣৄ͘͠ղઆ͢ΔGVLVPLBQXB
    ▸ IUUQTTQFBLFSEFDLDPNQJSPTJLJDLXFCQVTIXPUJZPUVUP
    YJBOHTJLVKJFTIVPTVSVOVNCFSGVLVPLBQXB

    View Slide