日経電子版へのPWA導入事例

Transcript

1. ೔ܦిࢠ൛΁ͷPWAಋೖࣄྫ ೔ຊܦࡁ৽ฉࣾ ҆ా ཽ "84
   %FW%BZ 
   
2. ࣗݾ঺հ ҆ా ཽ (΍ͩ͢ Γΐ͏) 2015೥: NTTݚڀॴ ೖࣾ - ίϯςφܕԾ૝Խٕज़ؔ࿈ͷݚڀʹैࣄ 2016೥: ೔ຊܦࡁ৽ฉࣾ ೖࣾ - ೔ܦిࢠ൛ϦχϡʔΞϧ൛ ։ൃϝϯόʔ - ϑϩϯτΤϯυɾόοΫΤϯυɾΠϯϑϥ౳ॾʑ୲౰ Α͘ॻ͘ݴޠ: js, golang, python
3. ೔ܦిࢠ൛ 2010೥3݄૑ץ ຖ೔໿900ຊͷهࣄΛ഑৴ ༗ྉձһ54ສਓҎ্ɾແྉձһ300ສਓҎ্ ݄ؒ3ԯΞΫηε
4. ೔ܦిࢠ൛ ϦχϡʔΞϧ ϓϩδΣΫτ (r.nikkei) SPAഇࢭ UI/UXվળ (PWAԽɾϨεϙϯγϒԽ) MicroservicesΞʔΩςΫνϟͷ࠾༻
5. ϦχϡʔΞϧʹΑΔޮՌ Before After
6. ϦχϡʔΞϧʹΑΔޮՌ •58% better conversion rate •40% more daily active user •2x faster Speed Index •14 seconds faster Time-To-Interactive •2.3x organic traffic
7. PWA(Progressive Web Application)ͱ͸ ωΠςΟϒΞϓϦΆ͍UXΛఏڙ͢ΔWebΞϓϦ
8. PWAͱ͸ – GoogleʹΑΔఆٛ • Fast • ϖʔδͷϩʔυ଎౓ɾԠ౴଎౓͕଎͍ • Reliable • ωοτϫʔΫঢ়گʹґଘ͠ͳ͍(ΦϑϥΠϯͰ΋ར༻Մೳ) • Engaging • ϓογϡ௨஌ • ϗʔϜը໘΁ͷ௥Ճ https://developers.google.com/web/progressive-web-apps/checklist
9. ೔ܦʹ͓͚ΔPWA • Fast • ϦχϡʔΞϧલͷ਺ഒͷදࣔ଎౓ • Reliable • τοϓͷهࣄͳͲ͸ΦϑϥΠϯͰӾཡՄ • Engaging • ϓογϡ௨஌ • ϗʔϜը໘΁ͷ௥Ճ
10. Fast
11. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ • ϑΝʔετϏϡʔ • WebϖʔδΛ։͍ͨ࣌࠷ॳʹݟ͑ΔྖҬ • ͜ͷྖҬͷදࣔʹؔΘΔॲཧΛ࠷༏ઌ
12. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ
13. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ
14. HTTP/2 Server Push ΫϥΠΞϯτ͔ΒͷϦΫΤετແ͠ʹαʔό͔Βσʔλૹ৴ ΫϥΠΞϯτ αʔό ΫϥΠΞϯτ αʔό index.html bundle.js bundle.css index.html index.html bundle.js bundle.css Pushແ͠ Push༗Γ
15. HTTP/2 Server Push Pushແ͠ Push༗Γ ϖʔδͷμ΢ϯϩʔυޙʹjsɾcssΛμ΢ϯϩʔυ ϖʔδͷμ΢ϯϩʔυͱฒߦͯ͠jsɾcssΛμ΢ϯϩʔυ
16. • HTTP/2 Server H2OΛར༻ • Link HeaderʹϦιʔεΛهड़͢ΔͱPushͯ͘͠ΕΔ HTTP/2 Server Push Origin Server H2O Client Link:<bundle.js>;rel=preload;, <bundle.css>; rel=preload; Push: bundle.css Push: bundle.js
17. • Fastly(CDN)͕LinkϔομΛ࢖ͬͨPushΛαϙʔτ • r.nikkeiͰ͸Fastly࢖ͬͯͨͷͰPushͷಋೖͷखؒ͸খ͍͞ HTTP/2 Server Push Origin Server Fastly (CDN) Client Link:<bundle.js>;rel=preload;, <bundle. css>; rel=preload; Push: bundle.css Push: bundle.js
18. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ
19. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM Render Page GET html Response Response Response GET css GET js
20. Render – Critical Rendering Pathͷ࠷దԽ Request Page GET html
21. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM GET html Response
22. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM GET html Response GET css GET js
23. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS GET html Response Response Response GET css GET js
24. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM GET html Response Response Response GET css GET js
25. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM Render Page GET html Response Response Response GET css GET js
26. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM Render Page GET html Response Response Response GET css GET js CSSϒϩοΩϯά JSϒϩοΩϯά
27. Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ ɾ ɾ ɾ ←ͷදࣔʹඞཁͳ࠷௿ݶͷCSSΛ HTMLʹຒΊࠐΉ ←ͷCSS͸ը໘දࣔޙʹಡΈࠐΉ
28. Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ • CSSऔಘʹඞཁͳϦΫΤετ਺ΛݮΒͤΔ • CSSOMߏஙɾϨΠΞ΢τͷ࣌ؒΛ࡟ݮͰ͖Δ
29. Render – Critical CSS • Ҏલ͸πʔϧͰࣗಈੜ੒͍ͯͨ͠ (https://github.com/addyosmani/critical) • ඞཁͳCSS͸༷ʑͳ৚݅ͰมΘΔͷͰࣗಈੜ੒Ͱ͸೉͍͠ • ݱࡏ͸ਓखͰඞཁͳCSSΛ؅ཧ هࣄ಺༰ʹΑͬͯϑΝʔετϏϡʔʹೖΔཁૉ͕ඍົʹมΘΔ
30. Render – async/defer <script src= ”/bundle.js” async> <script src=”/bundle.js” defer> • r.nikkei͸non-SPA+SSRͳͷͰϑΝʔετϏϡʔදࣔʹjs͸ෆཁ • jsͷ࣮ߦ͸ը໘දࣔޙͰे෼ • async/deferͰjsͷಡΈࠐΈɾ࣮ߦλΠϛϯάΛมߋ
31. Render – async/defer ύʔα͕scriptλάʹ౸ୡ HTMLύʔε׬ྃ DOMContentLoaded default https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async HTMLύʔε JSμ΢ϯϩʔυ JS࣮ߦ
32. Render – async/defer ύʔα͕scriptλάʹ౸ୡ HTMLύʔε׬ྃ DOMContentLoaded default async https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async HTMLύʔε JSμ΢ϯϩʔυ JS࣮ߦ
33. Render – async/defer ύʔα͕scriptλάʹ౸ୡ HTMLύʔε׬ྃ DOMContentLoaded default async defer https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async HTMLύʔε JSμ΢ϯϩʔυ JS࣮ߦ jsͷDLɾ࣮ߦʹΑΔ ϒϩοΩϯάΛճආ
34. Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS Continue Building DOM Render Page GET html Response Response Response GET css GET js
35. Render – Critical Rendering Pathͷ࠷దԽ Request Page Build CSSOM Run JS Continue Building DOM Render Page GET Html + Critical CSS Response Response GET js Start building DOM
36. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ
37. Pre-cache Ϣʔβ͕࣍ʹඞཁͱ͢ΔίϯςϯπΛࣄલʹΩϟογϡ
38. Pre-cache – ServiceWorker • ϒϥ΢β্ʹଘࡏ͢ΔϓϩΩγαʔόΈ͍ͨͳ΋ͷ • jsͰॊೈʹΩϟογϡͷ੍ޚ͕Մೳ • ΦϑϥΠϯͰ΋ΩϟογϡʹΞΫηεՄೳ ϒϥ΢β Service Worker Cache Network
39. Pre-cache – ServiceWorkerͷޮՌͷҰྫ ServiceWorkerແ͠ ServiceWorker༗Γ
40. Pre-cache – Ωϟογϡઓུ • τοϓϖʔδ΍ே༦ץͷهࣄͳͲΛΩϟογϡ • ճ༡͠ͳ͍Ϣʔβʹ͸pre-cache͠ͳ͍ • େ͖ͳίϯςϯπ͸wifi઀ଓ࣌ͷΈΩϟογϡ NetworkInformation APIͰwifi઀ଓঢ়گ֬ೝ
41. Pre-cache Service Worker͸ॊೈ͚ͩͲखؒ΋͔͔Δ
42. Pre-cache – ΩϟογϡͷTTL؅ཧ • ݹ͍ΩϟογϡΛ࡟আͯ͘͠ΕͨΓ͸͠ͳ͍ͷͰࣗલ࣮૷ • URLͱtimestampΛIndexed DBʹอଘ • Ωϟογϡߋ৽࣌ʹtimestampൺֱͯ͠ݹ͚Ε͹࡟আ
43. Pre-cache – Ωϟογϡͷಉظ • Ϣʔβͷೝূঢ়ଶ͕มԽͨ͠ࡍʹෆ੔߹͕ੜ͡Δ • ϩάΞ΢τͯ͠΋ϩάΠϯঢ়ଶͷΩϟογϡ͕දࣔ͞ΕΔ • ༗ྉձһʹͳͬͯ΋ແྉձһ࣌ͷΩϟογϡ͕දࣔ͞ΕΔ etc…
44. Pre-cache – Ωϟογϡͷಉظ • ϩάΠϯ/ϩάΞ΢τΛݕ஌ͯ͠Ωϟογϡ࡟আ • ձһঢ়ଶΛ؂ࢹͯ͠ɺมԽ͕͋ͬͨΒΩϟογϡ࡟আ Ϣʔβ͕ ༗ྉձһԽ ϒϥ΢β Service Worker Auth Status API purge ݖݶͷมԽΛݕ஌
45. Resource Hints • ࣍ʹඞཁͱͳΔϦιʔεΛࣄલʹ४උ͢ΔͨΊͷAPI • dns-prefetch: DNSʹΑΔ໊લղܾΛࣄલʹߦ͏ • preconnect : TCP઀ଓΛࣄલʹߦ͏ • prefetch : ࣄલʹίϯςϯπΛऔಘͯ͠Ωϟογϡ • prerender : ϖʔδશମΛࣄલʹϨϯμϦϯά ྫ: <link rel="preconnect" href="//example.com">
46. Resource Hints - ே༦ץϖʔδͷprefetch • ϢʔβͷಡΜͰ͍Δ໘ͷ࣍ͷ໘Λprefetch • URLݻఆɾϦιʔε͕੩తͳͷͰprefetch͠΍͍͢ Prefetchແ͠: ServerSide+Clientͷoverhead Prefetch༗Γ: overheadແ͠
47. Resource Hints – ֎෦ίϯςϯπͷpreconnect • ޿ࠂ౳ͷ֎෦ίϯςϯπͰར༻͞ΕΔυϝΠϯ͸preconnect • ίϯςϯπ΍URL͕ಈతͰprefetch͸ͮ͠Β͍ ྘: DNSʹΑΔ໊લղܾ ᒵ: TCP handshake ࢵ: SSL handshake փ: ࣮σʔλͷऔಘ
48. Resource Hints – ಈతͳprerender • Ϣʔβ͕࣍ʹ։͜͏ͱ͍ͯ͠ΔϖʔδΛprerender • Ϛ΢εΧʔιϧ͕ϦϯΫʹ͍ۙͮͨΒlinkλάΛૠೖ • λϒ੾Γସ͑ͱಉ͡଎౓ͰϖʔδભҠ LinkλάΛૠೖ
49. ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ
50. Lazyload ϑΝʔετϏϡʔपลͷΈಡΈࠐΈ PlaceholderΛૠೖ ࣮σʔλΛಡΈࠐΈ • DOMϊʔυͷେ͖͞ɾਂ͞Λ཈͑ͯߴ଎Խ
51. ύϑΥʔϚϯεϞχλϦϯά • ϑΝΠϧαΠζ΍ϨϯμϦϯάऴྃ࣌ؒͳͲΛ؂ࢹ • Ұఆͷਫ४ΛԼճͬͨΒslackʹ௨஌
52. Reliable
53. ΦϑϥΠϯͰ΋هࣄ͕ӾཡͰ͖Δ ϒϥ΢β Service Worker Cache Network Offlineͷ৔߹͸ ServiceWorkerͷΩϟογϡฦ͢
54. ΦϑϥΠϯͰ΋ϢʔβߦಈΛτϥοΩϯάͰ͖Δ • Background Sync • ΦϑϥΠϯ࣌ʹૹ৴ͨ͠ϦΫΤετΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ૹ • τϥοΩϯά༻ͷσʔλΛBackground SyncͰૹ৴ • ΦϑϥΠϯ࣌ͷهࣄอଘɾίϝϯτ౤ߘͳͲʹ΋Ԡ༻Մೳ ϦΫΤετΛ อଘ ϒϥ΢β Indexed DB Server Service Worker Background Sync ͷొ࿥ ΦϯϥΠϯ෮ؼ·Ͱ଴ػ ϦΫΤετΛ ૹ৴
55. Engaging
56. ϗʔϜը໘΁ͷ௥Ճ • ϫϯλοϓͰΞΫηεՄೳ • ωΠςΟϒΞϓϦͬΆ͍ݟͨ໨ web manifestΛొ࿥͢ΔͱϗʔϜը໘΁ొ࿥Մೳ
57. ϗʔϜը໘΁ͷ௥Ճ • ϗʔϜը໘͔Βىಈ͞Εͨ৔߹ʹ͸Ωϟογϡྔ૿΍͢ • ΑΓαΫαΫಈ͔ͨ͢Ί • ϗʔϜը໘͔Βͷىಈ͸navigator.standalone౳Ͱ൑ผՄೳ
58. Push௨஌ • ଎ใ௨஌ʹར༻ • ए೥૚͸ϝʔϧΑΓ։෧཰͕ߴ͍ • ػցֶशʹΑΔΫϦοΫ཰࠷େԽ ͳͲΛݕ౼த
59. Service Workerͷ։ൃ
60. Workbox΁ͷஔ͖׵͑ • ࠷ۙ·ͰϑϧεΫϥονͰॻ͍͍͕ͯͨϝϯς͕͖͍ͭ • ΩϟογϡͷTTLͳͲɺΩϟογϡ؅ཧ͸શͯࣗྗ࣮૷ • IDB࢖ͬͯtimestamp؅ཧ͢Δͷͱ͔໘౗… Google੡ͷServiceWorker։ൃ༻ͷϥΠϒϥϦɾπʔϧ
61. WorkboxͰग़དྷΔ͜ͱ – TTLͷ࣮૷ྫ WorkboxΛར༻͠ͳ͍৔߹ WorkboxΛར༻ͨ͠৔߹
62. WorkboxͰग़དྷΔ͜ͱ • SWͰ΍Γ͍ͨجຊతͳࣄ͸֓Ͷ࣮૷͞Ε͍ͯΔ • Precaching • Runtime caching • Cache Strategies (stale-while-revalidateͱ͔) • Request routing • Background sync • ϩά͕਌੾Ͱڍಈ͕ͱͯ΋Θ͔Γ΍͍͢
63. ServiceWorkerͷςετ • seleniumͰෳ਺ϒϥ΢βͰͷࣗಈςετΛ࣮ߦ • ServiceWorker༻ͷUnit/E2EςετϔϧύΛར༻ • https://github.com/GoogleChromeLabs/sw-testing-helpers • Ͱ΋΋͏ϝϯς͞Εͯͳͦ͞͏…
64. ·ͱΊ • ೔ܦిࢠ൛͸PWAԽͰCVRɾDAU౳ଟ͘ͷࢦඪ͕վળͨ͠ • PWAԽͰ͸ϑΝʔετϏϡʔͷදࣔ଎౓Λॏࢹ • දࣔ଎౓վળͰ͸PRPLύλʔϯΛࢀߟ • ύϑΥʔϚϯε͸ܧଓతʹվળ͕ඞཁ • ServiceWorker։ൃͰ͸workbox΍sw-testing-helper͕ศར
65. ͋Γ͕ͱ͏͍͟͝·ͨ͠