配置您的 Web 应用

Web 应用是使用 Interactive Canvas 的 Action 的界面 (UI)。 您可以使用现有的网络技术（如 HTML、CSS、JavaScript 和 WebAssembly）。大多数情况下 画布可以像浏览器一样渲染 Web 内容，但有一些限制 。在开始设计界面之前 请考虑设计准则中列出的设计原则。 我们建议使用 Firebase Hosting 来部署 Web 应用

Web 应用的 HTML 和 JavaScript 会执行以下操作：

本页面介绍了构建 Web 应用的推荐方法，以及如何启用 对话型 Action 与 Web 应用之间的通信，以及一般准则 和限制。

尽管您可以使用任何方法来构建界面，但 Google 建议您使用 以下库：

架构

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 中查看这些错误消息， 请按照以下步骤操作：

  1. 在 Actions 控制台中打开您的 Actions 项目。
  2. 点击顶部导航栏中的 Test。
  3. 点击在 Google Cloud Platform 中查看日志链接。
。

用户的错误设备在日志查看器中按时间顺序显示。

错误类型

您可以在 Google Cloud Platform 日志中看到三种类型的 Web 应用错误：

  • 未在 10 秒内调用 ready 时发生的超时
  • 未执行 onUpdate() 返回的 promise 时发生的超时 10 秒内
  • 您的 Web 应用中未捕获到的 JavaScript 运行时错误
。

查看 JavaScript 错误详情

您的 Web 应用内 JavaScript 运行时错误的详细信息 默认可用如需详细了解 JavaScript 运行时错误，请按照 具体步骤：

  1. 确保您已配置适当的跨源资源共享 (CORS) 您的应用文件中的 HTTP 响应标头。如需更多信息 请参阅跨域资源共享。
  2. 将 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 源的请求。

后续步骤

如需向您的 Web 应用添加更多功能，请参阅使用客户端构建应用继续 服务器端执行方式。