Nuxt.jsから始めるPWA生活

gunmaweb 35 LT PWAネタ

Transcript

1. Nuxt.js͔Β࢝ΊΔPWAੜ׆
   Gunma.web #35
   Takashi Hori
   

   View Slide

2. ɾງ وࢺɹɹ@t_pori418
   ɾ܈അݝࡏॅ⁵౦ژ
   ɾWebΤϯδχΞ
   ɾ޿͘ઙ͘ͳΜͰ΋΍Γ·͢

   ɾγεςϜܥ, WebαʔϏεܥ
   

   View Slide

3. Έͳ͞ΜPWAɺ΍ͬͯ·͔͢ʁ
   

   View Slide

4. 
   ͋ʔPWAͶɺ஌ͬͯΔ஌ͬͯΔ

   ࠓྲྀߦͬͯΔΑͶ
   18"ͬͯԿ
   

   View Slide

5. PWAͱ͸
   

   View Slide

6. Progressive Web Apps
   Google͕ఏএ͢Δ΢ΣϒΞϓϦͰ

   UXΛ޲্ͤ͞ΔͨΊͷࢦ਑ɾ࢓૊Έ

   ωΠςΟϒͱಉ౳ͷମݧΛ༩͑ΔWebΞϓϦέʔγϣϯ

   

   

   web push͕༗໊Ͱ͕͢ɺPWAͷཁૉͷҰͭ
   

   View Slide

7. 
   ͋ʔ…ಥવҟੈքసੜͯ͠

   ಛघೳྗΛ༩͑ΒΕͯ

   PWA࣮૷ͷୡਓʹͳΒͳ͍͔ͳʔ
   

   View Slide

8. (ਆɾωɾ)ʻྗΛ༩͑Α͏
   

   View Slide

9. (ਆɾωɾ)ͭNuxt.js+PWA modules
   

   View Slide

10. 
    ͏͓͓͓͓͓
    

    View Slide

11. †׬੒†

    

    https://elated-knuth-617fed.netlify.com/
    

    View Slide

12. ࣮ࡍʹ͸͍Ζ͍Ζઃఆ͠·͢
    

    View Slide

13. manifest.json
    Service Worker
    Cache API
    Web push
    

    View Slide

14. ·ͣNuxt.jsΛೖΕ·͢
    $ yarn create nuxt-app
    

    View Slide

15. ݱࡏͷόʔδϣϯͩͱPWAαϙʔτ͕બ΂Δʂʂ
    

    View Slide

16. ద౰ʹ͜Μͳײ͡ʹ͠·ͨ͠
    

    View Slide

17. ࠷ॳ͔Β@nuxtjs/pwa͕ೖͬͯ·͢Ͷʂ
    

    View Slide

18. manifest.json
    Service Worker
    Cache API
    Web push
    

    View Slide

19. جຊతʹnuxt.config.jsΛॻ͖଍͍͖ͯ͠·͢
    

    View Slide

20. ϗʔϜը໘ʹ௥ՃͰΞϓϦԽʂ
    

    View Slide

21. manifest.json
    Service Worker
    Cache API
    Web push
    

    View Slide

22. ࠓճ͸͓ࢼ͠ͳͷͰconfigͷΩϟογϡΛͬ͘͟Γઃఆ
    

    View Slide

23. Ωϟογϡͨ͋͠ͱ͸αΫαΫʂ

    ϓϦΩϟογϡͰΦϑϥΠϯಈ࡞ʂ
    

    View Slide

24. manifest.json
    Service Worker
    Cache API
    Web push
    

    View Slide

25. Web push͸݁ߏ͍Ζ͍Ζ΍Δ͜ͱ
    ଟ͍ͷͰ·ͨࠓ౓
    iOSରԠͯ͠ͳ͍͠…
    

    View Slide

26. PWAͰ͖ͨ
    

    View Slide

27. ༨ஊ: iOSͭΒ͍໰୊
    

    View Slide

28. iOS12.2·Ͱ
    PWAԽͨ͠ΞϓϦɺϗʔϜը໘ʹ໭Δͱ࣍։͍ͨ࣌
    ϧʔτʹڧ੍ભҠ(reload)໰୊
    

    View Slide

29. iOS12.2͔Β
    ϧʔςΟϯά৘ใΛ࣋ͭΑ͏ʹͳͬͨʂ
    

    View Slide

30. ͱɺࢥ͍͖΍
    

    View Slide

31. Ωϟογϡͷόʔδϣϯ৘ใ(id)Λ

    ߋ৽ͯ͠΋։͖௚ͨ࣌͠ʹ

    ΞϓϦέʔγϣϯ͕࠷৽Խ͞Εͳ͍
    

    View Slide

32. ࠷৽൛iOSͰ΋͜ͷ໰୊͋Δ?
    ղܾࡦ͋Δํ৘ใ͓଴͓ͪͯ͠Γ·͢
    

    View Slide

33. ·ͱΊ
    

    View Slide

34. ಥવҟೳʹ͸໨֮Ί·ͤΜ͕

    ؆୯ͳͱ͜Ζ͔ΒPWAΛ

    ࢝ΊΒΕΔͷͰ

    ࢼͨ͜͠ͱͳ͍ํ͸ੋඇ!!
    

    View Slide