Creating instant and seamless web apps with Chrome
summary
Workshop shows a Next.js sample app upgraded to make navigation near-instant: it adds a speculation rules script and a prerender button so Chrome creates a hidden browsing context, makes analytics respect document.prerendering and the prerenderingchange event, removes unload handlers and replaces dev-only CCNS with cache-control: public so BFCache restores pages (DevTools back/forward cache test and page show persistent flag confirm it), writes a /.well-known/traffic-advice to opt into Private Prefetch Proxy, and wires root shared element transitions via document.createDocumentTransition, setElement and start — all demos run and animate instantly.
AI-written summary · about
chapters (13)
- 0:00Workshop introduction
- 2:53Setup and environment
- 5:15Understanding pre-rendering
- 8:28Implementing pre-rendering
- 13:23Pre-render aware analytics
- 17:23Back/forward cache
- 20:03Unlocking bf cache
- 24:27Debugging bf cache
- 27:54Private prefetch proxy
- 30:10Implementing traffic advice
- 34:17Seamless transitions
- 36:57Implementing transitions
- 42:17Conclusion and resources
