This talk starts with comparing mobile and web platforms we have today by stressing their advantages and disadvantages. Audience is expected to grasp the patterns and practices of building a PWA and eventually people are able to see it live on their devices.

1. P R O G R E S S I V E W E B A P P S
I S I T A R E P L A C E M E N T F O R Y O U R M O B I L E A P P ?

2. Ö N D E R C E Y L A N
@onderceylan
Sharing knowledge on #javascript, #typescript, #angular, #ionic and #pwa
JS Squad Lead @LINKIT
Software Technical Lead @KLM
Speaker, Organiser @ITNEXT
Speaker, Organiser @GDG NL

3. S TAT E O F
T H E M O B I L E
P L AT F O R M

4. N U M B E R O F S M A R T P H O N E U S E R S
2.5 B>
@onderceylan

5. D I G I TA L M E D I A U S A G E T I M E
2017 US Mobile App Report
@onderceylan

6. N U M B E R O F A P P D O W N L O A D S
2017 US Mobile App Report
@onderceylan

7. A P P D I S C O V E RY C H A N N E L S
2017 US Mobile App Report
@onderceylan

8. T R A D I T I O N A L
N AT I V E A P P
D E V E L O P M E N T

9. • A development team per platform
• Slow time to market
• Existing cross platform solutions come with
a trade-off
@onderceylan

10. A P P S T O R E S

11. • Stressful app review process and overhead
in releasing app updates
• Many app acquisition methods are seeing
modest declines over the past year
• Most app users across
all age segments access
20 or fewer apps
in a month
@onderceylan

12. M O B I L E A P P A C Q U I S I T I O N
@onderceylan

13. S TAT E O F
T H E W E B
P L AT F O R M

14. • Extensive APIs and standards
• JavaScript dominates the world
• Performance boost with AMP, PWA and
web packaging
@onderceylan

15. @onderceylan

16. @onderceylan

17. • Exciting web APIs such as WebVR,
WebGL, WebRTC, Web Assembly and
Service Workers
• Web APIs for accessing to devices hardware
• Integration with
OS enables
activity out
of the browsers
@onderceylan

18. A C Q U I S I T I O N V S T I M E S P E N T
2017 US Mobile App Report
2017 US Mobile App Report
@onderceylan

19. … what if?
@onderceylan

20. P R O G R E S S I V E
W E B A P P S

21. @onderceylan

22. @onderceylan

23. “It’s just a website that took all the right vitamins.”
@onderceylan

24. R E L I A B L E
@onderceylan

25. FA S T
@onderceylan

26. P R O G R E S S I V E
@onderceylan

27. E N G A G I N G
@onderceylan

28. D I S C O V E R A B L E
@onderceylan

29. L I N K A B L E
@onderceylan

30. Uber’s PWA was designed to be fast even on 2G.
The core app is only 50k gzipped and takes less
than 3 seconds to load on 2G networks.
@onderceylan

31. Twitter Lite saw a 65% increase in pages per
session, 75% in Tweets, and a 20% decrease in
bounce rate. Twitter Lite loads in under 3 seconds
for repeat visits even on slow networks.
@onderceylan

32. Tinder cut load times from 11.91 seconds to
4.69 seconds with their new PWA. The PWA is
90% smaller than Tinder’s native Android app.
@onderceylan

33. More on e-commerce…
@onderceylan

34. Flipkart’s PWA is driving 50% of its new
customer acquisition. Nearly 60% of visitors to
the PWA had previously uninstalled the native
app primarily to save space.
@onderceylan

35. Alibaba increased conversions on the mobile
web by 76%, with 14% more monthly active
users on iOS and 30% more on Android.
@onderceylan

36. And, many more…
https://pwastats.com
@onderceylan

37. Gartner predicts that by 2020, 50% of
general-purpose, consumer-facing
mobile apps will be PWAs.
@onderceylan

38. Forrester’s report state that the future of
the web is PWA and the world will spend
$1 Trillion by 2021 for reinventing the
web to make it mobile-first.
@onderceylan

39. C O S T O F D E L AY
@onderceylan

40. @onderceylan

41. B U I L D I N G
A P WA

42. W E B A P P M A N I F E S T
manifest.json
@onderceylan

43. Manifest tab of Chrome DevTools
@onderceylan

44. A P P L I C AT I O N S H E L L
@onderceylan

45. A P P L I C AT I O N S H E L L
@onderceylan

46. S E R V I C E W O R K E R S
@onderceylan

47. S E R V I C E W O R K E R L I F E C Y C L E
@onderceylan

48. A P P ( S W ) U P D AT E S
@onderceylan

49. Service Workers tab of Chrome DevTools
@onderceylan

50. P R E C A C H I N G
R U N T I M E
C A C H I N G
S T R AT E G I E S
R E Q U E S T
R O U T I N G
B A C K G R O U N D
S Y N C
O F F L I N E
A N A LY T I C S
@onderceylan

51. I O N I C
F R A M E W O R K
R O U T I N G
S E R V I C E
W O R K E R S
W E B
M A N I F E S T
P U S H
N O T I F I C AT I O N S
L A Z Y L O A D I N G
@onderceylan

52. L I G H T H O U S E
https://developers.google.com/web/tools/lighthouse/run
@onderceylan

53. @onderceylan
Lighthouse Audit in Action

54. G O O G L E P L AY
@onderceylan

55. M I C R O S O F T S T O R E
@onderceylan

56. A P P L E A P P S T O R E
@onderceylan

57. P WA P O L I C E
https://github.com/PWA-POLICE/pwa-bugs
@onderceylan

58. https://whatwebcando.today
@onderceylan

59. W E B P L AT F O R M S TAT U S
https://platform-status.mozilla.org
Firefox Platfom Status
https://webkit.org/status
WebKit Feature Status
https://www.chromestatus.com
Chrome Platform Status
@onderceylan

60. @onderceylan

61. https://bugs.chromium.org/p/chromium/issues/list?q=label:Proj-Fugu
@onderceylan

62. A P P S C O P E
https://appsco.pe
@onderceylan

63. https://appsco.pe
@onderceylan

64. PWAs vs. native apps isn’t a
winner-take-all battle.
@onderceylan

65. D E M O T I M E

66. M A C O S / I O S P L AT F O R M
@onderceylan

67. W I N D O W S P L AT F O R M
@onderceylan

68. A N D R O I D P L AT F O R M
@onderceylan

69. https://u.nu/pwa
@onderceylan

70. https://u.nu/pwa
A C C E S S I B L E
Search Results, Links
I N S TA L L A B L E
Web App Manifest API
E N G A G I N G
Notifications API
@onderceylan

71. E N G A G I N G
Payment Request API
R E S P O N S I V E
CSS Variables, Ionic
FA S T
CSS Animations
https://u.nu/pwa
@onderceylan

72. P R O G R E S S I V E
Background Sync API, Push
API, Clipboard API
R E L I A B L E
Cache API, Fetch API,
navigator.onLine, IndexedDB
U P D AT E A B L E
Service Worker API
https://u.nu/pwa
@onderceylan

73. https://u.nu/pwa https://u.nu/pwaoss
@onderceylan

74. @onderceylan
Follow me on Twitter
T H A N K Y O U !

75. Q U E S T I O N S ?
@onderceylan
Follow me on Twitter