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

Slide 1

Slide 1 text

೔ܦిࢠ൛΁ͷPWAಋೖࣄྫ ೔ຊܦࡁ৽ฉࣾ ҆ా ཽ "84%FW%BZ

Slide 2

Slide 2 text

ࣗݾ঺հ ҆ా ཽ (΍ͩ͢ Γΐ͏) 2015೥: NTTݚڀॴ ೖࣾ - ίϯςφܕԾ૝Խٕज़ؔ࿈ͷݚڀʹैࣄ 2016೥: ೔ຊܦࡁ৽ฉࣾ ೖࣾ - ೔ܦిࢠ൛ϦχϡʔΞϧ൛ ։ൃϝϯόʔ - ϑϩϯτΤϯυɾόοΫΤϯυɾΠϯϑϥ౳ॾʑ୲౰ Α͘ॻ͘ݴޠ: js, golang, python

Slide 3

Slide 3 text

೔ܦిࢠ൛ 2010೥3݄૑ץ ຖ೔໿900ຊͷهࣄΛ഑৴ ༗ྉձһ54ສਓҎ্ɾແྉձһ300ສਓҎ্ ݄ؒ3ԯΞΫηε

Slide 4

Slide 4 text

೔ܦిࢠ൛ ϦχϡʔΞϧ ϓϩδΣΫτ (r.nikkei) SPAഇࢭ UI/UXվળ (PWAԽɾϨεϙϯγϒԽ) MicroservicesΞʔΩςΫνϟͷ࠾༻

Slide 5

Slide 5 text

ϦχϡʔΞϧʹΑΔޮՌ Before After

Slide 6

Slide 6 text

ϦχϡʔΞϧʹΑΔޮՌ •58% better conversion rate •40% more daily active user •2x faster Speed Index •14 seconds faster Time-To-Interactive •2.3x organic traffic

Slide 7

Slide 7 text

PWA(Progressive Web Application)ͱ͸ ωΠςΟϒΞϓϦΆ͍UXΛఏڙ͢ΔWebΞϓϦ

Slide 8

Slide 8 text

PWAͱ͸ – GoogleʹΑΔఆٛ • Fast • ϖʔδͷϩʔυ଎౓ɾԠ౴଎౓͕଎͍ • Reliable • ωοτϫʔΫঢ়گʹґଘ͠ͳ͍(ΦϑϥΠϯͰ΋ར༻Մೳ) • Engaging • ϓογϡ௨஌ • ϗʔϜը໘΁ͷ௥Ճ https://developers.google.com/web/progressive-web-apps/checklist

Slide 9

Slide 9 text

೔ܦʹ͓͚ΔPWA • Fast • ϦχϡʔΞϧલͷ਺ഒͷදࣔ଎౓ • Reliable • τοϓͷهࣄͳͲ͸ΦϑϥΠϯͰӾཡՄ • Engaging • ϓογϡ௨஌ • ϗʔϜը໘΁ͷ௥Ճ

Slide 10

Slide 10 text

Fast

Slide 11

Slide 11 text

ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ • ϑΝʔετϏϡʔ • WebϖʔδΛ։͍ͨ࣌࠷ॳʹݟ͑ΔྖҬ • ͜ͷྖҬͷදࣔʹؔΘΔॲཧΛ࠷༏ઌ

Slide 12

Slide 12 text

ϑΝʔετϏϡʔදࣔ଎౓ͷ࠷దԽ – PRPLύλʔϯ • Push: ϑΝʔετϏϡʔͷඳըʹඞཁͳϦιʔεΛPush • Render: ϑΝʔετϏϡʔΛඳը • Pre-cache: ࣍ʹඞཁͳϦιʔε΍ϖʔδΛPre-cache • Lazyload: ϑΝʔετϏϡʔ֎ͷίϯςϯπΛLazyload *Googleͷఏএ͢ΔSPAΛલఏͱͨ͠PRPLύλʔϯͱ͸ҟͳΔ΋ͷͷࢀߟʹ͍ͯ͠Δ

Slide 13

Slide 13 text

Slide 14

Slide 14 text

HTTP/2 Server Push ΫϥΠΞϯτ͔ΒͷϦΫΤετແ͠ʹαʔό͔Βσʔλૹ৴ ΫϥΠΞϯτ αʔό ΫϥΠΞϯτ αʔό index.html bundle.js bundle.css index.html index.html bundle.js bundle.css Pushແ͠ Push༗Γ

Slide 15

Slide 15 text

HTTP/2 Server Push Pushແ͠ Push༗Γ ϖʔδͷμ΢ϯϩʔυޙʹjsɾcssΛμ΢ϯϩʔυ ϖʔδͷμ΢ϯϩʔυͱฒߦͯ͠jsɾcssΛμ΢ϯϩʔυ

Slide 16

Slide 16 text

• HTTP/2 Server H2OΛར༻ • Link HeaderʹϦιʔεΛهड़͢ΔͱPushͯ͘͠ΕΔ HTTP/2 Server Push Origin Server H2O Client Link:;rel=preload;, ; rel=preload; Push: bundle.css Push: bundle.js

Slide 17

Slide 17 text

• Fastly(CDN)͕LinkϔομΛ࢖ͬͨPushΛαϙʔτ • r.nikkeiͰ͸Fastly࢖ͬͯͨͷͰPushͷಋೖͷखؒ͸খ͍͞ HTTP/2 Server Push Origin Server Fastly (CDN) Client Link:;rel=preload;, ; rel=preload; Push: bundle.css Push: bundle.js

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Render – Critical Rendering Pathͷ࠷దԽ Request Page GET html

Slide 21

Slide 21 text

Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM GET html Response

Slide 22

Slide 22 text

Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM GET html Response GET css GET js

Slide 23

Slide 23 text

Render – Critical Rendering Pathͷ࠷దԽ Request Page Start building DOM Build CSSOM Run JS GET html Response Response Response GET css GET js

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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ϒϩοΩϯά

Slide 27

Slide 27 text

Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ ɾ ɾ ɾ ←ͷදࣔʹඞཁͳ࠷௿ݶͷCSSΛ HTMLʹຒΊࠐΉ ←ͷCSS͸ը໘දࣔޙʹಡΈࠐΉ

Slide 28

Slide 28 text

Render – Critical CSS • ϑΝʔετϏϡʔʹඞཁͳCSSͷΈΛinlineͰຒΊࠐΉ • CSSऔಘʹඞཁͳϦΫΤετ਺ΛݮΒͤΔ • CSSOMߏஙɾϨΠΞ΢τͷ࣌ؒΛ࡟ݮͰ͖Δ

Slide 29

Slide 29 text

Render – Critical CSS • Ҏલ͸πʔϧͰࣗಈੜ੒͍ͯͨ͠ (https://github.com/addyosmani/critical) • ඞཁͳCSS͸༷ʑͳ৚݅ͰมΘΔͷͰࣗಈੜ੒Ͱ͸೉͍͠ • ݱࡏ͸ਓखͰඞཁͳCSSΛ؅ཧ هࣄ಺༰ʹΑͬͯϑΝʔετϏϡʔʹೖΔཁૉ͕ඍົʹมΘΔ

Slide 30

Slide 30 text

Render – async/defer <script src=”/bundle.js” defer> • r.nikkei͸non-SPA+SSRͳͷͰϑΝʔετϏϡʔදࣔʹjs͸ෆཁ • jsͷ࣮ߦ͸ը໘දࣔޙͰे෼ • async/deferͰjsͷಡΈࠐΈɾ࣮ߦλΠϛϯάΛมߋ

Slide 31

Slide 31 text

Render – async/defer ύʔα͕scriptλάʹ౸ୡ HTMLύʔε׬ྃ DOMContentLoaded default https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async HTMLύʔε JSμ΢ϯϩʔυ JS࣮ߦ

Slide 32

Slide 32 text

Render – async/defer ύʔα͕scriptλάʹ౸ୡ HTMLύʔε׬ྃ DOMContentLoaded default async https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async HTMLύʔε JSμ΢ϯϩʔυ JS࣮ߦ

Slide 33

Slide 33 text

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ɾ࣮ߦʹΑΔ ϒϩοΩϯάΛճආ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Pre-cache Ϣʔβ͕࣍ʹඞཁͱ͢ΔίϯςϯπΛࣄલʹΩϟογϡ

Slide 38

Slide 38 text

Pre-cache – ServiceWorker • ϒϥ΢β্ʹଘࡏ͢ΔϓϩΩγαʔόΈ͍ͨͳ΋ͷ • jsͰॊೈʹΩϟογϡͷ੍ޚ͕Մೳ • ΦϑϥΠϯͰ΋ΩϟογϡʹΞΫηεՄೳ ϒϥ΢β Service Worker Cache Network

Slide 39

Slide 39 text

Pre-cache – ServiceWorkerͷޮՌͷҰྫ ServiceWorkerແ͠ ServiceWorker༗Γ

Slide 40

Slide 40 text

Pre-cache – Ωϟογϡઓུ • τοϓϖʔδ΍ே༦ץͷهࣄͳͲΛΩϟογϡ • ճ༡͠ͳ͍Ϣʔβʹ͸pre-cache͠ͳ͍ • େ͖ͳίϯςϯπ͸wifi઀ଓ࣌ͷΈΩϟογϡ NetworkInformation APIͰwifi઀ଓঢ়گ֬ೝ

Slide 41

Slide 41 text

Pre-cache Service Worker͸ॊೈ͚ͩͲखؒ΋͔͔Δ

Slide 42

Slide 42 text

Pre-cache – ΩϟογϡͷTTL؅ཧ • ݹ͍ΩϟογϡΛ࡟আͯ͘͠ΕͨΓ͸͠ͳ͍ͷͰࣗલ࣮૷ • URLͱtimestampΛIndexed DBʹอଘ • Ωϟογϡߋ৽࣌ʹtimestampൺֱͯ͠ݹ͚Ε͹࡟আ

Slide 43

Slide 43 text

Pre-cache – Ωϟογϡͷಉظ • Ϣʔβͷೝূঢ়ଶ͕มԽͨ͠ࡍʹෆ੔߹͕ੜ͡Δ • ϩάΞ΢τͯ͠΋ϩάΠϯঢ়ଶͷΩϟογϡ͕දࣔ͞ΕΔ • ༗ྉձһʹͳͬͯ΋ແྉձһ࣌ͷΩϟογϡ͕දࣔ͞ΕΔ etc…

Slide 44

Slide 44 text

Pre-cache – Ωϟογϡͷಉظ • ϩάΠϯ/ϩάΞ΢τΛݕ஌ͯ͠Ωϟογϡ࡟আ • ձһঢ়ଶΛ؂ࢹͯ͠ɺมԽ͕͋ͬͨΒΩϟογϡ࡟আ Ϣʔβ͕ ༗ྉձһԽ ϒϥ΢β Service Worker Auth Status API purge ݖݶͷมԽΛݕ஌

Slide 45

Slide 45 text

Resource Hints • ࣍ʹඞཁͱͳΔϦιʔεΛࣄલʹ४උ͢ΔͨΊͷAPI • dns-prefetch: DNSʹΑΔ໊લղܾΛࣄલʹߦ͏ • preconnect : TCP઀ଓΛࣄલʹߦ͏ • prefetch : ࣄલʹίϯςϯπΛऔಘͯ͠Ωϟογϡ • prerender : ϖʔδશମΛࣄલʹϨϯμϦϯά ྫ:

Slide 46

Slide 46 text

Resource Hints - ே༦ץϖʔδͷprefetch • ϢʔβͷಡΜͰ͍Δ໘ͷ࣍ͷ໘Λprefetch • URLݻఆɾϦιʔε͕੩తͳͷͰprefetch͠΍͍͢ Prefetchແ͠: ServerSide+Clientͷoverhead Prefetch༗Γ: overheadແ͠

Slide 47

Slide 47 text

Resource Hints – ֎෦ίϯςϯπͷpreconnect • ޿ࠂ౳ͷ֎෦ίϯςϯπͰར༻͞ΕΔυϝΠϯ͸preconnect • ίϯςϯπ΍URL͕ಈతͰprefetch͸ͮ͠Β͍ ྘: DNSʹΑΔ໊લղܾ ᒵ: TCP handshake ࢵ: SSL handshake փ: ࣮σʔλͷऔಘ

Slide 48

Slide 48 text

Resource Hints – ಈతͳprerender • Ϣʔβ͕࣍ʹ։͜͏ͱ͍ͯ͠ΔϖʔδΛprerender • Ϛ΢εΧʔιϧ͕ϦϯΫʹ͍ۙͮͨΒlinkλάΛૠೖ • λϒ੾Γସ͑ͱಉ͡଎౓ͰϖʔδભҠ LinkλάΛૠೖ

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Lazyload ϑΝʔετϏϡʔपลͷΈಡΈࠐΈ PlaceholderΛૠೖ ࣮σʔλΛಡΈࠐΈ • DOMϊʔυͷେ͖͞ɾਂ͞Λ཈͑ͯߴ଎Խ

Slide 51

Slide 51 text

ύϑΥʔϚϯεϞχλϦϯά • ϑΝΠϧαΠζ΍ϨϯμϦϯάऴྃ࣌ؒͳͲΛ؂ࢹ • Ұఆͷਫ४ΛԼճͬͨΒslackʹ௨஌

Slide 52

Slide 52 text

Reliable

Slide 53

Slide 53 text

ΦϑϥΠϯͰ΋هࣄ͕ӾཡͰ͖Δ ϒϥ΢β Service Worker Cache Network Offlineͷ৔߹͸ ServiceWorkerͷΩϟογϡฦ͢

Slide 54

Slide 54 text

ΦϑϥΠϯͰ΋ϢʔβߦಈΛτϥοΩϯάͰ͖Δ • Background Sync • ΦϑϥΠϯ࣌ʹૹ৴ͨ͠ϦΫΤετΛΦϯϥΠϯ෮ؼ࣌ʹ࠶ૹ • τϥοΩϯά༻ͷσʔλΛBackground SyncͰૹ৴ • ΦϑϥΠϯ࣌ͷهࣄอଘɾίϝϯτ౤ߘͳͲʹ΋Ԡ༻Մೳ ϦΫΤετΛ อଘ ϒϥ΢β Indexed DB Server Service Worker Background Sync ͷొ࿥ ΦϯϥΠϯ෮ؼ·Ͱ଴ػ ϦΫΤετΛ ૹ৴

Slide 55

Slide 55 text

Engaging

Slide 56

Slide 56 text

ϗʔϜը໘΁ͷ௥Ճ • ϫϯλοϓͰΞΫηεՄೳ • ωΠςΟϒΞϓϦͬΆ͍ݟͨ໨ web manifestΛొ࿥͢ΔͱϗʔϜը໘΁ొ࿥Մೳ

Slide 57

Slide 57 text

ϗʔϜը໘΁ͷ௥Ճ • ϗʔϜը໘͔Βىಈ͞Εͨ৔߹ʹ͸Ωϟογϡྔ૿΍͢ • ΑΓαΫαΫಈ͔ͨ͢Ί • ϗʔϜը໘͔Βͷىಈ͸navigator.standalone౳Ͱ൑ผՄೳ

Slide 58

Slide 58 text

Push௨஌ • ଎ใ௨஌ʹར༻ • ए೥૚͸ϝʔϧΑΓ։෧཰͕ߴ͍ • ػցֶशʹΑΔΫϦοΫ཰࠷େԽ ͳͲΛݕ౼த

Slide 59

Slide 59 text

Service Workerͷ։ൃ

Slide 60

Slide 60 text

Workbox΁ͷஔ͖׵͑ • ࠷ۙ·ͰϑϧεΫϥονͰॻ͍͍͕ͯͨϝϯς͕͖͍ͭ • ΩϟογϡͷTTLͳͲɺΩϟογϡ؅ཧ͸શͯࣗྗ࣮૷ • IDB࢖ͬͯtimestamp؅ཧ͢Δͷͱ͔໘౗… Google੡ͷServiceWorker։ൃ༻ͷϥΠϒϥϦɾπʔϧ

Slide 61

Slide 61 text

WorkboxͰग़དྷΔ͜ͱ – TTLͷ࣮૷ྫ WorkboxΛར༻͠ͳ͍৔߹ WorkboxΛར༻ͨ͠৔߹

Slide 62

Slide 62 text

WorkboxͰग़དྷΔ͜ͱ • SWͰ΍Γ͍ͨجຊతͳࣄ͸֓Ͷ࣮૷͞Ε͍ͯΔ • Precaching • Runtime caching • Cache Strategies (stale-while-revalidateͱ͔) • Request routing • Background sync • ϩά͕਌੾Ͱڍಈ͕ͱͯ΋Θ͔Γ΍͍͢

Slide 63

Slide 63 text

ServiceWorkerͷςετ • seleniumͰෳ਺ϒϥ΢βͰͷࣗಈςετΛ࣮ߦ • ServiceWorker༻ͷUnit/E2EςετϔϧύΛར༻ • https://github.com/GoogleChromeLabs/sw-testing-helpers • Ͱ΋΋͏ϝϯς͞Εͯͳͦ͞͏…

Slide 64

Slide 64 text

·ͱΊ • ೔ܦిࢠ൛͸PWAԽͰCVRɾDAU౳ଟ͘ͷࢦඪ͕վળͨ͠ • PWAԽͰ͸ϑΝʔετϏϡʔͷදࣔ଎౓Λॏࢹ • දࣔ଎౓վળͰ͸PRPLύλʔϯΛࢀߟ • ύϑΥʔϚϯε͸ܧଓతʹվળ͕ඞཁ • ServiceWorker։ൃͰ͸workbox΍sw-testing-helper͕ศར

Slide 65

Slide 65 text

͋Γ͕ͱ͏͍͟͝·ͨ͠