Nuxt.jsから始めるPWA生活

3130647b8df80ff6a8f40c1ea95382c2?s=47 thori
June 01, 2019

 Nuxt.jsから始めるPWA生活

gunmaweb 35 LT PWAネタ

3130647b8df80ff6a8f40c1ea95382c2?s=128

thori

June 01, 2019
Tweet

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Λ
 ࢝ΊΒΕΔͷͰ
 ࢼͨ͜͠ͱͳ͍ํ͸ੋඇ!!