Redux + ServiceWorker = Offline React

on YouTube ↗21m

" summary

Claim: a readable offline React app is achievable by combining Service Workers, an app shell, and a tiny Redux middleware. Uses create-react-app serviceworker precache or workbox, runtime caching for images, and persist entire Redux store (debounced into localStorage) so reloads render immediately offline. Demo shows app shell cached and served plus runtime-cached assets and images, middleware implemented in a few lines, and the result actually renders previously viewed content without network access.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 1:05ServiceWorker
3. 3:19What is a ServiceWorker
4. 3:55Runtime Caching
5. 6:12FET Strategies
6. 7:20Registering ServiceWorker
7. 7:59Precache
8. 10:07App Shell
9. 12:21Create React App
10. 14:29Redux Overview
11. 15:44Middleware
12. 16:51Bootstrap
13. 17:31Demo
14. 20:44Outro

" related talks

• 59mProgressive React AppsSebastian Springer · iJS 2018 Spring
• 18mOffline for the greater goodJani Eväkallio · React London 2017
• 29mTyler Clark - React to Web WorkersTyler Clark · React Loop 2019
• 01h 00mBuilding Progressive Web Apps with ReactJonathan Mills · NDC Porto 2019
• 59mProgressive React AppsSebastian Springer · International JavaScript Conference Munich 2019
• 23mJavaScript: Off the GridSophia Shoemaker · JSConf US 2019
• 05mRedux and Web Workers on the FrontendChi Kei Chan, Daniel Tsui · ReactEurope 2016
• 18mPWA with ReactNeeraj Singh · ReactFoo Pune 2018