The pursuit of PWAppiness

Thanks to modern web browsers, it is now possible to build (progressive) webapps that can integrate with device APIs, work without internet connectivity and offer incremental delivery thanks to code splitting.
However, how many aspects should a developer keep in mind to actually succeed in implementing a PWA that is performant and respects users' expectations regarding interactions?
In this talk, we will take a look at some of them and what is the complexity of achieving a great quality mobile web application.

Transcript

1. The pursuit of ppiness
3. Reliable “When launched from the user’s home screen, service workers enable a PWA to load instantly, regardless of the network state.”
4. Fast “53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.”
5. Engaging “Feel like a natural app on the device, with an immersive user experience.”
6. Reliable “When launched from the user’s home screen, service workers enable a PWA to load instantly, regardless of the network state.”
7. Reliability, aka Service Workers
8. addEventListener('fetch', fetchEvent => { fetchEvent.respondWith(caches.match(fetchEvent.request) .then(async cachedResponse => { if (cachedResponse) return cachedResponse; const response = await fetch(fetchEvent.request); const cache = await caches.open('whatever'); cache.put(fetchEvent.request, response); return response.clone(); }) ); });
9. Reliability, aka you just broke the refresh button (probably)
10. Reliability, aka consistency
11. Reliability, aka consistency If there’s another active Service Worker on our site—if there’s an open tab under its control—the new Service Worker goes into a waiting state.
12. • Service Worker Lifecycle • Cache API • Registration API • Clients API Reliability, aka consistency
13. Fast “53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.”
14. List Views, aka infinite scrolling
15. DOM Recycling Low-end devices will get noticeably slower if not completely unusable if the website has too big of a DOM to manage.
16. Tombstones Users can easily scroll past the last element we have data for.
17. Scroll Anchoring
18. Use absolutely positioned elements with transforms. Layout Cache the positions where each item ends up and immediately load elements from cache
19. Still not perfect :(
20. Engaging “Feel like a natural app on the device, with an immersive user experience.”
27. Build (very) basic standard blocks, let developers compose them
28. Ship less code for the mobile world
29. “Real extensibility means an architecture that lets you tweak, not rewrite.” Yehuda Katz
31. Extend the web •https://extensiblewebmanifesto.org/ •https://github.com/drufball/layered-apis •https://www.webcomponents.org/introduction
32. Reinvent the web •Ken Wheeler - Why we need a better browser •https://github.com/necolas/react-native-web •https://github.com/vincentriemer/react-native-dom
33. Why the focus on React Native? Different layers of abstraction
34. Why the focus on React Native? Different layers of abstraction
35. Why the focus on React Native? Different layers of abstraction
36. References • Google Dev - Reusable Web Components • Google Dev - Progressive Web Apps • Google Dev - Complexities of an infinite scroller • Service Workers break the refresh button • React Native docs