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