Why progressive web apps are the future of the web

What are progresssive web apps and an intro to some of the technologies and patterns necessary to start developing next gen web apps

Transcript

1. Progressive Web apps Why progressive web apps are the future of the web
2. Agenda - Why progressive web apps - Web Manifest - Service workers - App shell - Implementation details
3. The current state If we look at the current state of the web it seems like native apps are winning 87% 13% Time spent on native apps Time spent on web apps
4. Broad reach , Low engagement 3.3 8.9 Monthly unique visitors(MM) 201.8 10.9 Average minutes per visitor Apps Mobile Web
5. The web has a better distribution model Load Store Search Install Accept Permissions Download Use Getting an app from the app store:
6. The web seems to win on desktop Who uses a desktop app email client? Who uses social networks apps on desktop?
7. It’s an experience problem -The web has no app model, each single page is a brand new thing -Mobile has to deal with latency and unreliable connections We need a way to get to content fast and in a reliable way
8. Progressive Web apps “Progressive web apps are just websites that took all the right vitamins”
9. Progressive Web apps Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low quality networks. App-like - Use the app-shell model to provide app-style navigation and interactions.
10. Progressive Web apps Safe - Use Https to prevent snooping and ensure content hasn’t been tampered with. Discoverable - Are identifiable as “applications” thanks to W3C manifests allowing search engines to find them. Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
11. How does it work? The site begins life as a regular tab. It is built using Progressive App features including Https, Service Workers, Manifests, and Responsive Design.
12. How does it work? The second (or third or fourth, this is defined by the browser) time one visits the site — roughly at the point where the browser is sure it’s something you use frequently  — a prompt is shown
13. How does it work? When launched from the home screen, these apps blend into their environment; they’re top-level, full-screen, and work offline.
14. User Journey
15. 3 core elements Web Manifest Service Workers App Shell Architecture
16. Web Manifest { "name": "Web Application Manifest Sample", "theme_color": "#9E9E9E", "background_color": "#9E9E9E", "start_url": "/app/index.html", "display": "standalone", "orientation": "landscape", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png", "density": 3.0 }, { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png", "density": 4.0 } ] } <meta name="theme-color" content="#db5945"> <link rel="manifest" href="manifest.json"> Metadata Delegated to one file Extensible and crawlable
17. Service Workers A service worker is a script that is run by your browser in a separate thread It can: • Intercept every network request • Control cache • Send push notifications • Do work when in background
18. Service Workers Service worker allows us to persistently cache our assets and control when they get updated Every static asset can be cached (CSS, JS, Images, HTML)
19. Service Workers Our origin is given a certain amount of free space to do what it wants with. That free space is shared between all origin storage: LocalStorage, IndexedDB, Filesystem, and of course Caches. The available space will differ depending on device and storage conditions.
20. Service Workers This will create a shift in how web apps are built: - After a first load apps controlled by service worker are capable to be fully functional offline - Offline First
21. New Patterns - Cache, falling back to network
22. New Patterns - Cache & Network Race
23. App Shell Architecture The app's shell, is the minimal HTML, CSS, and JavaScript that is required to power the user interface of a progressive web app -Its first load should be extremely quick, then immediately be cached. -The shell does not need to be loaded every time, but instead just gets the necessary content.
24. App Shell Architecture
25. App Shell Architecture App shell architecture separates the core application infrastructure and UI from the data UI infrastructure is cached locally using a service worker so that on subsequent loads, the Progressive Web App only needs to retrieve the necessary data, instead of having to load everything.
26. App Shell Architecture
27. App Shell Architecture The implications of this split are large. On the first visit you can render content on the server and install the service worker on the client. On subsequent visits you only request data. You can always put pixels on screen instantly
28. App Shell Architecture Using the app shell architecture allows you to focus on speed, giving your Progressive Web App similar properties to native apps: instant loading and regular updates All without the need of an app store.
29. Implementation - Views We need javascript views with server side rendering capabilities React can be seen as the V in MVC. Can be server rendered with Node or ReactJS.net React implements a one-way reactive data flow
30. New Frontend Architectures - Flux
31. Flux Architecture
32. Next Gen Dev Tools - Redux dev tools
33. Improved UX Reuse store data - the app feels instant Below the fold content can be loaded async
34. Improved UX +63% Conversion from home screen visits 3x Time spent on app Flipkart Numbers:
35. Final Thoughts Progressive web apps offer us a way to build better experiences but it’s going to require a deep shift in our understanding and tools.
36. Resources Progressive web apps Your First Progressive web app Instant loading web apps with an app shell architecture The offline cookbook React ReactJS.net