Interactive Canvas 是基于 Google 助理构建的框架，可让开发者为对话型 Action 添加沉浸式视觉体验。此视觉体验是一个交互式 Web 应用，Google 助理会在对话中作为回应发送给用户。与 Google 助理对话中内嵌的传统富媒体响应不同，Interactive Canvas Web 应用会以全屏 Web 视图的形式呈现。
如果您想在 Action 中执行以下任一操作，应使用 Interactive Canvas：
- 打造全屏视觉效果
- 创建自定义动画和过渡
- 直观呈现数据
- 创建自定义布局和 GUI
支持的设备
互动式画布目前可在以下设备上使用：
- 智能显示屏
- Google Nest Hub
Android 移动设备
运作方式
使用 Interactive Canvas 的 Action 与常规对话型 Action 的工作方式类似。用户仍与 Google 助理进行来回对话以实现自己的目标；但是，互动式画布操作会向用户发送可打开全屏 Web 应用的响应，而不是在对话中返回响应，而用户可以继续通过语音或轻触与 Web 应用互动，直到对话结束。
使用 Interactive Canvas 的 Action 有几个组成部分：
- 对话型 Action：一种使用对话界面执行用户请求的 Action。交互式 Canvas Action 使用网页视图来呈现响应，而不是复合信息卡或简单的文本和语音响应。对话型 Action 使用以下组件：
- Dialogflow 代理：您在 Dialogflow 中自定义为与 Action 用户对话的项目。
- 执行方式：部署为 webhook 的代码，可实现 Dialogflow 代理的对话逻辑并与 Web 应用通信。
- Web 应用：这是一种前端 Web 应用，包含您的 Action 在对话期间向用户发送的自定义视觉元素。您可以使用 HTML、JavaScript 和 CSS 等 Web 标准构建 Web 应用。
对话型 Action 和 Web 应用通过以下方式相互通信：
- Interactive Canvas API：一个 JavaScript API，包含在 Web 应用中，用于在 Web 应用与对话型 Action 之间进行通信。
HtmlResponse：此响应包含 Web 应用的网址和要传递的数据。您可以使用 Node.js 或 Java 客户端库返回HtmlResponse。
为了说明 Interactive Canvas 的工作原理，我们假设有一个称为 Cool Colors 的 Action，该操作将设备屏幕的颜色更改为用户指定的颜色。用户调用 Action 后，该流程将如下所示：
- 用户对支持 Google 助理的设备说“
Turn the screen blue”。 - Actions on Google 平台会将用户的请求路由到 Dialogflow 以匹配 intent。
- 匹配的 intent 的执行方式会运行，并且系统会向设备发送一个
HtmlResponse。如果设备尚未加载 Web 应用，系统会使用该网址加载该应用。 - Web 应用加载时，会使用
interactiveCanvasAPI 注册回调。然后，data对象的值将传递到 Web 应用的已注册onUpdate回调。在本例中，执行方式会发送一个HtmlResponse，其data包含一个值为blue的变量。 - Web 应用的自定义逻辑会读取
HtmlResponse的data值，并做出定义的更改。在此示例中，这会使屏幕变为蓝色。 interactiveCanvas将回调更新发送到设备。
后续步骤
如需了解如何构建 Interactive Canvas Action，请参阅构建概览页面。
如需查看完整的 Interactive Canvas Action 的代码，请参阅示例。