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

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

查看器 XHR 拦截

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

XHR 请求

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

查看器和 AMP 文档通信

查看器和 AMP 文档之间通信所用的协议是通过 postMessage 实现的。以下是在 XHR 拦截用例中 postMessage 工作原理的简单示例，其中查看器处理从 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