ただしく学ぼうPWA

Transcript

1. 1.

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

2. 2.

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

3. 3.

   Google Pixel By Victor Stuber www.VictorStuber.com × PWA (C)KAGEROU PROJECTʗ1st

   PLACEʗEDWORD RECORDSʗpixiv
4. 4.

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

   ͸ࠓ͙ࣙ͢ΊΖʯ
 18"ͱ͸࣮ࡍͲ͏͍͏΋ͷͳͷ͔ɺ
 ೝ͕ࣝ;Θͬͱ͍ͯ͠Δ 18"ͬͯͪΌΜͱ஌ͬͯΔʁ 4
5. 5.

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

6. 6.

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

7. 7.

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

   7
8. 8.

   w ʮ3FBDU
   ͱ͔
   CBCFM
   ͱ͔࢖Θͳ͍ͱಋೖͰ͖ͳ͍ΜͰ͠ΐ ͏ʁʯ
   w ʮ࠷ۙͷ
   +BWB4DSJQU
   ࣄ৘͸Θ͔ΒΜʜɻʯ
   w ͦΜͳ͜ͱͳ͍Αʂ
   
   w ΋ͪΖΜ࠷৽ͷ
   +BWB4DSJQU
   Ͱͷ։ൃελΠϧ͕ಋೖ͞Εͯ Δͱ։ൃʹศརͳ෦෼͸͋Δ
   
   

   w Ͱ΋
   )5.-
   Ͱͪΐͬͱ֎෦ϑΝΠϧΛಡΈࠐΉͱ͜Ζ͔Β ಋೖͰ͖Δ Α͋͘Γͦ͏ͳ18"ͷΠϝʔδ 8
9. 9.

   18"ͷ࡞Γํ

10. 10.

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

11. 11.

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

    ৽͕͋Ε͹Ξοϓσʔτ͞ΕΔ ొ৔ਓ෺
    4FSWJDF
    8PSLFS 11
12. 12.

    ª 12 ྫ // sw.js self.addEventListener('install', (event) => { //

    install࣌ʹߦΘΕΔॲཧ… }); self.addEventListener('fetch', (event) => { // fetch࣌ʹߦΘΕΔॲཧ… }); w 4FSWJDF
    8PSLFSࣗମͷϥΠ ϑαΠΫϧʹ߹Θͤͯɺ
 Πϕϯτ͕ఆٛ͞Ε͍ͯΔ
13. 13.

    ª 13 Πϯετʔϧ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(function(registration)

    { // ొ࿥੒ޭ࣌ͷॲཧ }).catch(function(err) { // ొ࿥ࣦഊ࣌ͷॲཧ }); } w +BWB4DSJQUଆͰӈͷॲཧΛ ݺΜͰɺ4FSWJDF
    8PSLFS
    Λ 8FCαΠτʹΠϯετʔϧ ͢Δ
14. 14.

    w 4FSWJDF
    8PSLFS
    εΫϦϓτ͕ɺΠϯετʔϧ͍ͨ͠
 8FCαΠτͱಉ͡υϝΠϯͰఏڙ͞Ε͍ͯΔ
    w )5514
    ͰαΠτ͕ఏڙ͞Ε͍ͯΔ 4FSWJDF
    8PSLFSͷ੍໿ 14

15. 15.

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

16. 16.

    w JOTUBMM
    w 4FSWJDF
    8PSLFS͕Πϯετʔϧ͞ΕΔͱൃՐ
    w ΦϑϥΠϯରԠʹඞཁͳΞηοτΛΩϟογϡ͢Δࡍʹ Α͘࢖͏
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST

    IMKBTFSWJDF@XPSLFS@ ϥΠϑαΠΫϧΠϕϯτ
    
    JOTUBMM 16
17. 17.

    w BDUJWBUF
    w 4FSWJDF
    8PSLFS͕ߋ৽͞Εɺ༗ޮʹͳΔͱൃՐ
    w ҎલΠϯετʔϧͨ͠ΩϟογϡΛ࡟আ͢ΔࡍʹΑ͘࢖ ͏
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST

    IMKBVQEBUFBTFSWJDF XPSLFS ϥΠϑαΠΫϧΠϕϯτ
    
    BDUJWBUF 17
18. 18.

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

    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMT QSJNFSTTFSWJDFXPSLFST IMKB@ ϥΠϑαΠΫϧΠϕϯτ
    
    GFUDI 18
19. 19.

    w QVTI
    
    $ISPNF
    'JSFGPY
    POMZ
    w ֎෦͔ΒϓογϡϝοηʔδΛड͚ͨ࣌ʹൃՐ
    w TZOD
    0OFP⒎
    #BDLHSPVOE
    TZOD
    
    $ISPNF
    POMZ
    w

    όοΫάϥ΢ϯυͰͳΜΒ͔ͷॲཧΛߦ͏ΠϕϯτΛొ࿥Ͱ͖Δ
    w ྫ͑͹Կ͔ͷ
    ૹ৴
    ͕௨৴؀ڥ͕ѱࣦͯ͘ഊͨ͠ͷͰɺޙ͔ΒόοΫάϥ ΢ϯυͰϦτϥΠ͢Δ
    w TZOD
    1FSJPEJD
    #BDLHSPVOE
    TZOD
    
    JO
    %FTJHO
    w ॲཧΛొ࿥ͯ͠ఆظతʹ࣮ߦ͢Δɻ
    w ྫ͑͹ఆظతͳهࣄ΍ϝʔϧͷߋ৽νΣοΫ
    
    ௨஌
    w ଞʹ΋
    HFPGFODJOH
    ͱ͔͍Ζ͍ΖఏҊ͞Ε͍ͯΔ ͦͷଞͷΠϕϯτ 19
20. 20.

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

21. 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 MJOL
    SFMNBOJGFTU
    ISFGNBOJGFTUKTPO
22. 22.

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

23. 23.

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

24. 24.

    ओཁϒϥ΢βͷ࣮૷ঢ়گͱ
 ಈ޲
    ೥݄൛

25. 25.

    w 4FSWJDF
    8PSLFS
    
    ⭕
    w EFTLUPQ
    Ͱ΋
    NPCJMF
    Ͱ΋࢖͑Δɻ
    w 0OF0⒎
    #BDLHSPVOE
    4ZOD
    ͕།Ұ࢖͑Δɻ
    w 8FC
    "QQ
    .BOJGFTU
    
    ⭕
    w "OESPJEͷϗʔϜը໘ʹΠϯετʔϧͰ͖Δɻ
    

    w ೥൒͹·Ͱʹ
    EFTLUPQ
    Ͱ΋18"ΛΠϯετʔϧͰ͖ΔΑ͏ʹ͢ ΔΒ͍͠ɻ
    w 1VTI
    "1*
    
    ⭕
    w /PUJpDBUJPO
    "1*
    
    ⭕ $ISPNF
     25
26. 26.

    w 4FSWJDF
    8PSLFS
    
    ⭕
    w 8FC
    "QQ
    .BOJGFTU
    
    ❌
    w 'JSFGPY
    04͕ੜ͖͍ͯΕ͹ରԠ͞ΕͨΜͩΖ͏͔
    w 1VTI
    "1*
    
    ⭕
    w /PUJpDBUJPO
    "1*
    
    ⭕

    'JSF'PY
     26
27. 27.

    w 4FSWJDF
    8PSLFS
    
    ❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 8FC
    "QQ
    .BOJGFTU
    
    ❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 1VTI
    "1*
    
    ❌
    

    w ͪͳΈʹ
    EFTLUPQ
    ͷ
    TBGBSJ
    Ͱϓογϡ௨஌͕ૹΕΔ΍ͭ͸
    "QQMF
    1VTI
    /PUJpDBUJPO
    TFSWJDF
    Λ࢖ͬͨผ෺Ͱ͢
    w /PUJpDBUJPO
    "1*
    
    ⭕ 4BGBSJ
    NBD
    
    
    J04
     27
28. 28.

    w 4FSWJDF
    8PSLFS
    
    ❌
    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w 8FC
    "QQ
    .BOJGFTU
    
    ❌
    w কདྷతʹ8JOEPXT
    "QQ
    4UPSF
    ʹฒͿΑ͏ʹ͢ΔΒ͍͠
    w 1VTI
    "1*
    
    ❌
    

    w ࣍ͷόʔδϣϯͰདྷΔͧʂ
    w /PUJpDBUJPO
    "1*
    
    ⭕ &EHF
     28
29. 29.

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

30. 30.

    w QJYJW
    DIBUTUPSZ͸
    +BWB4DSJQU
    ͷϑΝΠϧΛ෼ׂͯ͠഑৴ͯ͠ ͍Δ
    w NBJOKT
    ͱɺ࠷ॳͷը໘ʹඞཁͳ෼Ҏ֎͸ɺը໘ભҠͨ࣌͠ ʹಡΈࠐΉ
    w σϓϩΠ͢Δͱ෼ׂϑΝΠϧ͕ߋ৽͞Ε໊ͯલ͕มΘΔ
    w ΞϓϦ͕ੜ͖͍ͯΔؒɺNBJOKT͕Ϧϩʔυ͞Εͳ͍ͷͰɺ෼

    ׂϑΝΠϧ͕ࢀরͰ͖ͳ͘ͳΔ
    w 18"͸ಛʹੜଘظ͕ؒ௕͍ͷͰɺٱ͠ͿΓʹΞϓϦΛ։͘ͱ Α͘ࢭ·ͬͯͨ 18"͸ੜଘ͕࣌ؒ௕͍ 30
31. 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
    ͷߋ৽αΠΫϧͱ
    4FSWJDF
    8PSLFSͷߋ৽αΠΫ ϧ͕ҧ͏ͷͰͨ·ʹ͜ͷઓུ ͸ࣦഊ͢Δ͕ɺ͍ͩͿϚγ
32. 32.

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

    32
33. 33.

    w ϦϦʔε౰ॳɺ18"൛͸"OESPJEʹΠϯετʔϧ͠ͳ͍ ͱ࢖͑ͳ͔ͬͨ
    w ʮ1$Ͱ΋ॻ͖͍ͨʂʯͱ͍͏ϥΠλʔ͞Μ͔Βͷ੠͕ɻ
    w ָউͩͱࢥ͕ͬͯͨɺࠓ·ͰϢʔβʔʹ63-Λݟ͍ͤͯ ͳ͔ͬͨฐ֐͕ʜ
    w ࠓ·Ͱ͋Γ͑ͳ͔ͬͨը໘ભҠͷରԠ
    

    w 6*ϑϨʔϜϫʔΫ͕૊Έཱ͍ͯͯͨมͳ63-Λഉআ
    w ݟੵ΋Γͱൺ΂͔ͯͳΓ΍Δ͜ͱ͕͋ͬͨ 1$൛ରԠʹ͍ͭͯ 33
34. 34.

    ·ͱΊ

35. 35.

    w ΦϑϥΠϯରԠͯ͠18"Խ͢Δ͘Β͍ͳΒ
 ͦΜͳʹ೉͘͠ͳ͍ɻ
    w ֤ϒϥ΢β͕͔ͳΓαϙʔτΛ࢝Ί͍ͯΔɻ
    w ΈΜͳ΋ͥͻࢼͯ͠ΈΑ͏ʂ ࠓ೔ͷ·ͱΊ 35

36. 36.

    ͓ΘΓ