如何使用 Google Interactive Canvas 导入更多屏幕网页

Question

我想使用 Interctive-Cavas 通过 HTML、CSS 和 Js 自定义 Google NestHub。

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
  }));

url: https://${firebaseConfig.projectId}.firebaseapp.com 显示 index.html。但我还有许多其他 html 文件，例如：a.html、b.html、c.html、...想展示。

那么，怎么做呢？请帮助我！

非常感谢！

Answer 1

最佳做法是将交互式 Canvas 与 Single Page Application (SPA) 结合使用。在此方案中，您的 index.html 负责显示所有内容，尽管它可以从其他 URL 获取资源。

这可以让您进行漂亮的过渡，并在后续页面加载时为用户创造不那么刺耳的体验。

但是，没有什么可以阻止您在响应中加载不同的页面。因此，为了您的欢迎，您可能希望使用如下内容回复索引页：

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
  }));

而出于其他目的，您可能希望用不同的方式回复 URL。可能是这样的：

conv.ask(new HtmlResponse({
    url: `https://${firebaseConfig.projectId}.firebaseapp.com/page1.html`,
  }));

如果您使用的是单页模型，则可以发回数据并让页面中的 JavaScript 检测到这一点。此数据可以是您想要的任何内容，但可能看起来像这样（假设您有变量 pageNumber 和 name，其中包含要放在页面上的有用信息）

conv.ask(new HtmlResponse({
    data: {
      page: pageNumber,
      userName: name
    }
  }));

How to Import more screen Web Page with Google Interactive Canvas