使用 AMP 查看器渲染电子邮件

重要提示：此文档不适用于您当前选择的格式广告！

希望支持 AMP for Email 的电子邮件客户端应使用 AMP 查看器来托管其发件人的 AMP 电子邮件。使用 AMP 查看器库构建的查看器封装了一个 AMP 文档，并启用功能，允许通过 postMessage 与 AMP 文档进行双向通信。这些功能包括控制电子邮件的可见性、传递用户指标以及提供确保电子邮件发出的 XHR 请求安全性的方法。

查看器 XHR 拦截

AMP 查看器库的 xhrInterceptor 功能允许查看器拦截传出的 XHR 请求。 AMP 查看器可以检查请求的有效性和意图，以确保其用户的保护和隐私。

XHR 请求

诸如 <amp-list> 和 <amp-form> 等 AMP 组件需要调用端点来发布或检索数据。这些调用被归类为 XHR 请求。

查看器和 AMP 文档通信

查看器和 AMP 文档之间用于通信的协议通过 postMessage 实现。以下是 postMessage 在 XHR 拦截用例中工作的简单示例，其中查看器处理从 AMP 文档发送的 xhr postMessage 并返回自定义响应。

// The viewer iframe that will host the amp doc.
viewerIframe = document.createElement('iframe');
viewerIframe.contentWindow.onMessage = (xhrRequestIntercepted) => {
   const blob = new Blob([JSON.stringify({body: 'hello'}, null, 2)], {type: 'application/json'});
   const response = new Reponse(blob, {status: 200});
   return response;
};

启用 XHR 拦截

通过在初始化时选择查看器的 xhrInterceptor 功能来启用 xhr 拦截。请参阅查看器示例了解如何执行此操作以及有关 xhr 拦截的示例。然后，AMP 文档必须选择允许 XHR 拦截。文档通过将 allow-xhr-interception 属性添加到 <html amp4email> 标记来选择加入。电子邮件客户端必须在渲染 AMP 文档之前在该文档上设置此属性，因为它有意是一个无效属性，并且会在 AMP 文档验证期间被标记为无效。

<!doctype html>
<html ⚡4email allow-xhr-interception>
  ...    
</html>

查看器服务器端模板渲染

viewerRenderTemplate 功能允许查看器管理 <amp-list> 和 <amp-form> 模板渲染。启用此功能后，AMP 运行时会将包含原始 XHR 调用、模板数据和渲染组件内容所需的任何其他详细信息的请求代理到查看器。这允许查看器检查端点数据内容，并管理 mustache 模板渲染以验证和清理数据。请注意，如果此功能与 xhrInterceptor 一起启用，则在 amp-form 和 amp-list 组件中，也会将请求代理到查看器的 viewerRenderTemplate 功能将取代 xhrInterceptor 的功能。

viewer.html 示例展示了如何处理从 AMP 文档发送的 viewerRenderTemplate 消息。在该示例中，Viewer.prototype.processRequest_ 会捕获 viewerRenderTemplate 消息，并根据请求中可用的 amp 组件类型，以以下 JSON 格式发回要渲染的 html。

Viewer.prototype.ssrRenderAmpListTemplate_ = (data) => Promise.resolve({
  "html":
    "<div role='list' class='i-amphtml-fill-content i-amphtml-replaced-content'>"
      + "<div class='product' role='listitem'>Apple</div>"
      + "</div>",
  "body" : "",
  "init" : {
    "headers": {
      "Content-Type": "application/json",
    }
  }
});

这是一个简单的示例，其中没有 mustache 库依赖项或内容清理。

下图说明了一个更真实的示例，说明了带有 viewerRenderTemplate 功能的电子邮件客户端查看器中的 AMP 文档如何处理 <amp-list> 模板的渲染。

AMP 运行时会将 <amp-list> 组件数据提取请求代理到查看器，查看器又会将此请求转发到电子邮件客户端服务器。服务器将通过各种服务提供此 URL 和 URL 提取的结果，可能会检查 URL 有效性、从该 URL 返回的数据内容，并使用该数据渲染 mustache 模板。然后，它将返回渲染的模板，并以以下 JSON 响应格式将其发送回查看器。

{
  "html": "<div role='list' class='i-amphtml-fill-content i-amphtml-replaced-content'> <div class='product' role='listitem'>List item 1</div> <div class='product' role='listitem'>List item 2</div> </div>",
  "body": "",
  "init" : {
    "headers": {
      "Content-Type": "application/json",
    }
  }
}

JSON 有效负载中的 html 值将是要注入到 AMP 文档中以进行渲染的值。

下表概述了功能和受影响的组件

查看器功能	受影响的组件
xhrInterceptor	`[amp-form](../../../documentation/components/reference/amp-form.md?format=email), [amp-list](../../../documentation/components/reference/amp-list.md?format=email), [amp-state](https://amp.org.cn/documentation/components/amp-bind?format=email#initializing-state-with-amp-state)`
viewerRenderTemplate	`[amp-form](../../../documentation/components/reference/amp-form.md?format=email), [amp-list](../../../documentation/components/reference/amp-list.md?format=email)`

作者： @alabiaga