Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Ryo yasuda
October 31, 2018

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

Ryo yasuda

October 31, 2018
Tweet

More Decks by Ryo yasuda

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ϦχϡʔΞϧʹΑΔޮՌ
    Before
    After

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. Fast

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. • 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

    View Slide

  17. • 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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. Reliable

    View Slide

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

    View Slide

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

    View Slide

  55. Engaging

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. Service Workerͷ։ൃ

    View Slide

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

    View Slide

  61. WorkboxͰग़དྷΔ͜ͱ – TTLͷ࣮૷ྫ
    WorkboxΛར༻͠ͳ͍৔߹ WorkboxΛར༻ͨ͠৔߹

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide