HNPWAの紹介 / Introductory talk about HNPWA

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