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

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

Transcript

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

   View Slide

2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV
   
   αΠϘ΢ζגࣜձࣾ
   ϑϩϯτΤϯυΤΩεύʔτνʔϜ
   ۚ୔ˠ౦ژˠѪඤ
   &IJNFKT
   !UPTIJUPNB
   !UPTIJ@@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*1VTI@"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