HNPWAの紹介 / Introductory talk about HNPWA

5f533aeab28ed4f70c26e336e71296f7?s=47 tipo159
April 16, 2018

HNPWAの紹介 / Introductory talk about HNPWA

HNPWAとは
HNPWAの仕様
データソース仕様
ネットワーク設定
注意事項

5f533aeab28ed4f70c26e336e71296f7?s=128

tipo159

April 16, 2018
Tweet

Transcript

  1. HNPWAͷ঺հ PWA Beginners ษڧձ #3 2018.4.16 tipo159

  2. ΞδΣϯμ • HNPWAͱ͸ • Hacker Newsͱ͸ • HNPWAͷ࢓༷ • σʔλιʔε࢓༷

    • ωοτϫʔΫઃఆ • ஫ҙࣄ߲ • HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 2
  3. HNPWAͱ͸ • PWAͰ࡞ͬͨHacker NewsϦʔμʔͷ࣮૷ྫΛूੵ͢Δα Πτ https://hnpwa.com • TodoMVCͷਫ਼ਆతͳޙܧऀ • TodoMVC͸ɼJavaScriptΞϓϦέʔγϣϯ։ൃऀͷMV*

    ϑϨʔϜϫʔΫͷબ୒Λॿ͚͍ͯͨ • Ϟμϯϒϥ΢βͷೳྗʹ͸ରԠͰ͖͍ͯͳ͔ͬͨ 3
  4. Hacker Newsͱ͸ • ίϯϐϡʔλ΍ελʔτΞοϓؔ࿈ͷιʔγϟϧχϡʔεα Πτ • YίϯϏωʔλ͕ӡӦ 4

  5. HNPWAͷ࢓༷(1/2) • ඞਢ৚݅ • Top Stories, New, Show, Ask, Jobs

    & threaded CommentsͷϏϡʔ Λ࣮૷ • ֤Ϗϡʔ͸ɼγΣΞͰ͖ΔΑ͏ϧʔςΟϯάΛ࢖༻ • Story listϏϡʔ͸ϖʔδ౰ͨΓ30ΞΠςϜΛදࣔ • Progressive Web App • LighthouseͰ90/100Ҏ্ • 3GͷMoto G4Ͱ5ඵҎ಺ʹΠϯλϥΫςΟϒʹͳΔɽWebPageTest ͷauto-selected Moto G4 + Faster 3GͰ”Time to interactive”Λଌఆ 5
  6. HNPWAͷ࢓༷(2/2) • Application ShellύλʔϯΛ࢖༻ • σεΫτοϓɼϞόΠϧڞʹϨεϙϯγςΟϒ • ՄೳͳݶΓΫϩεϒϥ΢βಈ࡞ • Φϓγϣϯ৚݅

    • Hacker NewsσʔλͷΦϑϥΠϯΩϟογϯά • αʔόʔαΠυϨϯμϦϯά • ϢʔβΠϯλϑΣʔε • ݱ࣌఺Ͱ͸ελΠϧγʔτ΍࣮૷ςʔϚΛఏڙ͍ͯ͠ͳ͍͕ɼকདྷతʹ ͸ఏڙ༧ఆ 6
  7. σʔλιʔε࢓༷ • Official real-time Hacker News API powered by Firebase

    http://hacker-news.firebaseio.com/v0/ • Unofficial APIͱ৚݅Λἧ͑ΔͨΊɼϖʔδ౰ͨΓ30ε τʔϦʔΛ࢖༻ • Unofficial Hacker News API https://node-hnapi.herokuapp.com/ 7
  8. ωοτϫʔΫઃఆ • Emerging Markets • 400Kbps 3G ஗Ԇ400ms • WebPageTest:

    auto-selected Moto G4 + Emerging Markets • Faster 3G • 1.6Mbps 3G ஗Ԇ300ms • WebPageTest: auto-selected Moto G4 + Faster 3G 8
  9. ஫ҙࣄ߲ • ϑϨʔϜϫʔΫͷੑೳൺֱʹ༻͍ͯ͸͍͚ͳ͍ • ϧʔζͳ࢓༷ʹج͍࣮ͮͨ૷ • αʔό૷ஔʹΑΔੑೳ΁ͷӨڹ • ϑϨʔϜϫʔΫҎ֎ͷ࣮૷͕ҟͳΔ •

    ࣮૷࣌ظ͕࠷େ11ϲ݄ҟͳΔ • WebPageTestͰ͸ɼΠϯλϥΫςΟϒʹͳΔ·Ͱͷ࣌ؒ͸ଌఆͰ͖ Δ͕ɼϢʔβૢ࡞΁ͷ൓Ԡ࣌ؒ͸ଌఆͰ͖ͳ͍ • ྫ͑͹ɼαʔόαΠυϓϦϑΣονΛ࣮૷͍ͯͯ͠΋ɼ WebPageTestͷଌఆ݁Ռʹ͸൓ө͞Εͳ͍ 9
  10. HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 10     

    'JSFCBTF 7JQFS 1SFBDU 3FBDU "OHVMBS 7VF 'BUFS( &NFSHJOH
  11. ࢀߟ৘ใ • App Shell Ϟσϧ https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja • sw-precache? sw-toolbox? What's

    the difference? https://github.com/GoogleChromeLabs/sw-precache/blob/master/sw-precache-and-sw- toolbox.md • sw-precache/GettingStarted https://github.com/GoogleChromeLabs/sw-precache/blob/master/GettingStarted.md • sw-toolbox https://googlechromelabs.github.io/sw-toolbox/ • Workbox https://developers.google.com/web/tools/workbox/ • Lab: Migrating to Workbox from sw-precache and sw-toolbox https://developers.google.com/web/ilt/pwa/lab-migrating-to-workbox-from-sw- precache-and-sw-toolbox • PRPL ύλʔϯ https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja 11