Architecting Mobile Web Apps
summary
Demo builds a Firebase-backed task app that signs in with Firebase Auth, hosts via Firebase Hosting, syncs realtime with Cloud Firestore and runs server logic in Cloud Functions. Key specifics: offline caching uses a Service Worker + Workbox and Firestore’s enablePersistence (one call), writes use Firestore’s latency compensation so UI updates instantly, and refresh suppression uses a tiny localStorage class toggle. Caveats: last-write-wins merge behavior; measure real users with Firebase Performance Monitoring (FCP, TTI).
AI-written summary · about
chapters (24)
- 0:00Start
- 6:39Firebase
- 7:36Cloud Firestore
- 7:55Latency Compensation
- 9:01Cloud Functions
- 9:31Data Normalization
- 10:06Seven Principles of Magic
- 10:20Misdirection
- 10:44Magic Steal
- 11:30Seven Principles of Magic
- 12:22Demo App
- 16:04Stylesheet Link
- 17:52Simulation
- 18:09Responsive to User Interactions
- 18:22Page Loading Screen
- 24:07Service Workers and the Firestore Sdk
- 24:38Offline Persistence
- 25:30Serviceworker
- 26:15Configuration
- 26:55Navigation Fallback and the Navigation Fallback Blacklist
- 27:48Runtime Caching
- 29:12Event Listeners to Online and Offline
- 32:44Fire Based Performance Monitoring
- 33:56Firebase Performance Monitoring
related talks
25mWhy web developers (should) love Firebase
33mRealtime Awesomeness: An Intro to Building Apps With Firebase
32mFiring on all cylinders – a breakdown of Firebase on iOS
40mFirebase and Cloud Firestore: Evolving Platform and Bridge for Mobile and Web Apps
41mReal-Time Applications with Firebase and React
45mFirebase and Android, a real-time match synced in heaven
26mQuickly build your app alone with Firebase.
27mFirebase: Making Real-time a Reality