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 full-size slide

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

    View full-size slide

  7. 8FC"1*/PUJpDBUJPO

    View full-size slide

  8. IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC"1*OPUJpDBUJPO

    View full-size slide

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

    View full-size slide

  10. ௨஌ͷڐՄ

    View full-size slide

  11. ௨஌ͷදࣔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    4FSWJDF8PSLFS3FHJTUSBUJPOTIPX/PUJpDBUJPO

    View full-size slide

  16. 8FC"1*1VTI"1*


    4FSWJDF8PSLFS3FHJTUSBUJPO

    TIPX/PUJpDBUJPO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 4FSWJDF8PSLFS

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. JOEFYKT 4FSWJDF8PSLFSͷొ࿥

    8FCϖʔδ

    View full-size slide

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

    4FSWJDF

    8PSLFS

    View full-size slide

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

    4FSWJDF

    8PSLFS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    POQVTI

    View full-size slide

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

    View full-size slide

  39. JOEFYKT 4FSWJDF8PSLFSͷొ࿥

    8FCϖʔδ

    View full-size slide

  40. JOEFYKT 1VTI.BOBHFSΛऔಘ

    8FCϖʔδ

    View full-size slide

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

    8FCϖʔδ

    View full-size slide

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

    View full-size slide

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

    4FSWJDF

    8PSLFS

    View full-size slide

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

    4FSWJDF

    8PSLFS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide