AMP 电子邮件基础知识

如果您熟悉 AMP，这再好不过了！AMP 电子邮件只是 AMP HTML 库的一部分。如果您不熟悉 AMP，也是一件好事！本指南将向您介绍在开始编写有效的 AMP 电子邮件时需要知道的所有知识！

所需标记

AMP 电子邮件与传统 HTML 电子邮件看起来很像，但存在几点区别。以下列出了在让电子邮件成为有效的 AMP 电子邮件时所需的最少量标记。

<!DOCTYPE html>
<html ⚡4email data-css-strict>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    Hello, AMP4EMAIL world.
  </body>
</html>

支持 AMP 电子邮件的电子邮件服务提供商已设置安全检查，旨在确保用户获得安全愉悦的体验。使用 AMP 构建电子邮件必须满足以下所有要求：

以 <!doctype html> 文档类型开头。这也是 HTML 的标准。
包含顶级 <html amp4email> 标记或 <html ⚡4email> 标记（如果电子邮件格外酷）。这可以将文档标识为 AMP 电子邮件，从而以相应方式对待该文档。
定义 <head> 和 <body> 标记。这一点在 HTML 中为可选项，但 AMP 保留了原始做法！
包括 <meta charset="utf-8> 标记，作为 <head> 标记的第一个子级。这样可以标识网页的编码。
利用放在 <head> 中的 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记导入 AMP 库。只有包括此标记，才能让通过 AMP 获得的炫酷动态功能起作用！最佳做法是，应该尽早在 <head> 中添加此标记，直接放在 <meta charset="utf-8"> 标记下方。
最初隐藏电子邮件内容，直到在 <head> 中放置 AMP 电子邮件样板来加载 AMP 库。

<head>
  ...
  <style amp4email-boilerplate>
    body {
      visibility: hidden;
    }
  </style>
</head>

AMP 特有的标记替换

由于 AMP 电子邮件库是 AMP HTML 库的一部分，许多相同的规则均适用；AMP 特有的标记会替换占用较多资源的 HTML 标记，并且需要定义的宽度和高度。这样，AMP 样板便可隐藏内容，直到它知道自己在用户设备上的显示情况。

图片

为了有效绘制网页，所有 <img> 标记均会替换为 <amp-img>。<amp-img> 标记需要定义的宽度和高度，并且支持 AMP 的布局系统。

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

<amp-img> 标记本身可以强有力地控制自适应设计并设置后退。

详细了解 AMP 布局和媒体查询的使用以及如何设置图片后备。

GIF

AMP 为 GIF 图片创建了一个特殊标记 <amp-anim>，如果动画离屏，该标记允许 AMP 运行时降低 CPU 占用率。与 <amp-img> 类似，该标记的宽度和高度已定义，该元素必须包括结束标记。

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

此外，该标记还支持在加载 src 文件时显示可选的 placeholder 子级，并且支持 AMP 布局系统。

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

具有样式的电子邮件

与所有电子邮件客户端一样，AMP 支持内嵌 style 属性，此外，也支持将 CSS 放在电子邮件 head 的 <style amp-custom> 标记中。

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

与 HTML 电子邮件一样，AMP 电子邮件支持一组有限的 CSS 选择器和属性。

有关支持 AMP 且允许在所有电子邮件客户端上使用的完整 CSS 列表，请参阅 AMP 电子邮件支持的 CSS。

AMP 要求样式的最大大小为 75,000 字节。

允许使用的 AMP 组件

AMP 组件的动态性、生动性和互动性是 AMP 电子邮件对未来电子邮件的展望。

AMP 电子邮件中支持的完整组件列表作为 AMP 电子邮件规范的一部分提供。

身份验证请求

动态的个性化电子邮件内容通常要求对用户进行身份验证。但是，为了保护用户数据，在 AMP 电子邮件中发出的所有 HTTP 请求均可进行代理并移除 Cookie。

为了对 AMP 电子邮件发出的请求进行身份验证，可以使用访问令牌。

访问令牌

您可以使用访问令牌来验证用户身份。访问令牌由电子邮件发件人提供和检查。发件人使用令牌来确保只有有权访问 AMP 电子邮件的用户才能发出该电子邮件中包含的请求。访问令牌必须受密码保护，并且使用时间和范围受限。这些令牌包括在请求网址中。

以下示例阐述了使用 <amp-list> 来显示经过身份验证的数据：

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache"> ... </template>
</amp-list>

同样，在使用 <amp-form> 时，需要将访问令牌放在 action-xhr 网址中。

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

示例

以下示例假设有一项假想的记事服务，用于让登录用户在其帐户中添加备注并在以后查看这些备注。该服务想要向用户 jane@example.com 发送电子邮件，其中包括她以前添加的备注列表。当前用户的备注列表可以在端点 https://example.com/personal-notes 上以 JSON 格式提供。

在发送电子邮件之前，该服务为 jane@example.com: A3a4roX9x 生成一个受密码保护且使用受限的访问令牌。该访问令牌位于网址查询的字段名 exampletoken 中：

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

端点 https://example.com/personal-notes 负责验证 exampletoken 参数并查找与令牌关联的用户。

使用受限的访问令牌

借助使用受限的访问令牌，可以防止请求仿冒和重放攻击，确保操作是由收到邮件的用户执行的。此保护的实现方式是，将唯一的令牌参数添加到请求参数，并在调用操作时对该令牌参数进行验证。

令牌参数应当作为密钥生成，该密钥只能用于特定操作和特定用户。在执行所请求的操作之前，您应当检查以确认该令牌有效并与您为用户生成的令牌一致。如果令牌一致，则可执行操作并且该令牌不适用于以后的请求。

访问令牌应当放在 HttpActionHandler 的网址属性中发送给用户。例如，如果您的应用在 http://www.example.com/approve?requestId=123 上处理审批请求，您应当考虑在其中另外添加 accessToken 参数，并侦听发送到 http://www.example.com/approve?requestId=123&accessToken=xyz 的请求。

您必须提前生成 requestId=123 和 accessToken=xyz 的组合，确保无法从 requestId 推导出 accessToken。只要审批请求具有 requestId=123，但没有 accessToken 或者 accessToken 不等于 xyz，都应该遭到拒绝。此请求通过后，以后具有相同 ID 和访问令牌的请求也应该遭到拒绝。

在不同的电子邮件客户端上进行测试

支持 AMP 电子邮件的电子邮件客户端本身会提供文档和测试工具，帮助您进行集成。

有关详细信息以及电子邮件客户端特定的文档链接，请参阅测试 AMP 电子邮件。

Written by @CrystalOnScript