モバイルネイティブアプリに代わる存在!?初めてのPWA

7f95c0d13932eae764819dbeb5f895fc?s=47 tsukun
July 08, 2018

 モバイルネイティブアプリに代わる存在!?初めてのPWA

HTML5 APP CONFERENCE 2018で使用
・PWAと出会ったきっかけ
・PWAとは?
・PWAを作ってみる

7f95c0d13932eae764819dbeb5f895fc?s=128

tsukun

July 08, 2018
Tweet

Transcript

  1. ϞόΠϧωΠςΟϒΞϓϦʹ มΘΔଘࡏʂʁॳΊͯͷ18" גࣜձࣾιχοΫΨʔσϯ໺ຊ࢘

  2. ײ૝࣭໰͸ͪ͜Β http://bit.ly/2J131L2

  3. ࣗݾ঺հ • ໺ຊ ࢘ʢͷ΋ͱ ͔ͭ͞ʣ • גࣜձࣾιχοΫΨʔσϯ • ฌݿݝ໌ੴࢢग़਎ʢ໌ੴͰϦϞʔτۈ຿ʣ •

    ೥ؒ1/3ΛՈͰա͝͞ͳ͍ • 24ࡀ
  4. ࠓ೔࿩͍ͨ͜͠ͱ • PWA͍͍Ͷʂ • ࡞Δͷ΋ͦΜͳʹ೉͘͠ͳ͍

  5. ॳ৺ऀϨϕϧ

  6. ϓϩάϥϛϯάܦݧ ̍೥ͪΐͬͱ

  7. HTMLͬͯԿʁ Rubyͬͯ͋ͷๅੴͷʁ

  8. ̍೥ֶؒश

  9. WebΞϓϦʢͬΆ͍΋ͷʣ Λ࡞ΕΔΑ͏ʹ

  10. ࣅͨΑ͏ͳϊϦͰ ϞόΠϧΞϓϦ΋͍͚Δ΍Ζ ʢ҆௚ʣ

  11. ίʔυผͳͷ…ʂʁ ( ƅЧƅʀ))ŜƄŦŜƄŦ

  12. …͠͹Β͘໎૸ɻ

  13. ༑ୡʮ̏ͭͱ΋Ұؾʹ࡞ΕΔ ํ๏͕͋ΔͰʯ(ʉ㲆ʉ)v

  14. PWAͳΒ…ʁ

  15. PWAͱ͸ʁ

  16. Progressive Web App ʢਐาతͳɺֵ৽తͳʣ

  17. ωΠςΟϒΞϓϦͬΆ͍ ΢ΣϒΞϓϦ

  18. None
  19. ৽͍ٕ͠ज़͕ͨ͘͞Μ ͱ͍͏Θ͚Ͱ͸ͳ͍

  20. ΞϓϦͰͰ͖Δ͜ͱΛ WebͰ΋࣮ݱՄೳʹ

  21. Կ͸ͱ΋͋Ε৮ͬͯΈΑ͏

  22. Twitter Lite 1. εϚϗͷϒϥ΢βͰTwitterΛ։͘ 2. ʮϗʔϜը໘ʹ௥Ճʯ 3. ϗʔϜը໘͔ΒΞΫηεˠεϓϥογϡը໘

  23. Twitter Lite • Push௨஌ • ΦϑϥΠϯͰͷ࢖༻ • ωΠςΟϒΞϓϦͷػೳͷ΄ͱΜͲΛΧόʔ • ʮϗʔϜʹ௥Ճʯόφʔ

  24. ྑͦ͞͏

  25. None
  26. ݁ՌʢҎલͷϞόΠϧ൛ͱൺֱʣ • ηογϣϯຖͷϖʔδӾཡ65%↑ • ௚ؼ཰20%↓ • ౤ߘ75%↑ ϗʔϜը໘͔ΒΞϓϦͬΆ͘࢖͏Α͏ʹͳͬͨ

  27. ָఱϨγϐ 1Ϣʔβʔ͋ͨΓͷPV3.1ഒˢ

  28. ͻΐͬͱ͢Δͱ…ʁ

  29. PWA͍͍Ͷʂ

  30. Ͱ΋… ৭ʑ໘౗ष͍Μ͡Όͳ͍ͷʁ

  31. ࢲͰ΋Ͱ͖ͨ

  32. ͲΕ͘Β͍؆୯͔ʁ

  33. ࠓ͔ΒPWAΛ࡞Δ༷ࢠΛ ͓ݟͤ͠·͢ʂʂʂ

  34. ͱࢥ͚ͬͨͲɺ ා͍ͷͰಈըͰɻ

  35. Progressive Web App Checklist • Google͕ఏএ • PWAͱͯ͠ຬͨ͢΂͖߲໨ • BaselineͱExemplaryͷ̎ஈ֊

  36. ✔ αΠτ͕ HTTPS Ͱఏڙ͞Ε͍ͯΔ͜ͱ ✔ λϒϨοτɾϞόΠϧʹ࠷దԽ͞Ε͍ͯΔ͜ ͱ ✔ ։࢝஍఺ͷURL͸ΦϑϥΠϯͰ΋ϩʔυͰ͖ Δ͜ͱ

    ✔ ϗʔϜը໘ʹ௥Ճ͢ΔͨΊͷϝλσʔλ͕ఏ ڙ͞Ε͍ͯΔ͜ͱ
  37. ✔ 3G ճઢͰ΋ߴ଎ʹಡΈࠐΊΔ͜ͱ (10 ඵҎ ಺ʹૢ࡞Մೳ) ✔ Ϋϩεϒϥ΢βͰಈ͘͜ͱ ✔ ϖʔδભҠ͕ωοτϫʔΫʹΑͬͯϒϩοΫ

    ͞Ε͍ͯΔΑ͏ʹݟ͑ͳ͍͜ͱ ✔ ͦΕͧΕͷϖʔδ͕ URL Λ࣋ͭ͜ͱ
  38. Lighthouse • Google͕ఏڙ • WebΞϓϦͷ඼࣭είΞΛࢉग़͢Δπʔϧ • Baselineͷ߲໨ΛνΣοΫ

  39. None
  40. ࠓճ࡞Δ΋ͷ

  41. Service Worker • ϒϥ΢β͕WebΞϓϦͱ͸ผʹόοΫάϥ΢ ϯυͰ࣮ߦ͢ΔεΫϦϓτ • APIͱͷ૊Έ߹ΘͤͰΩϟογϡɺPush௨஌ͳ ͲΛ࣮ݱ

  42. App Manifest • ΞϓϦࣗ਎ͷઃఆϑΝΠϧ • ΞϓϦͷ໊લ΍ΞΠίϯΛઃఆ • html಺ͰಡΈࠐΈ

  43. ࢖͏΋ͷ • Firebase - BaaSʢࠓճ͸HostingͷΈ࢖༻ʣ • Vue.js - JSϑϨʔϜϫʔΫ •

    Vuetify.js - ίϯϙʔωϯτϑϨʔϜϫʔΫʢࠓ ճ͸PWA༻ͷςϯϓϨʔτΛ࢖༻ʣ
  44. 'JSFCBTF )PTUJOH 4FSWJDF 8PSLFS 7VFUJGZ "QQ .BOJGFTU 0UIFST ᶃ ᶄ

  45. None
  46. PWA͕Ͱ͖ͨʂ ʢhttps://goo.gl/VhzC5mʣ

  47. ̍ʣεϓϥογϡ ̎ʣόφʔʢChromeʣ ̏ʣΦϑϥΠϯ

  48. ͦΜͳʹ೉͘͠ͳͦ͞͏ ʢ̔෼Ͱ͜͜·ͰͰ͖ͨʣ

  49. ·ͱΊ

  50. PWA͍͍Ͷʂ

  51. ͦΜͳʹ೉͘͠ͳͦ͞͏

  52. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ