Progressive Web Apps - The Future

Transcript

1. Progressive Web Apps (The future is here)
2. @r31gN_ JS Instructor, TLM GDE https://krak3n.co
3. Mobile Landscape • Mobile traffic surpassed desktop traffic • Mobile phone internet user penetration worldwide is at 52.7% (in US, at 75.1%) • App usage dominates browser usage in mobile landscape (90% of the time spent in apps)
4. Native vs. Web
5. “Google's Progressive Web Apps are blurring the lines between apps and the mobile web.” Business Insider
6. PWA Introduction
7. • The best of the web and the best of apps • No install required • Loads quickly, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience PWA in a nutshell
8. PWA Characteristics
9. PWA Characteristics • Progressive (progressive enhancement used throughout) • Discoverable (easily discovered by search engines) • Linkable (it’s the web, linkable by definition) • Responsive (UI fits device’s screen size) • App-like (looks and interacts like a native app)
10. PWA Characteristics • Connectivity independent (offline first + cache via SW) • Re-engageable (engage users through PN) • Installable (install to device’s home screen) • Fresh (always get the latest data) • Secure (always served via HTTPS)
11. PWA Characteristics • Low friction (just use it) • Just web (HTML/CSS/JS) • Fast (keep the experience smooth) • Instant loading (SW FTW!) • Shiny future (more things to come)
12. Architect your App Shell
13. What is the App Shell? • The app's shell is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app. • Separates the core application infrastructure and UI from the data • After the first load, the app shell related resources are cached via SW to local device
14. Design the App Shell • What needs to be on screen immediately? • What other UI components are key to our app? • What supporting resources are needed for the app shell? (e.g: images, JS, styles, etc.)
15. Top bar Container
16. Content
17. Benefits of the App Shell • Reliable performance that is consistently fast • Native-like interactions • Economical use of data
18. Moving on to Service Workers
19. • A script that your browser runs in the background • It includes features like push notifications and background sync • The ability to intercept network requests + managing a cache of responses SW in a nutshell
20. Installing Activated Error Idle Fetch Terminated
24. SW summary • Works on HTTPS only (avoid man in the middle attacks) • Allows you to manipulate cache (via multiple strategies) • Runs in background, in a separate thread • Doesn’t have access to DOM • Doesn’t control origin page on first load • Only one SW active at a single time
25. The Web App Manifest
26. Web App Manifest in a nutshell • Simple JSON file • Control how your app appears to the user, direct what the user can launch, and define its appearance at launch
28. Push Notifications
29. Push Notifications in a nutshell • Web Push Notifications allow users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content • Push is invoked when a server supplies information to a SW • A notification is the action of a SW or web page script showing information to a user
33. PRPL pattern
34. app.html list.html detail.html index.html list deps shared detail deps
35. app.html list.html detail.html index.html list deps shared detail deps fragment bundle fragment bundle shell bundle
36. PRPL summary • Push critical resources for the initial URL route. • Render initial route • Pre-cache remaining routes • Lazy-load and create remaining routes on demand
37. Measure & Debug
39. Conclusions
40. Conclusions • The web is definitely closer to mobile (they can compete) • We have advancements in the platform itself (SW, HTTP/2) and in the tools we use to build apps • We have come up with new strategies and new architectures (App Shell, PRPL) • More ideas yet to try but, for web apps, the future is already here!
41. Keep on smiling because you are the most beautiful people when you do.
42. Thank you! @r31gN_