使用 AMP Viewer 渲染电子邮件

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

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

Viewer XHR 拦截

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

XHR 请求

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

Viewer 和 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>

Viewer 服务器端模板渲染

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 编写