native-like PWAs in Web Components live-code
summary
Live coding produces a small PWA called Unicycle Repair: an inlined app shell with bottom tab navigation, CSS variables, system-ui font and scroll-snap for snap-to-page behaviour. Build uses webpack and Lit-based web components, lazy loading via dynamic import and customElements.whenDefined. Workbox injects a precache with workbox injectManifest and registers a service worker that makes the shell work offline; updates are messy in dev and iOS home‑screen instances keep separate auth state, but the demo installs and runs as an app.
AI-written summary · about
chapters (17)
- 0:00Start
- 4:21Webpack Dev Server
- 5:07The App Shell
- 7:37Fonts
- 9:41Advanced App Shell
- 13:35Installing the App
- 15:05Screens
- 20:06Generate the Service Worker
- 20:53Inject Manifest Plugin
- 21:39Import the Library
- 22:31Register the Service Worker
- 27:58Manifest
- 32:47Questions
- 33:08Native Components
- 37:56Using Addeventlistener
- 43:49How To Handle Up Updates from the Serviceworker Cache
- 45:18Final Questions
