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

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

設定網頁應用程式

網頁應用程式是指使用互動式畫布的動作的使用者介面 (UI)。您可以使用現有的網路技術 (例如 HTML、CSS、JavaScript 和 WebAssembly)，設計及開發網頁應用程式。大多數情況下 Canvas 可以像瀏覽器一樣呈現網路內容，但有一些限制以保護使用者隱私和安全開始設計 UI 之前請考慮設計指南中列出的設計原則。建議使用 Firebase 代管部署網頁應用程式

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

初始化互動式畫布 JavaScript 程式庫。
註冊互動畫布事件回呼。
提供用於根據狀態更新網頁應用程式的自訂邏輯。

本頁將說明建構網頁應用程式的建議做法，以及如何啟用對話動作與網頁應用程式之間的通訊，以及一般指南和相關限制。

架構

Google 強烈建議使用單頁應用程式架構。這個做法可帶來最佳成效，並支援持續對話使用者體驗互動式畫布可與前端搭配使用包括 Vue、Angular 和 React 等架構這有助於管理狀態

HTML 檔案

HTML 檔案會定義使用者介面的外觀。這個檔案也會載入 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>

在 Conversational Action 和網頁應用程式之間進行通訊

建構網頁應用程式和對話動作並載入互動元件後網頁應用程式檔案中的 Canvas 程式庫，需要定義網頁應用程式和對話動作是互動的，如要這麼做，請修改內含網頁應用程式的檔案邏輯。

`action.js`

這個檔案內含用來定義回呼及叫用的程式碼方法透過 interactiveCanvas 執行。回呼功能可讓您應用程式回應「透過」對話動作回應資訊或要求，而可讓您在「對話動作」中傳送資訊或要求。

將 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 檔案，以及會在網頁應用程式載入時建立各個例項的執行個體。本單元也為互動式畫布註冊回呼。

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;
});

支援觸控互動

互動式畫布動作可以回應使用者的輕觸動作使用者的聲帶根據互動畫布設計指南規定，您應該將動作設計為「優先語音回應」。儘管如此螢幕支援觸控互動。

輔助觸控功能類似支援對話式回應；不過用戶端 JavaScript 會以，並用該元件變更網頁應用程式中的元素。

這個範例中的這個範例使用 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 主控台使用模擬工具測試互動性開發期間的 Canvas 動作，您也可以看到適用於使用者的互動式 Canvas 網頁應用程式。您可以在而非 Google Cloud Platform 記錄檔中的錯誤

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

在 Actions 主控台中開啟 Actions 專案。
按一下頂端導覽列中的「測試」。
點選「查看 Google Cloud Platform 中的記錄檔」連結。

，瞭解如何調查及移除這項存取權。

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

錯誤類型

在 Google Cloud Platform 記錄檔中，您可以查看三種類型的網頁應用程式錯誤：

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

，瞭解如何調查及移除這項存取權。

查看 JavaScript 錯誤詳細資料

您網頁應用程式中的 JavaScript 執行階段錯誤詳細資料並未預設可用如要查看 JavaScript 執行階段錯誤的詳細資料，請按照步驟如下：

確認您已設定適當的跨來源資源共用設定 (CORS) HTTP 回應標頭。如需更多資訊請參閱「跨來源資源共享」。
將 crossorigin="anonymous" 加進您匯入的 <script> 標記， HTML 檔案，如以下程式碼片段所示：

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

規範與限制

開發廣告活動時，請考量下列規範和限制方法是

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

跨源資源共享

因為互動式畫布網頁應用程式是由 iframe 代管，且來源已設定設為空值，您必須啟用跨源資源共享 (CORS) 網路伺服器和儲存空間資源這項程序可讓素材資源接受來自空值來源的要求。

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

後續步驟

如要在網頁應用程式新增更多功能，請參閱「繼續使用用戶端或伺服器端執行要求。

設定網頁應用程式

推薦程式庫

架構

HTML 檔案

HTML

在 Conversational Action 和網頁應用程式之間進行通訊

action.js

JavaScript

main.js

JavaScript

scene.js

JavaScript

支援觸控互動

JavaScript

疑難排解

錯誤類型

查看 JavaScript 錯誤詳細資料

規範與限制

跨源資源共享

後續步驟

`action.js`

`main.js`

`scene.js`