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

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

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. ωΠςΟϒΞϓϦͬΆ͍ ΢ΣϒΞϓϦ
19. ৽͍ٕ͠ज़͕ͨ͘͞Μ ͱ͍͏Θ͚Ͱ͸ͳ͍
20. ΞϓϦͰͰ͖Δ͜ͱΛ WebͰ΋࣮ݱՄೳʹ
21. Կ͸ͱ΋͋Ε৮ͬͯΈΑ͏
22. Twitter Lite 1. εϚϗͷϒϥ΢βͰTwitterΛ։͘ 2. ʮϗʔϜը໘ʹ௥Ճʯ 3. ϗʔϜը໘͔ΒΞΫηεˠεϓϥογϡը໘
23. Twitter Lite • Push௨஌ • ΦϑϥΠϯͰͷ࢖༻ • ωΠςΟϒΞϓϦͷػೳͷ΄ͱΜͲΛΧόʔ • ʮϗʔϜʹ௥Ճʯόφʔ
24. ྑͦ͞͏
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ͷ߲໨ΛνΣοΫ
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 ᶃ ᶄ
46. PWA͕Ͱ͖ͨʂ ʢhttps://goo.gl/VhzC5mʣ
47. ̍ʣεϓϥογϡ ̎ʣόφʔʢChromeʣ ̏ʣΦϑϥΠϯ
48. ͦΜͳʹ೉͘͠ͳͦ͞͏ ʢ̔෼Ͱ͜͜·ͰͰ͖ͨʣ
49. ·ͱΊ
50. PWA͍͍Ͷʂ
51. ͦΜͳʹ೉͘͠ͳͦ͞͏
52. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ