对话型 Action 已于 2023 年 6 月 13 日弃用。如需了解详情，请参阅对话型 Action 停用。

此页面由 Cloud Translation API 翻译。

配置您的 Web 应用

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 强烈建议使用单页应用架构。这个方法可实现最佳性能，并支持持续对话式营销用户体验。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 应用添加更多功能，请参阅使用客户端构建应用继续服务器端执行方式。

配置您的 Web 应用

推荐的库

架构

HTML 文件

HTML

在对话型 Action 和 Web 应用之间通信

action.js

JavaScript

main.js

JavaScript

scene.js

JavaScript

支持触摸互动

JavaScript

问题排查

错误类型

查看 JavaScript 错误详情

准则和限制

跨域资源共享

后续步骤

`action.js`

`main.js`

`scene.js`