ただしく学ぼうPWA

Transcript

1. ֶͨͩ͘͠΅͏18"
   ikasoumen
   2018/03/29 ෱ԬPWAษڧձ #01
   

   View Slide

2. w JLBTPVNFO
   w UXJUUFS!@JLBTPVNFO
   w ϐΫγϒ෱ԬΦϑΟε
   w ͓ֆ͔͖ͱ8FCٕज़͕޷͖ͳΤϯδχΞͰ͢
   ࣗݾ঺հ
   2
   

   View Slide

3. Google Pixel
   By Victor Stuber
   www.VictorStuber.com
   ×
   PWA
   (C)KAGEROU PROJECTʗ1st PLACEʗEDWORD RECORDSʗpixiv
   

   View Slide

4. w ʮωΟςΟϒΞϓϦ͕ஔ͖׵ΘΔ͔΋ʜʯ
   w ʮͳΜ͔ΦϑϥΠϯͰ΋࢖͑Δͬͯฉ͖·ͨ͠ʂʯ
   w ʮ͋ΕͰ͠ΐɺϗʔϜը໘ʹ௥ՃͰ͖Δ΍ͭͰ͠ΐʁʯ
   w ʮ 6*͕ͻͲ͍͔Β
   18"͕དྷΔͬͯݴ͍ͬͯΔΤϯδχΞ
   ͸ࠓ͙ࣙ͢ΊΖʯ

   18"ͱ͸࣮ࡍͲ͏͍͏΋ͷͳͷ͔ɺ

   ೝ͕ࣝ;Θͬͱ͍ͯ͠Δ
   18"ͬͯͪΌΜͱ஌ͬͯΔʁ
   4
   

   View Slide

5. w 18"ͷ࡞ΓํͱɺͰ͖Δ͜ͱΛͪΌΜͱ஌Ζ͏
   w ֤ϒϥ΢βͷಈ޲
   w ࣮ࡍʹ͸·ͬͨ͜ͱ
   ࠓ೔࿩͢͜ͱ
   5
   

   View Slide

6. 18"1SPHSFTTJWF8FC"QQ
   6
   ϓϩάϨογϒɾΤϯϋϯεϝϯτ
   ϓϩάϨογϒΤϯϋϯεϝϯτ͸ɺ֩ͱͳΔίϯςϯπΛ࠷
   ॏཁࢹ͢Δ΢ΣϒσβΠϯઓུͰ͋Δɻ
   ͜ͷઓུͰ͸ɺΤϯυϢʔβʔͷϒϥ΢βʔ΍Πϯλʔωοτ
   ઀ଓʹ߹ΘͤͯɺϓϨθϯςʔγϣϯ໘΍ػೳ໘Ͱඍົʹҟͳ
   Δ಺༰΍ٕज़తʹࠔ೉ͳ಺༰Λίϯςϯπʹ઴࣍௥Ճ͍ͯ͘͠ɻ
   w IUUQTKBXJLJQFEJBPSHXJLJϓϩάϨογϒΤϯϋϯεϝϯτ
   

   View Slide

7. w ཁ͢Δʹ
   w ݹ͍ϒϥ΢βͰ΋جຊͱͳΔίϯςϯπΛݟΒΕΔ
   w ৽͍͠ϒϥ΢βͰ͋Ε͹ΑΓྑ͍ମݧ͕ಘΒΕΔ
   w طଘͷ8FCαΠταʔϏεΛஔ͖׵͑Δ·ͬͨ͘৽͍͠
   Կ͔ɺͱ͍͏Θ͚Ͱ͸ͳ͍
   18"1SPHSFTTJWF8FC"QQ
   7
   

   View Slide

8. w ʮ3FBDUͱ͔CBCFMͱ͔࢖Θͳ͍ͱಋೖͰ͖ͳ͍ΜͰ͠ΐ
   ͏ʁʯ
   w ʮ࠷ۙͷ+BWB4DSJQUࣄ৘͸Θ͔ΒΜʜɻʯ
   w ͦΜͳ͜ͱͳ͍Αʂ
   w ΋ͪΖΜ࠷৽ͷ+BWB4DSJQUͰͷ։ൃελΠϧ͕ಋೖ͞Εͯ
   Δͱ։ൃʹศརͳ෦෼͸͋Δ
   w Ͱ΋)5.-Ͱͪΐͬͱ֎෦ϑΝΠϧΛಡΈࠐΉͱ͜Ζ͔Β
   ಋೖͰ͖Δ
   Α͋͘Γͦ͏ͳ18"ͷΠϝʔδ
   8
   

   View Slide

9. 18"ͷ࡞Γํ
   

   View Slide

10. w ͋ͳͨͷ8FCαΠτΛ18"Խ͢ΔେࣄͳϝϯόʔͰ͢
    4FSWJDF8PSLFS
    8FC"QQ.BOJGFTU
    ొ৔ਓ෺
    10
    

    View Slide

11. w ௨ৗͷ+BWB4DSJQUͱ͸ҟͳΔϥΠϑαΠΫϧͰಈ࡞͢Δε
    ΫϦϓτ
    w 8FCαΠτʹΞΫηε͞ΕΔλΠϛϯάͰΠϯετʔϧ
    ͞ΕΔ
    w 8FCαΠτʹΞΫηεதͰͳͯ͘΋࣮ߦͰ͖Δ
    w ఆظతʹ4FSWJTF8PSLFSࣗମͷߋ৽͕νΣοΫ͞Εɺߋ
    ৽͕͋Ε͹Ξοϓσʔτ͞ΕΔ
    ొ৔ਓ෺4FSWJDF8PSLFS
    11
    

    View Slide

12. ª
    12
    ྫ
    // sw.js
    self.addEventListener('install', (event) => {
    // install࣌ʹߦΘΕΔॲཧ…
    });
    self.addEventListener('fetch', (event) => {
    // fetch࣌ʹߦΘΕΔॲཧ…
    });
    w 4FSWJDF8PSLFSࣗମͷϥΠ
    ϑαΠΫϧʹ߹Θͤͯɺ

    Πϕϯτ͕ఆٛ͞Ε͍ͯΔ
    

    View Slide

13. ª
    13
    Πϯετʔϧ
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {
    // ొ࿥੒ޭ࣌ͷॲཧ
    }).catch(function(err) {
    // ొ࿥ࣦഊ࣌ͷॲཧ
    });
    }
    w +BWB4DSJQUଆͰӈͷॲཧΛ
    ݺΜͰɺ4FSWJDF8PSLFSΛ
    8FCαΠτʹΠϯετʔϧ
    ͢Δ
    

    View Slide

14. w 4FSWJDF8PSLFSεΫϦϓτ͕ɺΠϯετʔϧ͍ͨ͠

    8FCαΠτͱಉ͡υϝΠϯͰఏڙ͞Ε͍ͯΔ
    w )5514ͰαΠτ͕ఏڙ͞Ε͍ͯΔ
    4FSWJDF8PSLFSͷ੍໿
    14
    

    View Slide

15. w 4FSWJDF8PSLFSΛΠϯετʔϧͨ͠8FCαΠτʹ

    ࠶౓ΞΫηε͢ΔͳͲͷλΠϛϯάͰɺ4FSWJDF8PSLFS͕
    ߋ৽͞Ε͍ͯͳ͍͔όοΫάϥ΢ϯυͰνΣοΫ͞ΕΔɻ
    w ࠷৽൛͕͋ͬͨ৔߹ʹ͸ɺجຊతʹ࣍ͷΞΫηε͔Βͦͷ
    4FSWJDF8PSLFSΛ࢖͏ɻ͙͢ʹ࢖͏͜ͱ΋Ͱ͖Δɻ
    4FSWJTF8PSLFSͷΞοϓσʔτ
    15
    

    View Slide

16. w JOTUBMM
    w 4FSWJDF8PSLFS͕Πϯετʔϧ͞ΕΔͱൃՐ
    w ΦϑϥΠϯରԠʹඞཁͳΞηοτΛΩϟογϡ͢Δࡍʹ
    Α͘࢖͏
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT
    QSJNFSTTFSWJDFXPSLFST IMKBTFSWJDF@XPSLFS@
    ϥΠϑαΠΫϧΠϕϯτJOTUBMM
    16
    

    View Slide

17. w BDUJWBUF
    w 4FSWJDF8PSLFS͕ߋ৽͞Εɺ༗ޮʹͳΔͱൃՐ
    w ҎલΠϯετʔϧͨ͠ΩϟογϡΛ࡟আ͢ΔࡍʹΑ͘࢖
    ͏
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT
    QSJNFSTTFSWJDFXPSLFST IMKBVQEBUFBTFSWJDF
    XPSLFS
    ϥΠϑαΠΫϧΠϕϯτBDUJWBUF
    17
    

    View Slide

18. w GFUDI
    w Πϯετʔϧ͞Εͨ8FCαΠτ͕ߦ͏શͯͷϦΫΤετʹ
    ରͯ͠ൃՐ
    w ֎෦΁ͷϦΫΤετͱϨεϙϯεʹԿ͔ॲཧΛ͔͚ΒΕΔ
    w ಛఆ63-ͷϦΫΤετͱϨεϙϯεΛΩϟογϡ͢Δࡍʹ
    Α͘࢖͏
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT
    QSJNFSTTFSWJDFXPSLFST IMKB@
    ϥΠϑαΠΫϧΠϕϯτGFUDI
    18
    

    View Slide

19. w QVTI$ISPNF 'JSFGPYPOMZ
    w ֎෦͔ΒϓογϡϝοηʔδΛड͚ͨ࣌ʹൃՐ
    w TZOD 0OFP⒎#BDLHSPVOETZOD
    $ISPNFPOMZ
    w όοΫάϥ΢ϯυͰͳΜΒ͔ͷॲཧΛߦ͏ΠϕϯτΛొ࿥Ͱ͖Δ
    w ྫ͑͹Կ͔ͷૹ৴͕௨৴؀ڥ͕ѱࣦͯ͘ഊͨ͠ͷͰɺޙ͔ΒόοΫάϥ
    ΢ϯυͰϦτϥΠ͢Δ
    w TZOD 1FSJPEJD#BDLHSPVOETZOD
    JO%FTJHO
    w ॲཧΛొ࿥ͯ͠ఆظతʹ࣮ߦ͢Δɻ
    w ྫ͑͹ఆظతͳهࣄ΍ϝʔϧͷߋ৽νΣοΫ௨஌
    w ଞʹ΋HFPGFODJOHͱ͔͍Ζ͍ΖఏҊ͞Ε͍ͯΔ
    ͦͷଞͷΠϕϯτ
    19
    

    View Slide

20. w 8FCαΠτΛΞϓϦέʔγϣϯͱͯ͠ѻ͏࣌ͷઃఆΛهड़
    Ͱ͖ΔɺKTPOܗࣜͷϑΝΠϧ
    ొ৔ਓ෺8FC"QQ.BOJGFTU
    20
    

    View Slide

21. ª
    21
    ྫ
    //manifest.json
    {
    "name": "pixiv chatstory",
    "short_name": "chatstory",
    "start_url": ".",
    "display": "standalone",
    "orientation": "portrait",
    "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
    }],
    "background_color": "#FFFFFF",
    "theme_color": "#FFFFFF"
    }
    w lEJTQMBZzϓϩύςΟͰϒϥ
    ΢βͷϔομʔΛඇදࣔʹ
    ͢ΔʜͳͲͷઃఆΛ͢Δɻ
    w ͋ͱ͸IUNMଆͰ
    NBOJGFTUKTPOΛಡΈࠐΉ
    w MJOLSFMNBOJGFTU
    ISFGNBOJGFTUKTPO
    

    View Slide

22. ͜ΕͰ18"ʹͳΓ·ͨ͠ʂ
    

    View Slide

23. 4FSWJDF8PSLFSΛ༻ҙͯ͠+4͔ΒಡΈࠐΉ
    8FC"QQ.BOJGFTUΛ༻ҙͯ͠IUNM͔ΒಡΈࠐΉ
    Ͷɺ؆୯Ͱ͠ΐ͏ʁ
    ·ͱΊΔͱ
    23
    

    View Slide

24. ओཁϒϥ΢βͷ࣮૷ঢ়گͱ

    ಈ޲ ೥݄൛
    
    

    View Slide

25. w 4FSWJDF8PSLFS⭕
    w EFTLUPQͰ΋NPCJMFͰ΋࢖͑Δɻ
    w 0OF0⒎#BDLHSPVOE4ZOD͕།Ұ࢖͑Δɻ
    w 8FC"QQ.BOJGFTU⭕
    w "OESPJEͷϗʔϜը໘ʹΠϯετʔϧͰ͖Δɻ
    w ೥൒͹·ͰʹEFTLUPQͰ΋18"ΛΠϯετʔϧͰ͖ΔΑ͏ʹ͢
    ΔΒ͍͠ɻ
    w 1VTI"1*⭕
    w /PUJpDBUJPO"1*⭕
    $ISPNF
    25
    

    View Slide

26. w 4FSWJDF8PSLFS⭕
    w 8FC"QQ.BOJGFTU❌
    w 'JSFGPY04͕ੜ͖͍ͯΕ͹ରԠ͞ΕͨΜͩΖ͏͔
    w 1VTI"1*⭕
    w /PUJpDBUJPO"1*⭕
    'JSF'PY
    26
    

    View Slide

27. w 4FSWJDF8PSLFS❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 8FC"QQ.BOJGFTU❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 1VTI"1*❌
    w ͪͳΈʹEFTLUPQͷTBGBSJͰϓογϡ௨஌͕ૹΕΔ΍ͭ͸
    "QQMF1VTI/PUJpDBUJPOTFSWJDFΛ࢖ͬͨผ෺Ͱ͢
    w /PUJpDBUJPO"1*⭕
    4BGBSJ NBDJ04
    
    27
    

    View Slide

28. w 4FSWJDF8PSLFS❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 8FC"QQ.BOJGFTU❌
    w কདྷతʹ8JOEPXT"QQ4UPSFʹฒͿΑ͏ʹ͢ΔΒ͍͠
    w 1VTI"1*❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w /PUJpDBUJPO"1*⭕
    &EHF
    28
    

    View Slide

29. ࣮ࡍʹӡ༻ͯ͠Δ͜ͱ
    ٧·ͬͨ͜ͱ
    

    View Slide

30. w QJYJWDIBUTUPSZ͸+BWB4DSJQUͷϑΝΠϧΛ෼ׂͯ͠഑৴ͯ͠
    ͍Δ
    w NBJOKTͱɺ࠷ॳͷը໘ʹඞཁͳ෼Ҏ֎͸ɺը໘ભҠͨ࣌͠
    ʹಡΈࠐΉ
    w σϓϩΠ͢Δͱ෼ׂϑΝΠϧ͕ߋ৽͞Ε໊ͯલ͕มΘΔ
    w ΞϓϦ͕ੜ͖͍ͯΔؒɺNBJOKT͕Ϧϩʔυ͞Εͳ͍ͷͰɺ෼
    ׂϑΝΠϧ͕ࢀরͰ͖ͳ͘ͳΔ
    w 18"͸ಛʹੜଘظ͕ؒ௕͍ͷͰɺٱ͠ͿΓʹΞϓϦΛ։͘ͱ
    Α͘ࢭ·ͬͯͨ
    18"͸ੜଘ͕࣌ؒ௕͍
    30
    

    View Slide

31. ª
    31
    8PSLCPY
    const fileManifest = [
    {
    "url": "build/
    0.8ffe61fe0eafb69265e2.chunk.js",
    "revision": "0871a6351e2bb4f7fcab7b904ca634b6"
    },
    //
    // ………
    //
    {
    "url": "build/
    12.8e85e96102ac9de0a826.chunk.js",
    "revision": "c95d8d7a1a3d94bbee1b864c578cdd44"
    },
    ];
    const workboxSW = new self.WorkboxSW();
    workboxSW.precache(fileManifest);
    w XFCQBDLΛ௨ͯ͠4FSWJDF
    8PSLFSͷKTϑΝΠϧΛࣗಈ
    ੜ੒Ͱ͖Δ
    w ෼ׂͨ͠KTϑΝΠϧΛJOTUBMM
    ࣌ʹΩϟογϡ͢ΔΑ͏ʹ͠
    ͨ
    w NBJOKTͷߋ৽αΠΫϧͱ
    4FSWJDF8PSLFSͷߋ৽αΠΫ
    ϧ͕ҧ͏ͷͰͨ·ʹ͜ͷઓུ
    ͸ࣦഊ͢Δ͕ɺ͍ͩͿϚγ
    

    View Slide

32. w ࣍ճىಈ࣌͸࠷ޙʹډͨ63-͔ΒΞϓϦΛ࠶։͠Α͏ͱ
    ͢Δ
    w Πϯετʔϧͯ͠ͳ͍ͱ౸ୡͰ͖ͳ͍63-͸ϦϥΠτ͠
    ͳ͍खൈ͖Λͯͨ͠Βɺී௨ʹʹͳͬͨ
    w ͪΌΜͱ41"ʹ͠·͠ΐ͏ɻQJYJWDIBUTUPSZ͸'JSFCBTF
    )PTUJOHʹϦϥΠτͯ͠΋Β͍ͬͯ·͢ɻ
    "OESPJEʹΠϯετʔϧͨ͠18"͕Ωϧ͞ΕΔͱʜ
    32
    

    View Slide

33. w ϦϦʔε౰ॳɺ18"൛͸"OESPJEʹΠϯετʔϧ͠ͳ͍
    ͱ࢖͑ͳ͔ͬͨ
    w ʮ1$Ͱ΋ॻ͖͍ͨʂʯͱ͍͏ϥΠλʔ͞Μ͔Βͷ੠͕ɻ
    w ָউͩͱࢥ͕ͬͯͨɺࠓ·ͰϢʔβʔʹ63-Λݟ͍ͤͯ
    ͳ͔ͬͨฐ֐͕ʜ
    w ࠓ·Ͱ͋Γ͑ͳ͔ͬͨը໘ભҠͷରԠ
    w 6*ϑϨʔϜϫʔΫ͕૊Έཱ͍ͯͯͨมͳ63-Λഉআ
    w ݟੵ΋Γͱൺ΂͔ͯͳΓ΍Δ͜ͱ͕͋ͬͨ
    1$൛ରԠʹ͍ͭͯ
    33
    

    View Slide

34. ·ͱΊ
    

    View Slide

35. w ΦϑϥΠϯରԠͯ͠18"Խ͢Δ͘Β͍ͳΒ

    ͦΜͳʹ೉͘͠ͳ͍ɻ
    w ֤ϒϥ΢β͕͔ͳΓαϙʔτΛ࢝Ί͍ͯΔɻ
    w ΈΜͳ΋ͥͻࢼͯ͠ΈΑ͏ʂ
    ࠓ೔ͷ·ͱΊ
    35
    

    View Slide

36. ͓ΘΓ
    

    View Slide