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!

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