Nuxt.jsから始める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Λ
 ࢝ΊΒΕΔͷͰ
 ࢼͨ͜͠ͱͳ͍ํ͸ੋඇ!!