モバイルネイティブアプリに代わる存在！？初めての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. ωΠςΟϒΞϓϦͬΆ͍ ΢ΣϒΞϓϦ

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