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

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

tsukun
July 08, 2018

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

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

tsukun

July 08, 2018
Tweet

More Decks by tsukun

Other Decks in Programming

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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ