add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -9,6 +9,7 @@
 - 官方资料导航
 - 三路径对比仪表盘
 - WebMCP 可运行工程入口
+- MWG / DevTools / Canvas / View Transitions 演示入口
 - 现场讲述卡片
 - 网络不可用时继续演示

@@ -30,7 +31,7 @@
 </div>

 <div class="mt-8 card-blue text-sm">
-打开总入口：<span class="font-mono">/demo/index.html</span>；WebMCP 工程入口：<span class="font-mono">/demo/webmcp/index.html</span>。
+打开总入口：<span class="font-mono">/demo/index.html</span>。正式 demo 入口都从这里进入。
 </div>

 <!--
@@ -0,0 +1,50 @@
+# Demo 6：DevTools for agents 官方流程
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">官方 MCP 配置</div>
+
+```json
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["chrome-devtools-mcp@latest"]
+    }
+  }
+}
+```
+
+</div>
+
+<div class="card-red">
+<div class="font-semibold mb-3">本地检查目标</div>
+<div class="space-y-2 text-sm">
+
+- <span class="font-mono">/demo/devtools-agents/index.html</span>
+- 故意制造 console warning / error
+- 故意制造 404 图片
+- 点击按钮触发长任务
+- 让 Agent 读取 console、network、trace
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card text-sm">
+讲解结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/docs/devtools/agents/get-started
+- https://github.com/ChromeDevTools/chrome-devtools-mcp
+
+现场 prompt:
+Open http://localhost:3030/demo/devtools-agents/index.html.
+Inspect console and network errors.
+Then click "触发长任务" and record a performance trace.
+Summarize what you found.
+-->
@@ -0,0 +1,40 @@
+# Demo 7：HTML-in-Canvas
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">官方能力</div>
+<div class="space-y-2 text-sm">
+
+- 把真实 DOM 绘制进 Canvas / WebGL / WebGPU 场景
+- 保留可访问性、搜索、翻译等浏览器能力
+- 当前是 origin trial，环境要求高
+- 现场必须准备 fallback
+
+</div>
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">本地演示</div>
+<div class="space-y-2 text-sm">
+
+- 打开 <span class="font-mono">/html-in-canvas/index.html</span>
+- 支持时调用 <span class="font-mono">drawElementImage()</span>
+- 不支持时显示同一 DOM 表单的 fallback 预览
+- 讲清楚“DOM 进入画布”而不是“canvas 手绘控件”
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+运行条件：Chrome Canary 149+，开启 <span class="font-mono">chrome://flags/#canvas-draw-element</span>；Chrome 官方说明该 API 在 Chrome 148-150 处于 origin trial。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/blog/html-in-canvas-origin-trial
+
+不要承诺现场一定能跑原生 API。演示核心是 API 方向和浏览器支持边界。
+-->
@@ -0,0 +1,41 @@
+# Demo 5：Modern Web Guidance 官方 CLI
+
+<div class="grid grid-cols-[1.1fr_0.9fr] gap-8 mt-8">
+
+<div class="card-blue">
+<div class="font-semibold mb-3">现场命令</div>
+
+```bash
+npx modern-web-guidance@latest search "animate a dialog modal backdrop"
+npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
+```
+
+</div>
+
+<div class="card-green">
+<div class="font-semibold mb-3">讲什么</div>
+<div class="space-y-2 text-sm">
+
+- AI coding agent 容易写旧方案
+- MWG 把现代 Web 指南变成可检索技能
+- search 找 use case，retrieve 拿具体指南
+- 指南会带 Baseline / fallback 意识
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card-amber text-sm">
+本地辅助页：<span class="font-mono">/demo/modern-web-guidance/index.html</span>；脚本：<span class="font-mono">scripts/demo-modern-web-guidance.sh</span>。
+</div>
+
+<!--
+官方依据：
+- https://developer.chrome.com/docs/modern-web-guidance/get-started
+
+现场顺序：
+1. 先跑 search，看官方返回的 use case 列表。
+2. 再跑 retrieve，看具体 Markdown 指南。
+3. 打开本地辅助页展示 dialog/top-layer 动画的现代写法。
+-->
@@ -1,4 +1,4 @@
-# Demo 6：Chrome 官方新特性快闪
+# Demo 9：最后快闪与串联

 <div class="grid grid-cols-2 gap-8 mt-8">

@@ -7,9 +7,10 @@
 <div class="space-y-2 text-sm">

 - WebMCP：页面暴露工具给 Agent
- Modern Web Guidance：给 AI 编程工具补现代 Web 知识
- DevTools for agents：让 Agent 看见浏览器运行时
- Prompt API：浏览器内置 AI 能力
+- WebMCP：页面暴露工具给 Agent
+- Modern Web Guidance：已演示官方 CLI
+- DevTools for agents：已演示官方 MCP 流程
+- Prompt API：官方 demo 快闪

 </div>
 </div>
@@ -18,9 +19,9 @@
 <div class="font-semibold mb-3">体验与平台能力</div>
 <div class="space-y-2 text-sm text-gray-300">

- HTML-in-Canvas：真实 DOM 进入 Canvas / 3D
+- HTML-in-Canvas：已演示本地页和官方限制
 - Baseline：判断哪些 Web 能力可以放心评估
- View Transitions：页面状态切换更自然
+- View Transitions：已演示本地页
 - Navigation API：更现代的导航状态管理

 </div>
@@ -29,7 +30,7 @@
 </div>

 <div class="mt-8 card-amber text-sm">
-只讲位置，不展开 API：这些官方 demo 共同说明 Chrome 正在同时升级 Agent 交互、开发工作流和用户体验。
+最后用这页收束：Chrome 新能力不是孤立 API，而是同时升级 Agent 交互、开发工作流和用户体验。
 </div>

 <!--
@@ -42,5 +43,5 @@
 6. Baseline: https://web.dev/baseline
 7. View Transitions: https://view-transitions.chrome.dev/

-讲法：每个只用 30-45 秒。不要现场深入配置，避免偏离 WebMCP 主线。
+讲法：这里不再逐个展开，只做总览收束和听众记忆点。
 -->
@@ -28,13 +28,14 @@
 </div>

 <div class="card-amber">
-<div class="font-semibold mb-3">官方快闪</div>
+<div class="font-semibold mb-3">新增正式 demo</div>
 <div class="space-y-2 text-sm">

 - Modern Web Guidance
 - DevTools for agents
- Prompt API / HTML-in-Canvas
- Baseline / View Transitions
+- HTML-in-Canvas
+- View Transitions
+- Prompt API / Baseline 保留快闪

 </div>
 </div>
@@ -42,7 +43,7 @@
 </div>

 <div class="mt-8 card text-sm">
-原则：WebMCP 至少要有可运行工程；其他 Chrome 新能力用官方 demo 快闪，避免把现场变成环境配置课。
+原则：WebMCP 是主 demo；Modern Web Guidance 和 DevTools for agents 按官方流程演示；HTML-in-Canvas 和 View Transitions 用本地页面辅助展示。
 </div>

 <!--
@@ -0,0 +1,37 @@
+# Demo 8：View Transitions
+
+<div class="grid grid-cols-2 gap-8 mt-8">
+
+<div class="card-green">
+<div class="font-semibold mb-3">为什么演示</div>
+<div class="space-y-2 text-sm">
+
+- 效果直观，风险低
+- 能说明 Chrome 在升级 Web 体验能力
+- 适合和 Agentic Web 主线形成对照：工具层和体验层都在进化
+
+</div>
+</div>
+
+<div class="card-blue">
+<div class="font-semibold mb-3">运行入口</div>
+<div class="space-y-2 text-sm">
+
+- 打开 <span class="font-mono">/demo/view-transitions/index.html</span>
+- 点击订单 / 分析 / 设置
+- 支持时走 <span class="font-mono">document.startViewTransition()</span>
+- 不支持时普通切换
+
+</div>
+</div>
+
+</div>
+
+<div class="mt-8 card text-sm">
+讲解结论：View Transitions 把“状态变化”从手写动画提升为浏览器级能力，适合渐进增强。
+</div>
+
+<!--
+官方入口：
+- https://view-transitions.chrome.dev/
+-->