Slide 1
Slide 1 text
Nuxt.js͔Β࢝ΊΔPWAੜ׆
Gunma.web #35
Takashi Hori
Slide 2
Slide 2 text
ɾງ وࢺɹɹ@t_pori418
ɾ܈അݝࡏॅ⁵౦ژ
ɾWebΤϯδχΞ
ɾ͘ઙ͘ͳΜͰΓ·͢
ɾγεςϜܥ, WebαʔϏεܥ
Slide 3
Slide 3 text
Έͳ͞ΜPWAɺͬͯ·͔͢ʁ
Slide 4
Slide 4 text
͋ʔPWAͶɺͬͯΔͬͯΔ
ࠓྲྀߦͬͯΔΑͶ
18"ͬͯԿ
Slide 5
Slide 5 text
PWAͱ
Slide 6
Slide 6 text
Progressive Web Apps
Google͕ఏএ͢ΔΣϒΞϓϦͰ
UXΛ্ͤ͞ΔͨΊͷࢦɾΈ
ωΠςΟϒͱಉͷମݧΛ༩͑ΔWebΞϓϦέʔγϣϯ
web push͕༗໊Ͱ͕͢ɺPWAͷཁૉͷҰͭ
Slide 7
Slide 7 text
͋ʔ…ಥવҟੈքసੜͯ͠
ಛघೳྗΛ༩͑ΒΕͯ
PWA࣮ͷୡਓʹͳΒͳ͍͔ͳʔ
Slide 8
Slide 8 text
(ਆɾωɾ)ʻྗΛ༩͑Α͏
Slide 9
Slide 9 text
(ਆɾωɾ)ͭNuxt.js+PWA modules
Slide 10
Slide 10 text
͏͓͓͓͓͓
Slide 11
Slide 11 text
††
https://elated-knuth-617fed.netlify.com/
Slide 12
Slide 12 text
࣮ࡍʹ͍Ζ͍Ζઃఆ͠·͢
Slide 13
Slide 13 text
manifest.json
Service Worker
Cache API
Web push
Slide 14
Slide 14 text
·ͣNuxt.jsΛೖΕ·͢
$ yarn create nuxt-app
Slide 15
Slide 15 text
ݱࡏͷόʔδϣϯͩͱPWAαϙʔτ͕બΔʂʂ
Slide 16
Slide 16 text
దʹ͜Μͳײ͡ʹ͠·ͨ͠
Slide 17
Slide 17 text
࠷ॳ͔Β@nuxtjs/pwa͕ೖͬͯ·͢Ͷʂ
Slide 18
Slide 18 text
manifest.json
Service Worker
Cache API
Web push
Slide 19
Slide 19 text
جຊతʹnuxt.config.jsΛॻ͖͍͖ͯ͠·͢
Slide 20
Slide 20 text
ϗʔϜը໘ʹՃͰΞϓϦԽʂ
Slide 21
Slide 21 text
manifest.json
Service Worker
Cache API
Web push
Slide 22
Slide 22 text
ࠓճ͓ࢼ͠ͳͷͰconfigͷΩϟογϡΛͬ͘͟Γઃఆ
Slide 23
Slide 23 text
Ωϟογϡͨ͋͠ͱαΫαΫʂ
ϓϦΩϟογϡͰΦϑϥΠϯಈ࡞ʂ
Slide 24
Slide 24 text
manifest.json
Service Worker
Cache API
Web push
Slide 25
Slide 25 text
Web push݁ߏ͍Ζ͍ΖΔ͜ͱ
ଟ͍ͷͰ·ͨࠓ
iOSରԠͯ͠ͳ͍͠…
Slide 26
Slide 26 text
PWAͰ͖ͨ
Slide 27
Slide 27 text
༨ஊ: iOSͭΒ͍
Slide 28
Slide 28 text
iOS12.2·Ͱ
PWAԽͨ͠ΞϓϦɺϗʔϜը໘ʹΔͱ࣍։͍ͨ࣌
ϧʔτʹڧ੍ભҠ(reload)
Slide 29
Slide 29 text
iOS12.2͔Β
ϧʔςΟϯάใΛ࣋ͭΑ͏ʹͳͬͨʂ
Slide 30
Slide 30 text
ͱɺࢥ͍͖
Slide 31
Slide 31 text
Ωϟογϡͷόʔδϣϯใ(id)Λ
ߋ৽ͯ͠։͖ͨ࣌͠ʹ
ΞϓϦέʔγϣϯ͕࠷৽Խ͞Εͳ͍
Slide 32
Slide 32 text
࠷৽൛iOSͰ͜ͷ͋Δ?
ղܾࡦ͋Δํใ͓͓ͪͯ͠Γ·͢
Slide 33
Slide 33 text
·ͱΊ
Slide 34
Slide 34 text
ಥવҟೳʹ֮Ί·ͤΜ͕
؆୯ͳͱ͜Ζ͔ΒPWAΛ
࢝ΊΒΕΔͷͰ
ࢼͨ͜͠ͱͳ͍ํੋඇ!!