DevNexus 2018 | Dismantling a Progressive Web App

Sometimes we are not sure if using a specific tool is a good decision or not. How many libraries are available in the market? What will become standard? And, what is just a hype?

PWA sounds like a new framework, or a tool to create some sort of web apps. Many developers link it to JavaScript, and that is only achievable with one of those new framework.js out there.

I’ve been wondering about the truth of this previous statement, can we create a PWA in, let’s say, pure Java? I did some research and I’m going to present my findings.

In this presentation I will demonstrate how we can actually build modern web applications that qualify as "Progressive Web Apps".

Transcript

1. D I S M A N T L I N G A P R O G R E S S I V E W E B A P P A M A H D Y A B D E L A Z I Z @ A M A H D Y 7
2. 1.Progressive Web App? 2.PWA from scratch 3.PWA my existing <- - ->
3. P R O G R E S S I V E W E B A P P
7. S M A R T P H O N E S O R A P P - P H O N E S
12. •Limited usage •Complexity • Login? • App size? • Permissions?
14. vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
15. Capability Reach
16. 1.Engagement (e.g. Notifications) 2.Offline (works all the time) 3.UX (native experience)
17. 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
18. ZERO NUMBER OF APPS AVERAGE USER INSTALLS PER MONTH Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
19. Capability Reach
20. Capability Reach
21. C A N I W E B A P P ?
23. P R O G R E S S I V E W E B A P P
24. < / A D V E R T I S E M E N T >
25. Progressive Web App • Web Workers • Offline Support • Push Notification • Install on home screen (of any device) • …. bla bla
 P R O G R E S S I V E L Y L O A D I N G T H E A P P ?
26. B U I L D I N G A P W A
27. Reliable User experiences need to be...
28. Reliability means never showing 
 the offline dinosaur
29. Reliable Fast User experiences need to be...
30. of users abandon sites that take longer than 3 seconds to load 40%
31. Reliable Fast Engaging User experiences need to be...
32. Full screen, theming, orientation, etc. Push notifications Immersive Notifications Engaging Auto-adding to Home Screen Home Screen
33. 1 . A D D A N A P P M A N I F E S T
34. { "name": "Todo App", "icons": [{ "src": "todo.png", "sizes": "192x192", "type": "image/png" }], "start_url": "/index.html", "display": "standalone", "orientation": "portrait" } https://developer.mozilla.org/en-US/docs/Web/Manifest W E B A P P M A N I F E S T
35. 2 . D E F I N E A S E R V I C E W O R K E R
36. Service worker !  S E R V I C E W O R K E R
37. 3 . A D D P U S H , B A C K G R O U N D S Y N C ( I F Y O U W A N T T O )
38. developers.google.com/web/fundamentals/ getting-started/codelabs/push-notifications
39. D O Y O U N E E D T O S TA R T F R O M S C R AT C H ? N O .
41. P W A C H E C K L I S T : # Site is served over HTTPS # Responsive layouts, works on mobile # First load is fast even on 3G # Site works cross-browser # Page transitions don't feel like they block on network # Each page has a URL # Metadata is provided for Add to Home screen developers.google.com/web/progressive-web-apps/checklist
42. Progressive Web App in Java
43. Progressive Web App in Java Content Producer
44. P R O G R E S S I V E W E B A P P S I N J A V A https:// j.mp / javapwa T H A N K YO U ! - B U D D H A @ A M A H D Y 7