使用 AMP Viewer 渲染电子邮件

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

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

Viewer XHR 拦截

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

XHR 请求

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

Viewer 和 AMP 文档通信

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

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

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

Viewer 服务器端模板渲染

viewerRenderTemplate 功能允许 Viewer 管理 <amp-list> 和 <amp-form> 模板渲染。启用此功能后，AMP 运行时会将包含原始 XHR 调用、模板数据以及渲染组件内容所需的任何其他详细信息的请求代理到 Viewer。这允许 Viewer 检查端点数据内容并管理 mustache 模板渲染，以验证和清理数据。请注意，如果此功能与 xhrInterceptor 一起启用，则在 amp-form 和 amp-list 组件中，同样会将请求代理到 Viewer 的 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 功能的电子邮件客户端 Viewer 中的 AMP 文档如何处理 <amp-list> 模板的渲染。

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

{
  "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 文档中进行渲染。

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

Viewer 功能	受影响的组件
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