Builing (Progressive) Web Apps

For JSConf China 2019
By Michael Solati

Transcript

1. @MichaelSolati Building (Progressive) Web Apps
2. • I’m a Web Developer ◦ Developer Advocate @ Typeform ◦ Google Developer Expert • <3 the Web • I HAVE A MaaS PRODUCT • I’ve screwed up a lot
3. So What The Hack Is A PWA?
5. PWAs are • Fast • Integrated • Reliable • Engaging
7. Why PWAs?
8. Source: comScore Mobile Metrix, June 2017
9. 78% Spent in just 3 apps
10. Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.
12. Our PWA
16. Shun the non PWA • Current page does not respond with a 200 when offline • Does not register a service worker that controls page and start_url • Web app manifest does not meet the installability requirements • Is not configured for a custom splash screen • Does not set an address-bar theme color • Does not provide fallback content when JavaScript is not available
17. NOT FAST NOT INTEGRATED NOT RELIABLE NOT ENGAGING
22. Let’s Make It Better
23. Being Reliable
25. Being Reliable
31. FAST(ish?) NOT INTEGRATED RELIABLE NOT ENGAGING
32. Being Fast(er)
33. !==
34. https://angular.io/guide/universal https://reactjs.org/docs/react-dom-s erver.html https://ssr.vuejs.org/
38. FAST NOT INTEGRATED RELIABLE NOT ENGAGING
39. Being Engaging & Interactive
41. https://app-manifest.firebaseapp.com/
44. FAST INTEGRATED RELIABLE ENGAGING
47. https://ngpwa.com
48. https://bit.ly/BuildingPWAs
51. @MichaelSolati