GDD2018大会PPT资料PWAR 05 - Tooling (v5)完美版.pdfVIP

Progressive Web App Tooling:
 To the Lighthouse and Beyond R O A D S H O W Lets Go on a Journey Well transform a single page app into a progressive web app. Our Starting Point Single page app, client-side render ` Powered by the iFixit API React for virtual DOM manipulation Lighthouse Use Lighthouse to Establish a Baseline
 goo.gl/S07woZ $ node lighthouse-cli/index.js / Lighthouse results: / Name: Progressive Web App Description: These audits validate the aspects of a Progressive Web App. App can load on offline/flaky connections: 100% -- Has a registered Service Worker: true -- URL responds with a 200 when offline: true Page load performance is fast: 99% -- First meaningful paint: 100 (948.8ms) -- Speed Index: 98 (1283) - First Visual Change: 982ms - Last Visual Change: 1775ms -- Content scrolls at 60fps: ¯\_()_/¯ -- Touch input gets a response in 150ms: ¯\_()_/¯ … more … Lighthouse: 
 Fantastic Tool …but not a destination! Opportunities for Improvement • Server-side rendering • Service worker • Web app manifest Server-side rendering Improves time to first paint. Content no longer depends on JavaScript. See What Changed: goo.gl/a6P8z3 Confirm in Lighthouse Various Browsers Adding a Service Worker Make it work offline Remember: Treat service workers as progressive enhancement! We’re using the 
 App Shell + 
 iFixit ` API dynamic content 
 model. Know your network traffic! See What Changed: goo.gl/4CJLMj Confirm in Lighthouse Various Bro