Building (Progressive) Web Apps

Most people think to build an app they must write native Android or iOS code. However, web frameworks allow developers to easily build powerful web apps. Tools like Ionic allow developers to make apps that feel native with their UI, offline capabilities, and the ability to install them onto a user's device. The web is advancing at an unprecedented rate; we can take advantage of this. Learn what makes a PWA progressive and how to build amazing (web) apps!

Transcript

1. @MichaelSolati Building (Progressive) Web Apps
2. • I’m a Web Developer ◦ Developer Program Engineer @ Google • <3 the Web ◦ Started w/Blaze & Meteor ◦ Dove into Angular (2+) • 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 Mobile Web 13% Native Apps 87% Time Spent On Mobile Phones
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
37. web.dev/workbox
38. FAST(ish?) NOT INTEGRATED RELIABLE NOT ENGAGING
39. Being Fast(er)
40. !==
41. https://reactjs.org/docs/react-dom-server.html https://angular.io/guide/universal https://ssr.vuejs.org/
45. FAST NOT INTEGRATED RELIABLE NOT ENGAGING
46. Being Engaging & Interactive
48. manifest-gen.netlify.app
51. FAST INTEGRATED RELIABLE ENGAGING
52. So many other APIs • Local device storage • Web animations • Payments • Foreground detection • Shape detection • Network type & speed • Multi-touch • Gamepad input • Presentation features • Credential management • Bluetooth • Audio & video capture • USB • Geo location • Device motion & orientation • Online state • Virtual & augmented reality • Low level audio APIs
53. Quickly start your app App shortcuts help users quickly start common or recommended tasks within your web app. Support on: Android - Chrome 84+ Windows - Chrome 85+, Edge 85+
55. web.dev/app-shortcuts web.dev/badging-api web.dev/oyo-lite-twa
58. pwa.otta.dev
59. bit.ly/BuildingPWAs
62. @MichaelSolati