對話動作已於 2023 年 6 月 13 日淘汰。詳情請參閱「對話動作已淘汰」。

本頁面由 Cloud Translation API 翻譯而成。

設定網頁應用程式

網頁應用程式使用互動性畫布的操作使用者介面 (UI)。你可以使用現有的網路技術 (例如 HTML、CSS、JavaScript 和 WebAssembly) 設計及開發網頁應用程式。在大部分情況下，互動式畫布會轉譯瀏覽器 (例如瀏覽器)，但強制執行多項使用者限制，保護使用者隱私和安全性。開始設計 UI 之前，請先考量「設計指南」中所述的設計原則。我們建議使用 Firebase 託管來部署您的網頁應用程式。

網頁應用程式的 HTML 和 JavaScript 會執行下列動作：

初始化 Interactive Canvas JavaScript 程式庫。
註冊 Interactive Canvas 事件回呼。
提供自訂邏輯，以便根據狀態更新網頁應用程式。

本頁面會說明建議的網頁應用程式建構方式、如何在對話動作和網頁應用程式之間啟用通訊功能，以及一般指南與限制。

建築

Google 強烈建議你採用單頁應用程式架構。這個方法能發揮最佳效能，並支援連續交談的使用者體驗。互動式 Canvas 可與前端架構搭配使用，例如 Vue、Angular 和 React，有助管理狀態。

HTML 檔案

HTML 檔案會定義 UI 的外觀。這個檔案也會載入 Interactive Canvas API，以便讓網頁應用程式和對話動作之間的通訊。

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.js`

此檔案包含透過 interactiveCanvas 定義回呼並叫用方法的程式碼。回呼可讓網頁應用程式回覆「對話動作」中的資訊或要求，而方法則可將資訊或要求傳送至「對話動作」。

在 HTML 檔案中加入 interactiveCanvas.ready(callbacks);，以便初始化並註冊回呼：

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 檔案，並在網頁應用程式載入時為這些檔案建立例項。這個模組也會註冊互動式 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 檔案會建構您的網頁應用程式的情境。以下是 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;
});

支援觸控互動

您的互動式 Canvas 動作可以回應使用者的輕觸和他們的輸入輸入內容。根據互動式 Canvas 設計指南，建議您將動作設為「語音優先」。儘管如此，某些智慧螢幕支援觸控互動。

支援觸控與支援對話回應類似，但用戶端用戶端會尋找觸控互動，並用來變更網頁應用程式的元素，而不只是使用者語音回應。

您可以在範例中使用 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;
});

疑難排解

雖然您可以使用「動作」控制台的模擬器在開發期間測試互動式畫布動作，但也可以查看在生產環境使用者裝置上的互動式 Canvas 網頁應用程式內發生的錯誤。您可以在 Google Cloud Platform 記錄中查看這些錯誤。

如要在 Google Cloud Platform 記錄中查看這些錯誤訊息，請按照下列步驟操作：

在動作控制台中開啟 Actions 專案。
按一下頂端導覽列中的「測試」。
按一下「前往 Google Cloud Platform 查看記錄」連結。

系統會按照時間順序在記錄檢視器中顯示使用者的裝置錯誤。

錯誤類型

Google Cloud Platform 記錄中有以下三種網頁應用程式錯誤：

未在 10 秒內呼叫 ready 時發生的逾時
未在 10 秒內完成 onUpdate() 傳回的承諾執行期間時發生的逾時
未在網頁應用程式中偵測到的 JavaScript 執行階段錯誤

查看 JavaScript 錯誤詳細資料

根據預設，系統無法提供網頁應用程式 JavaScript 執行階段錯誤的詳細資料。如要查看 JavaScript 執行階段錯誤的詳細資料，請按照下列步驟操作：

請務必在網頁應用程式檔案中設定適當的跨來源資源共享 (CORS) HTTP 回應標頭。詳情請參閱跨源資源共享一文。
將 crossorigin="anonymous" 新增至 HTML 檔案中匯入的 <script> 標記，如以下程式碼片段所示：

<script crossorigin="anonymous" src="<SRC>"></script>

指南與限制

開發網頁應用程式時，請將下列指南和限制納入考量：

沒有 Cookie
沒有本機儲存空間
沒有地理位置
未使用相機
無法錄製音訊或錄影
無彈出式視窗
維持在 200 MB 記憶體上限
轉譯內容時，將動作名稱標頭納入考量 (佔螢幕的部分內容)
影片沒有樣式
一次只能使用一個媒體元素
沒有網路 SQL 資料庫
不支援 Web Speech API 的 SpeechRecognition 介面。
深色模式設定不適用
智慧螢幕支援影片播放功能。如要進一步瞭解支援的媒體容器格式和轉碼器，請參閱 Google Nest Hub 轉碼器。

跨源資源共享

由於互動式 Canvas 網頁應用程式是由 iframe 代管，且來源設定為空值，因此您需要為網路伺服器和儲存空間資源啟用跨來源資源共享 (CORS)。此程序可讓資產接收空值來源的要求。

如果您的媒體和圖片是由 Firebase 代管，請參閱建立自訂網域動態連結以設定 CORS。
如果您的媒體和圖片位於 Cloud Storage，請參閱設定跨來源資源共享 (CORS) 來設定 CORS。

後續步驟

如要在網頁應用程式中加入更多功能，請參閱「透過用戶端或伺服器端執行要求繼續建構」。

設定網頁應用程式

推薦的資料庫

建築

HTML 檔案

HTML

在對話動作和網頁應用程式之間進行通訊

action.js

JavaScript

main.js

JavaScript

scene.js

JavaScript

支援觸控互動

JavaScript

疑難排解

錯誤類型

查看 JavaScript 錯誤詳細資料

指南與限制

跨源資源共享

後續步驟

`action.js`

`main.js`

`scene.js`