Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

PWA導入の成果と課題 / nikkei-pwa-html5conf2018

PWA導入の成果と課題 / nikkei-pwa-html5conf2018

HTML5 Conference 2018 https://events.html5j.org/conference/2018/11/ で発表したPWAに関するスライドです。

[日経電子版 サイト高速化とPWA対応]
https://speakerdeck.com/sisidovski/nikkei-high-performance-pwa

[Nikkei achieves a new level of quality and performance with their multi-page PWA]
https://developers.google.com/web/showcase/2018/nikkei

[「改めまして、Progressive Web Appsと申します」── Web UXの新たな基準を考える]
https://html5experts.jp/uskay/25391/

[BeforeInstallPromptEvent.prompt() can be used without user gesture (User Activation v2)]
https://bugs.chromium.org/p/chromium/issues/detail?id=869756

[Speed up Service Worker with Navigation Preloads]
https://developers.google.com/web/updates/2017/02/navigation-preload

[リアルタイムデータ処理基盤 「Atlas」 のソースコードを公開します] https://hack.nikkei.com/blog/atlas_opensource_project/

[ebidel/lighthouse-ci]
https://github.com/ebidel/lighthouse-ci

[Performance budgets 101]
https://web.dev/fast/performance-budgets-101

[Your first performance budget]
https://web.dev/fast/your-first-performance-budget

[What's New In DevTools (Chrome 59)]
https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

[Speed Essentials: Key Techniques for Fast Websites (Chrome Dev Summit 2018)]
https://youtu.be/reztLS3vomE

[WICG/BackgroundSync]
https://github.com/WICG/BackgroundSync/blob/master/explainer.md#periodic-synchronization-in-design

[となりのヤングジャンプ]
https://tonarinoyj.jp/episode/10834108156638358373

[Twitter Lite]
https://mobile.twitter.com

[Service Worker スクリプトのインストールと更新処理]
https://nhiroki.jp/2018/02/15/service-worker-install-and-update-scripts

[JS requests & size 1st party vs 3rd party]
https://discuss.httparchive.org/t/js-requests-size-1st-party-vs-3rd-party/1509

[日経電子版を支える広告技術] https://hack.nikkei.com/blog/tech_book_fest04_ds_ad_tech/

[Pagespeed Insights]
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fr.nikkei.com

[Desktop Progressive Web Apps]
https://developers.google.com/web/progressive-web-apps/desktop

[hack.nikkei.com]
https://hack.nikkei.com

Shunya Shishido

November 25, 2018
Tweet

More Decks by Shunya Shishido

Other Decks in Technology

Transcript

  1. 2  ໊લ  ࣡ށढ़࠸ 4IVOZB4IJTIJEP   !TJTJEPWTLJ 

    ॴଐ  ೔ຊܦࡁ৽ฉࣾͷιϑτ΢ΣΞΤϯδχΞ  ΫϥΠΞϯταΠυɺαʔόαΠυɺ$%/ ͳͲͳΜͰ΋ ࣗݾ঺հ
  2. 13 18"ͰϔϏʔͳ࢖͍ํʹ΋Ԡ͑΍͘͢ͳͬͨ IUUQTIUNMFYQFSUTKQVTLBZ  ࠶๚Λଅ͠΍͍͢࢓૊Έ  "EEUP)PNFTDSFFO  1VTI/PUJpDBUJPOT 

    ϗʔϜ͔Βىಈͨ͠ϢʔβҰൠϢʔβͷ ໿ഒఔ౓ϖʔδΛӾཡ͢Δ  ϓϦϑΣον͢Δهࣄͷຊ਺Λ૿΍͢ͳ ͲϩΠϠϦςΟͷߴ͍Ϣʔβ޲͚ͷࢪࡦ ΋Մೳʹ
  3. 18  ࣗಈੜ੒πʔϧ͸ར༻͍ͯ͠ͳ͍  σόΠεαΠζ΍ϢʔβଐੑʹΑΔελΠϧͷҧ͍ΛࣗಈԽπʔ ϧͰ୲อͰ͖ͳ͔ͬͨ  ϚχϡΞϧͰϝϯς  ϞδϡʔϧԽͨ͠4BTTͷத͔Βඞཁͳ΋ͷ͚ͩΠϯϙʔτ

     ݱঢ়ෆཁͳελΠϧ΋େྔʹΠϯϙʔτ͍ͯͯ͠͠Δ  )5.-ͷϑΝΠϧαΠζ૿ʢH[JQޙͰ΋਺े,#Ϩϕϧͷίετ૿ʣ *OMJOF$SJUJDBMQBUI$44 τϨʔυΦϑΛՃຯͯ͠΋$44ΠϯϥΠϯԽͷԸܙ͸େ͖͍
  4. 20  PO#FGPSF*OTUBMM1SPNQUͷΠϕ ϯτϋϯυϥΛ࢖͏  *OUFSTFDUJPO0CTFSWFSΛར༻͠ ͯهࣄͷಡྃΛ൑ఆ  ͦͷޙϓϩϯϓτΛදࣔ ")4දࣔλΠϛϯάͷ"#ςετ

    ˞$ISPNFΑΓϢʔβδΣενϟʔҎ֎Ͱͷϓϩϯϓτද໋ࣔྩ͸Ͱ͖ͳ͘ͳͬͨɻݱࡏ্هίʔυ͸ಈ࡞͠ͳ͍ IUUQTCVHTDISPNJVNPSHQDISPNJVNJTTVFTEFUBJM JE
  5. 28  ػೳ௥Ճ  σάϨ  ڊେͳϥΠϒϥϦͷಋೖ  ޡͬͨΩϟογϡઃఆ 

    ෆඞཁʹେ͖͍ϑΝΠϧ  FUD αΠτ͸ઈରʹ஗͘ͳΔ IUUQTHQIJTQ6))/1
  6. 35 ಋೖ͍ͯ͠Δ  4QFFE$VSWF XFCQBHFUFTU   1BHF4QFFE*OTJHIUT݄ͷΞοϓσʔτͰܶతʹศརʹ  "UMBT

    ಺੡ͷΞφϦςΟΫεπʔϧɺ36.ͱͯ͠ʣ ಋೖ͍ͨ͠  $ISPNF&YQFSJFODF3FQPSU  -JHIUIPVTF$* πʔϧҰཡ <ϦΞϧλΠϜσʔλॲཧج൫ʮ"UMBTʯͷιʔείʔυΛެ։͠·͢>IUUQTIBDLOJLLFJDPNCMPHBUMBT@PQFOTPVSDF@QSPKFDU <FCJEFMMJHIUIPVTFDJ>IUUQTHJUIVCDPNFCJEFMMJHIUIPVTFDJ
  7. 38 ύϑΥʔϚϯεؔ࿈ͷϝτϦΫεʹର͢ΔCVEHFUʢ༧ࢉʣ  ϑΝΠϧαΠζ  ϑΝΠϧ਺  දࣔ࣌ؒ  FUD

    ͜ΕΒΛ਺஋Ͱఆٛ͠ɺ ༧ࢉΛΦʔόʔ͠ͳ͍Α͏ʹ౒ΊΔ 1FSGPSNBODF#VEHFUͱ͸
  8. 49  ࣮૷͸Ͱ͖͍ͯΔ͕ඇରԠͷ··͸΍೥͍ۙ  ݩʑ͸ΞϓϦ͕࣋ͭػೳ  /FUXPSL*OGPSNBUJPO"1*ͰϢʔβͷωοτϫʔΫ ΋֬ೝՄೳ  ேץ͸͍ۙهࣄ͕഑৴͞ΕΔʢ௨৴ྔେʣ

     1FSJPEJDTZODPSϢʔβͷڐ୚ΛऔΓ͍ͨ  ը໘ઃܭ͕೉͍͠ ே༦ץͷҰׅμ΢ϯϩʔυ IUUQTHJUIVCDPN8*$(#BDLHSPVOE4ZODCMPCNBTUFSFYQMBJOFSNEQFSJPEJDTZODISPOJ[BUJPOJOEFTJHO
  9. 72 ϥΠϒϥϦʹΑΔந৅Խ  8PSLCPY /FYU/VYUKT ϓϥοτϑΥʔϜͷ੔උ  .JDSPTPGU4UPSF  σεΫτοϓ18"

     8FCඪ४ 18"ࠓޙͷల๬ %FTLUPQ1SPHSFTTJWF8FC"QQT IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTEFTLUPQ
  10. 73 18"Λ೥ӡ༻ͯ͠Έͯ  18"ͷಋೖͰϢʔβͷΤϯήʔδϝϯτΛߴΊΒΕΔ  ଎౓͸Ϗδωεΰʔϧʹ௚݁͠ͳ͍ɻ͋͘·Ͱ69ΛߴΊΔҰ؀  θϩϒϩοΩϯάϦιʔε͸݁ߏޮՌ͋Δ  ϞχλϦϯάπʔϧ΍1FSGPSNBODF#VEHFUͷಋೖΛ

    ՝୊ͱࠓޙͷల๬  J04͸·ͩ·ͩ՝୊͕ଟ͍͕ɺ4FSWJDF8PSLFS͚ͩͰ΋Ըܙ͸͋Δ  SEQBSUZεΫϦϓτΛͳΜͱ͔͢Δͷ͸ۀքશମͷ໰୊  ϑϨʔϜϫʔΫ΍ϓϥοτϑΥʔϜ͕ࠓޙ΋ͬͱ੔උ͞Ε͍͖ͯͦ͏ ·ͱΊ