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

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