Web 应用是使用 Interactive Canvas 的 Action 的界面 (UI)。 您可以使用现有的网络技术(如 HTML、CSS、JavaScript 和 WebAssembly)。大多数情况下 画布可以像浏览器一样渲染 Web 内容,但有一些限制 。在开始设计界面之前 请考虑设计准则中列出的设计原则。 我们建议使用 Firebase Hosting 来部署 Web 应用
Web 应用的 HTML 和 JavaScript 会执行以下操作:
- 初始化 Interactive Canvas JavaScript 库。
- 注册 Interactive Canvas 事件回调。
- 提供根据状态更新 Web 应用的自定义逻辑。
本页面介绍了构建 Web 应用的推荐方法,以及如何启用 对话型 Action 与 Web 应用之间的通信,以及一般准则 和限制。
推荐的库
尽管您可以使用任何方法来构建界面,但 Google 建议您使用 以下库:
- Greensock:用于构建复杂的动画。
- Pixi.js:用于在 WebGL 上绘制 2D 图形。
- Three.js:用于在 WebGL 上绘制 3D 图形。
- HTML5 画布绘图:适用于简单的绘图。
架构
Google 强烈建议使用单页应用架构。这个 方法可实现最佳性能,并支持持续对话式营销 用户体验。Interactive Canvas 可以与前端结合使用 Vue、Angular 和 React 等框架, 帮助管理状态
HTML 文件
HTML 文件定义了界面的外观。此文件还会加载 Canvas API:可在 Web 应用之间实现通信 和对话型 Action。
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Interactive Canvas Sample</title> <!-- Disable favicon requests --> <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,"> <!-- Load Interactive Canvas JavaScript --> <script src="https://www.gstatic.com/assistant/interactivecanvas/api/interactive_canvas.min.js"></script> <!-- Load PixiJS for graphics rendering --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script> <!-- Load Stats.js for fps monitoring --> <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script> <!-- Load custom CSS --> <link rel="stylesheet" href="css/main.css"> </head> <body> <div id="view" class="view"> <div class="debug"> <div class="stats"></div> <div class="logs"></div> </div> </div> <!-- Load custom JavaScript after elements are on page --> <script src="js/log.js"></script> <script type="module" src="js/main.js"></script> </body> </html>
在对话型 Action 和 Web 应用之间通信
构建 Web 应用和对话型 Action 并在 Interactive Canvas 库,您需要定义 Web 应用和 对话型 Action 互动。为此,请修改包含您的 Web 应用的文件 逻辑。
action.js
此文件包含用于定义回调并调用
方法到 interactiveCanvas
。回调可让 Web 应用
让应用响应对话型 Action 中的信息或请求,而方法
提供一种向对话型 Action 发送信息或请求的方式。
将 interactiveCanvas.ready(callbacks);
添加到 HTML 文件中,以进行初始化
注册回调:
JavaScript
/** * This class is used as a wrapper for Google Assistant Canvas Action class * along with its callbacks. */ export class Action { /** * @param {Phaser.Scene} scene which serves as a container of all visual * and audio elements. */ constructor(scene) { this.canvas = window.interactiveCanvas; this.gameScene = scene; const that = this; this.intents = { GUESS: function(params) { that.gameScene.guess(params); }, DEFAULT: function() { // do nothing, when no command is found }, }; } /** * Register all callbacks used by the Interactive Canvas Action * executed during game creation time. */ setCallbacks() { const that = this; // Declare the Interactive Canvas action callbacks. const callbacks = { onUpdate(data) { const intent = data[0].google.intent; that.intents[intent ? intent.name.toUpperCase() : 'DEFAULT'](intent.params); }, }; // Called by the Interactive Canvas web app once web app has loaded to // register callbacks. this.canvas.ready(callbacks); } }
main.js
main.js
JavaScript 模块会导入 action.js
和 scene.js
文件,以及
在 Web 应用加载时,为每个容器创建实例。本单元
为 Interactive Canvas 注册回调。
JavaScript
import {Action} from './action.js'; import {Scene} from './scene.js'; window.addEventListener('load', () => { window.scene = new Scene(); // Set Google Assistant Canvas Action at scene level window.scene.action = new Action(scene); // Call setCallbacks to register Interactive Canvas window.scene.action.setCallbacks(); });
scene.js
scene.js
文件用于为您的 Web 应用构建场景。以下是
摘录自scene.js
:
JavaScript
const view = document.getElementById('view'); // initialize rendering and set correct sizing this.radio = window.devicePixelRatio; this.renderer = PIXI.autoDetectRenderer({ transparent: true, antialias: true, resolution: this.radio, width: view.clientWidth, height: view.clientHeight, }); this.element = this.renderer.view; this.element.style.width = `${this.renderer.width / this.radio}px`; this.element.style.height = `${(this.renderer.height / this.radio)}px`; view.appendChild(this.element); // center stage and normalize scaling for all resolutions this.stage = new PIXI.Container(); this.stage.position.set(view.clientWidth / 2, view.clientHeight / 2); this.stage.scale.set(Math.max(this.renderer.width, this.renderer.height) / 1024); // load a sprite from a svg file this.sprite = PIXI.Sprite.from('triangle.svg'); this.sprite.anchor.set(0.5); this.sprite.tint = 0x00FF00; // green this.sprite.spin = true; this.stage.addChild(this.sprite); // toggle spin on touch events of the triangle this.sprite.interactive = true; this.sprite.buttonMode = true; this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
支持触摸互动
Interactive Canvas Action 可以响应用户的轻触操作以及 其声音输入。根据 Interactive Canvas 设计指南, 您应在开发 Action 时采用“语音优先”。尽管如此, 显示屏支持触摸交互。
支持触摸类似于支持对话式响应;不过, 而不是用户的语音响应,您的客户端 JavaScript 看起来 ,并使用此类互动来更改 Web 应用中的元素。
您可以在示例中看到示例,该示例使用 Pixi.js 库:
JavaScript
… this.sprite = PIXI.Sprite.from('triangle.svg'); … this.sprite.interactive = true; // Enables interaction events this.sprite.buttonMode = true; // Changes `cursor` property to `pointer` for PointerEvent this.sprite.on('pointerdown', () => { this.sprite.spin = !this.sprite.spin; });
问题排查
虽然您可以使用 Actions 控制台中的模拟器来测试 Interactive Canvas Action 中发生的错误,您还可以查看 将 Interactive Canvas Web 应用生产环境中的设备。您可以查看这些 Google Cloud Platform 日志中的错误。
如需在 Google Cloud 中查看这些错误消息, 请按照以下步骤操作:
- 在 Actions 控制台中打开您的 Actions 项目。
- 点击顶部导航栏中的 Test。
- 点击在 Google Cloud Platform 中查看日志链接。
用户的错误设备在日志查看器中按时间顺序显示。
错误类型
您可以在 Google Cloud Platform 日志中看到三种类型的 Web 应用错误:
- 未在 10 秒内调用
ready
时发生的超时 - 未执行
onUpdate()
返回的 promise 时发生的超时 10 秒内 - 您的 Web 应用中未捕获到的 JavaScript 运行时错误
查看 JavaScript 错误详情
您的 Web 应用内 JavaScript 运行时错误的详细信息 默认可用如需详细了解 JavaScript 运行时错误,请按照 具体步骤:
- 确保您已配置适当的跨源资源共享 (CORS) 您的应用文件中的 HTTP 响应标头。如需更多信息 请参阅跨域资源共享。
- 将
crossorigin="anonymous"
添加到以下位置中导入的<script>
标记: HTML 文件,如以下代码段所示:
<script crossorigin="anonymous" src="<SRC>"></script>
准则和限制
在开发代码时,请考虑以下准则和限制: 您的 Web 应用:
- 没有 cookie
- 没有本地存储空间
- 无地理定位
- 不使用摄像头
- 无法录制音频或视频
- 无弹出式窗口
- 不要超过 200 MB 的内存限制
- 呈现内容时,请考虑操作名称标头(占据 屏幕的上半部分)
- 没有样式无法应用于视频
- 一次只能使用一个媒体元素
- 无 Web SQL 数据库
- 不支持 Web Speech API 的
SpeechRecognition
接口。 - 深色模式设置不适用
- 智能显示屏支持视频播放。如需详细了解 支持的媒体容器格式和编解码器,请参阅 Google Nest Hub 编解码器。
跨域资源共享
因为 Interactive Canvas Web 应用托管在 iframe 中,并且来源已设置 设置为 null,您必须启用跨域资源共享 (CORS) Web 服务器和存储资源所需的资源。通过此流程,您的素材资源 接受来自 null 源的请求。
- 如果您的媒体和图片由 Firebase 托管,请参阅 创建自定义网域动态链接以配置 CORS。
- 如果您的媒体和图片位于 Cloud Storage 中,请参阅 配置跨域资源共享 (CORS) 配置 CORS
后续步骤
如需向您的 Web 应用添加更多功能,请参阅使用客户端构建应用继续 服务器端执行方式。