Introduction to Progressive Web Apps, why is it important, and how to get started. A step by step guidance towards a better user experience.

1. Progressive Web App Roadshow
Keynote

2. Code of Conduct
Treat everyone with respect.
Speak up if you see or hear something uncool.
Assume positive intent.
We have a zero tolerance policy for harassment.
Talk to a staffer, or send email to
pwa-roadshow-na@google.com.
https://goo.gl/s0UaDu

3. Full Stack Developer at Midade co.
Software Architect at SavvyEra
Technical Mentor at TIEC
Intel Ideation Educator
Founder at Rinvex
me@omranic.com
@omranic
Abdelrahman Omran

6. https://goo.gl/lLgLiR

7. vs.13% 87%
Mobile web Apps
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR

8. 80%
of time spent is in
users’ top 3 apps
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR

9. ZERO
Number of apps the
average user installs per
month
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 https://goo.gl/FZxTPR

10. Reach
Capability

11. Reach
Capability

12. Progressive Web Apps
means radically improving web
user experiences

13. User Experiences Need to Be…
Reliable

15. Lie-Fi

16. Reliability means never showing
the Downasaur

17. User Experiences Need to Be…
Reliable
Fas
t

18. Time is Money
58%
13%
20%
https://goo.gl/qKmssT

19. of users abandon sites that take
longer than 3 seconds to load53%
https://goo.gl/XuXcJx

20. User Experiences Need to Be…
Reliable
Fas
t
Engaging

21. Engaging
Home Screen Immersive
Notification
s

22. Web Push
Notifications

23. No surprises!

27. Progressive Web Apps Are
Reliable
Fas
t
Engaging

28. Service Workers: Reliable applications
Web server

29. Service worker
Cache
Web server
Service Workers: A client-side JavaScript
proxy

30. Service Workers: A foundation for Push
example.com
onpush = function(event) {
var data = event.data.json();
self.registration
.showNotification(data.title, data.options);
};
ServiceWorker.js
Push Subscription
End Point

31. Why is it important?

32. Reach
1B
monthly mobile
chrome users

33. https://goo.gl/yOXHPr

34. 76% increase
IN CONVERSIONS
14% more monthly
ACTIVE USERS ON iOS
30% more monthly
ACTIVE USERS ON ANDROID

35. Progressive Web Apps
are progressive.
(Not everything works everywhere yet,
but user experience is the key.)

36. How do I get started?

37. Start Secure

38. HTTPS: Secure connection
between site and users

39. Keeping Users Safe
Identity
Confidentialit
y
Integrity

40. Three Approaches to PWA-ifying
from the ground up
a single feature
a simple version

41. Three Approaches to PWA-ifying
from the ground up
a single feature
a simple version

42. Both data points are compared to native app
82% less data
TO COMPLETE FIRST
TRANSACTION
92% less data
FOR INITIAL LOAD

43. Three Approaches to PWA-ifying
from the ground up
a single feature
a simple version

44. <1s
INITIAL LOADING TIME AND
EVEN FASTER FOR
SUBSEQUENT LOADS

45. Three Approaches to PWA-ifying
from the ground up
a single feature
a simple version

46. 1,000,000+
OPT-INS IN THE FIRST THREE
MONTHS
60+ languages
ROLLED OUT GLOBALLY WITH
WEB PUSH NOTIFICATIONS

47. Which Approach Will You Take?
from the ground up
a single feature
a simple version

49. Go build!
meow

50. Thank
You!