Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ΞδΣϯμ • HNPWAͱ͸ • Hacker Newsͱ͸ • HNPWAͷ࢓༷ • σʔλιʔε࢓༷ • ωοτϫʔΫઃఆ • ஫ҙࣄ߲ • HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 2

Slide 3

Slide 3 text

HNPWAͱ͸ • PWAͰ࡞ͬͨHacker NewsϦʔμʔͷ࣮૷ྫΛूੵ͢Δα Πτ https://hnpwa.com • TodoMVCͷਫ਼ਆతͳޙܧऀ • TodoMVC͸ɼJavaScriptΞϓϦέʔγϣϯ։ൃऀͷMV* ϑϨʔϜϫʔΫͷબ୒Λॿ͚͍ͯͨ • Ϟμϯϒϥ΢βͷೳྗʹ͸ରԠͰ͖͍ͯͳ͔ͬͨ 3

Slide 4

Slide 4 text

Hacker Newsͱ͸ • ίϯϐϡʔλ΍ελʔτΞοϓؔ࿈ͷιʔγϟϧχϡʔεα Πτ • YίϯϏωʔλ͕ӡӦ 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

HNPWAͷ࢓༷(2/2) • Application ShellύλʔϯΛ࢖༻ • σεΫτοϓɼϞόΠϧڞʹϨεϙϯγςΟϒ • ՄೳͳݶΓΫϩεϒϥ΢βಈ࡞ • Φϓγϣϯ৚݅ • Hacker NewsσʔλͷΦϑϥΠϯΩϟογϯά • αʔόʔαΠυϨϯμϦϯά • ϢʔβΠϯλϑΣʔε • ݱ࣌఺Ͱ͸ελΠϧγʔτ΍࣮૷ςʔϚΛఏڙ͍ͯ͠ͳ͍͕ɼকདྷతʹ ͸ఏڙ༧ఆ 6

Slide 7

Slide 7 text

σʔλιʔε࢓༷ • 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

Slide 8

Slide 8 text

ωοτϫʔΫઃఆ • 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

Slide 9

Slide 9 text

஫ҙࣄ߲ • ϑϨʔϜϫʔΫͷੑೳൺֱʹ༻͍ͯ͸͍͚ͳ͍ • ϧʔζͳ࢓༷ʹج͍࣮ͮͨ૷ • αʔό૷ஔʹΑΔੑೳ΁ͷӨڹ • ϑϨʔϜϫʔΫҎ֎ͷ࣮૷͕ҟͳΔ • ࣮૷࣌ظ͕࠷େ11ϲ݄ҟͳΔ • WebPageTestͰ͸ɼΠϯλϥΫςΟϒʹͳΔ·Ͱͷ࣌ؒ͸ଌఆͰ͖ Δ͕ɼϢʔβૢ࡞΁ͷ൓Ԡ࣌ؒ͸ଌఆͰ͖ͳ͍ • ྫ͑͹ɼαʔόαΠυϓϦϑΣονΛ࣮૷͍ͯͯ͠΋ɼ WebPageTestͷଌఆ݁Ռʹ͸൓ө͞Εͳ͍ 9

Slide 10

Slide 10 text

HNPWA Time to interactiveͷ݁Ռ(Ұ෦ൈਮ) 10      'JSFCBTF 7JQFS 1SFBDU 3FBDU "OHVMBS 7VF 'BUFS( &NFSHJOH

Slide 11

Slide 11 text

ࢀߟ৘ใ • 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