設定網頁應用程式

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

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

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

雖然您可以使用任何方法建構 UI，但 Google 建議您使用 下列程式庫：

架構

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 中查看這些錯誤訊息 平台記錄檔，請按照下列步驟操作：

  1. 在 Actions 主控台中開啟 Actions 專案。
  2. 按一下頂端導覽列中的「測試」。
  3. 點選「查看 Google Cloud Platform 中的記錄檔」連結。
，瞭解如何調查及移除這項存取權。

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

錯誤類型

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

  • 未在 10 秒內呼叫 ready 時發生的逾時
  • 未執行 onUpdate() 傳回的承諾時逾時 10 秒內
  • 未在網頁應用程式中找到的 JavaScript 執行階段錯誤
，瞭解如何調查及移除這項存取權。

查看 JavaScript 錯誤詳細資料

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

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

規範與限制

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

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

跨源資源共享

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

後續步驟

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