Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsから始めるPWA生活

thori
June 01, 2019

 Nuxt.jsから始めるPWA生活

gunmaweb 35 LT PWAネタ

thori

June 01, 2019
Tweet

More Decks by thori

Other Decks in Technology

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