配置您的 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 应用添加更多功能，请参阅使用客户端构建应用继续 服务器端执行方式。