Nuxt.jsから始めるPWA生活

gunmaweb 35 LT PWAネタ

Transcript

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