モバイルWeb開発最前線 -PWA開発パターン「PRPL」の紹介-

PWAとPRPLの話

Transcript

1. ϞόΠϧWeb։ൃ࠷લઢ
 ʔ PWA։ൃύλʔϯʮPRPLʯͷ঺հ ʔ @maechabin
2. Webۀքʹ͓͚Δ
 2016೥ͷτϨϯυ͸ʁ
3. PWA
4. Progressive Web Apps
 ϓϩάϨογϒɾ΢ΣϒΞϓϦ
5. PWAͱ͸ʁ 2015೥11݄ʹChrome Dev SummitͰGoogle͕ ఏএͨ͠ʮ΢ΣϒͱΞϓϦͷ྆ํͷར఺Λ݉Ͷ උ͑ͨϞόΠϧWebΞϓϦʯͷ͜ͱ • ϒϥ΢βͰར༻Ͱ͖ΔʢΠϯετʔϧෆՄʣ • ΦϑϥΠϯͰ΋ಈ͘ • ωΠςΟϒΞϓϦͷΑ͏ʹϓογϡ௨஌͕ૹΕΔ • εϚϗͷϗʔϜը໘ʹΞΠίϯͱ͓͚ͯ͠Δ
6. PWAͷಛ௃ʢৄࡉʣ • ஈ֊త: ϓϩάϨογϒɾΤϯϋϯεϝϯτΛجຊཧ೦ͱͨ͠ΞϓϦͰ͋ΔͨΊɺ ϒϥ΢βʹؔ܎ͳ͘ɺ͢΂ͯ ͷϢʔβʔʹར༻ͯ͠΋Β͑·͢ɻ • Ϩεϙϯγϒ: ύιίϯͰ΋ϞόΠϧͰ΋λϒϨοτͰ΋ɺ࣍ੈ୅ͷ୺຤Ͱ΋ɺ ͋ΒΏΔϑΥʔϜϑΝΫλʹద ߹͠·͢ɻ • ωοτϫʔΫ઀ଓʹґଘ͠ͳ͍: Service Worker ͷ׆༻ʹΑΓɺΦϑϥΠϯͰ΋ɺ ωοτϫʔΫ؀ڥ͕ྑ͘ͳ͍ ৔ॴͰ΋ಈ࡞͠·͢ɻ • ΞϓϦײ֮: App Shell Ϟσϧʹج͍ͮͯ࡞ΒΕ͍ͯΔͨΊɺΞϓϦײ֮Ͱૢ࡞Ͱ͖·͢ɻ • ৗʹ࠷৽: Service Worker ͷߋ৽ϓϩηεʹΑΓɺৗʹ࠷৽ͷঢ়ଶʹอͨΕ·͢ɻ • ҆શ: ೷͖ݟ΍ίϯςϯπͷվ͟ΜΛ๷͙ͨΊɺHTTPS ܦ༝Ͱ഑৴͞Ε·͢ɻ • ൃݟ͠΍͍͢: W3C ͷϚχϑΣετͱService Worker ͷొ࿥είʔϓʹΑΓɺ ʮΞϓϦέʔγϣϯʯͱͯ͠ೝࣝ ͞ΕͭͭɺݕࡧΤϯδϯ͔Β΋ൃݟ͢Δ͜ͱ͕Ͱ͖·͢ɻ • ࠶ΤϯήʔδϝϯτՄೳ: ϓογϡ௨஌ͷΑ͏ͳػೳΛ௨͡Ͱ༰қʹ ࠶ΤϯήʔδϝϯτΛଅ͢͜ͱ͕Ͱ͖·͢ɻ • ΠϯετʔϧՄೳ: Ϣʔβʔ͕ؾʹೖΕ͹ΞϓϦͷϦϯΫΛϗʔϜը໘ʹ࢒ͯ͠ ͓͘͜ͱ͕Ͱ͖ɺΞϓϦετΞͰ ୳͠ճΔඞཁ͸͋Γ·ͤΜɻ • ϦϯΫՄೳ: URL Λ࢖ͬͯ؆୯ʹڞ༗Ͱ͖ɺෳࡶͳΠϯετʔϧͷඞཁ͸͋Γ·ͤΜɻ ͸͡ΊͯͷϓϩάϨογϒ ΢ΣϒΞϓϦ | Web Fundamentals - Google Developers https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=ja
7. WPAΛͲ͏࡞Δ͔ʁ
8. ͦͷ։ൃύλʔϯͷͻͱ͕ͭ
9. PRPL ύʔϓϧ
10. PRPLʢύʔϓϧʣύλʔϯ • Push: ·ͣॳظදࣔʹඞཁͳίϯϙʔωϯτΛ αʔόʔ͔Βϓογϡɻ • Render: ॳظදࣔ༻ͷίϯϙʔωϯτΛϨϯμ Ϧϯάɻ • Pre-cache: ࢒Γͷ෦෼ͷίϯϙʔωϯτΛΩϟ ογϡɻ • Lazy-load: ඞཁʹԠͯ͡Ωϟογϡ͔Β஗Ԇϩ ʔυͯ͠ϨϯμϦϯάɻ
11. PRPLΛઆ໌͢Δલʹ
12. ݱࡏΛৼΓฦΓ·͠ΐ͏
13. HTTP/1.1 HTTP/1.1͸ɺ1ͭͷϦΫΤετ͕׬ྃ͢Δ·Ͱɺ ݪଇ࣍ͷϦΫΤετΛૹΔ͜ͱ͕Ͱ͖ͳ͍ɻ ͭ·ΓɺHTTP/1.1Ͱߴ଎ԽΛਤΔͨΊʹ͸ɺϦ ΫΤετͷ਺ΛݮΒ͢͜ͱ͕ϕετϓϥΫςΟε ʹͳ͍ͬͯΔɻ
14. όϯυΔʂ Bundle ෳ਺ͷϑΝΠϧΛͻͱͭͷόϯυϧϑΝΠϧʹ·ͱΊͯಡΈࠐΉ
15. ΞϓϦ͕ෳࡶʹͳΕ͹ͳΔ΄ͲόϯυϧϑΝ Πϧͷ༰ྔ͸େ͖͘ͳΓɺ࠷ॳͷಡΈࠐΈʹ 10ඵ͘Β͍͔͔Δ৔߹΋͋Δɻ ͜Ε͸ɺϞόΠϧWebͷUXͷ؍఺͔Βͨ͠ Βɺ͔ͳΓக໋త ͦͷ݁Ռ
16. PRPLʢύʔϓϧʣ͸Ͳ͏ͳͷʁ
17. PRPLʢύʔϓϧʣύλʔϯ • Push: ·ͣॳظදࣔʹඞཁͳίϯϙʔωϯτΛ αʔόʔ͔Βϓογϡɻ • Render: ॳظදࣔ༻ͷίϯϙʔωϯτΛϨϯμ Ϧϯάɻ • Pre-cache: ࢒Γͷ෦෼ͷίϯϙʔωϯτΛΩϟ ογϡɻ • Lazy-load: ඞཁʹԠͯ͡Ωϟογϡ͔Β஗Ԇϩ ʔυͯ͠ϨϯμϦϯάɻ
18. Push Server HTTP/2 ॳظදࣔʹඞཁͳίϯϙʔωϯτΛαʔόʔ͔Βϓογϡ ϒϥ΢β
19. Render Server HTTP/2 ॳظදࣔ༻ͷίϯϙʔωϯτΛϨϯμϦϯά ϒϥ΢β
20. Service Worker Pre-cache Server HTTP/2 ࢒Γͷ෦෼ͷίϯϙʔωϯτΛϒϥ΢βʹอଘ ϒϥ΢β
21. Service Worker Lazy-load Server HTTP/2 ඞཁʹԠͯ͡Ωϟογϡ͔Β஗Ԇϩʔυͯ͠ϨϯμϦϯά ϒϥ΢β
22. ͜Ε͕PRPLʂ
23. PRPLΛ࣮ݱ͢ΔͨΊͷٕज़
24. Web Components ίϯϙʔωϯτΛͻͱͭͷཁૉͱͯ͠࡞੒͢Δ͜ ͱ͕Ͱ͖Δ => Custom Elements <link rel=“import” href=“hogehoge.html”> Ͱ࡞੒ͨ͠ίϯϙʔωϯτΛಡΈࠐΊΔ => HTML Imports Web ComponentsରԠͷϒϥ΢βͰ࢖༻Մೳɻ
25. Service Worker Service Worker͸௨ৗͷϖʔδͱ͸ผʹϒϥ΢βͷό οΫάϥϯυͰ࣮ߦ͞ΕΔJavaScriptͷ࣮ߦ؀ڥɻ ϦιʔεΛϒϥ΢βʹΩϟογϡ͢Δ͜ͱͰߴ଎Խɺ ΦϑϥΠϯରԠɺ·ͨϓογϡ௨஌ͱ͍ͬͨߴ౓ͳ Ϣʔβʔମݧͷఏڙ͕Մೳɻ Service WorkerରԠͷϒϥ΢βͰ࢖༻ՄೳɻSSLલ ఏɻ
26. HTTP/2 HTTPͱ͍͏ϓϩτίϧΛϞόΠϧʹ࠷దԽ͠ɺWebͷදࣔΛߴ ଎Խ͢Δͱ͍͏໨తͰ࡞ΒΕͨGoogleͷSPDYͷΞΠσΞΛ΋ͱ ʹ࢓༷ࡦఆɻ HTTP/1.1Ͱ͸࣮ݱ͕೉͔ͬͨ͠ɺલճͷϦΫΤετͷ׬ྃΛ ଴ͨͣʹ࣍ͷϦΫΤετΛૹ৴͢Δ͜ͱ͕Մೳͱͳ͍ͬͯΔɻ ͞ΒʹʮServer Pushʯͱ͍͏ɺΫϥΠΞϯτ͔ΒϦΫΤετ ͕ͳͯ͘΋ɺhtmlϑΝΠϧͷத਎͔Β൑அͯ͠ɺϨεϙϯεΛ ฦ͢࢓૊Έ͕͋ΔʢPRPL͸͜ΕΛ࢖͏ʣɻ
27. ͓ܰ͘͞Β͍
28. Push Server HTTP/2 ॳظදࣔʹඞཁͳίϯϙʔωϯτΛαʔόʔ͔Βϓογϡ ϒϥ΢β
29. Render Server HTTP/2 ॳظදࣔ༻ͷίϯϙʔωϯτΛϨϯμϦϯά ϒϥ΢β
30. Service Worker Pre-cache Server HTTP/2 ࢒Γͷ෦෼ͷίϯϙʔωϯτΛϒϥ΢βʹอଘ ϒϥ΢β
31. Service Worker Lazy-load Server HTTP/2 ඞཁʹԠͯ͡Ωϟογϡ͔Β஗Ԇϩʔυͯ͠ϨϯμϦϯά ϒϥ΢β
32. ൵͍͓͠஌Βͤ
33. ·࣮ͩݱ͸೉͍͠ɾɾɾ • HTTP/2ͷ؀ڥ͕੔උ͞Ε͍ͯͳ͍ • Web Components͕ීٴ͍ͯ͠ͳ͍ • HTTP/2 Server pushͱWebͷΩϟογϡͷ ૬ੑ͕ѱ͍ ͔͠͠ɺ͜ͷPRPLͷߟ͑ํʹ͸ͱͯ΋ເ͕ ͋Δɻͥͻߟ͑ํ͚ͩͰ΋཈͓͖͍͑ͯͨ
34. Google͕৽ͨʹఏএ͢ΔProgressive Web Appsͷ৽ͨͳ։ൃύλʔϯʮPRPLʯͱ͸ʁ https://html5experts.jp/komasshu/19704/ A PATTERN FOR PWA PRPL http://www.slideshare.net/ KensakuKOMATSU/a-pattern-for-pwa-prpl ৄࡉ͸ҎԼʹ͢΂ͯࡌ͍ͬͯ·͢
35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠