电子邮件 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> doctype 开始。这也是 HTML 的标准。
包含顶级 a <html amp4email> 标记，或 <html ⚡4email> 标记（如果您的电子邮件非常酷）。这将文档标识为 AMP 电子邮件，以便将其视为 AMP 电子邮件。
定义 <head> 和 <body> 标记。这在 HTML 中是可选的，但 AMP 会保持一切整洁！
将 <meta charset="utf-8> 标记作为 <head> 标记的第一个子标记。这会识别页面的编码。
AMP 库通过放置在 <head> 中的 <script async src="https://cdn.ampproject.org/v0.js"></script> 标记导入。如果没有它，通过 AMP 获得的所有出色且动态的功能都将无法正常工作！最佳做法是将其包含在 <head> 中尽可能早的位置，直接位于 <meta charset="utf-8"> 标记下方。
在将 AMP 库加载到 <head> 中的 AMP for Email 样板之前，先隐藏电子邮件内容。

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

AMP 特定标签替换

由于 AMP for Email 库是 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 已创建 <amp-anim>，这是一个针对 GIF 图像的特定标记，允许 AMP 运行时在动画不在屏幕上时减少 CPU 使用率。与 <amp-img> 类似，宽度和高度是已定义的，并且元素必须包含一个结束标记。

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

此外，它还支持一个可选的 placeholder 子项，以便在加载 src 文件时显示，并支持 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 属性，但也支持电子邮件头部内的 <style amp-custom> 标记中的 CSS。

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

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

请参阅 AMP for Email 支持的 CSS，以获取支持 AMP 的电子邮件客户端允许的所有 CSS 的完整列表。

AMP 强制执行 75,000 字节的样式大小限制。

允许的 AMP 组件

AMP 组件的动态、可视和互动特性是 AMP 电子邮件进入电子邮件未来的原因。

完整的 AMP for Email 中支持的组件列表可作为 AMP for Email 规范的一部分获得。

验证请求

动态个性化电子邮件内容通常需要对用户进行身份验证。但是，为了保护用户数据，从 AMP 电子邮件内部发出的所有 HTTP 请求都可能被代理并剥离 Cookie。

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

访问令牌

可以使用访问令牌对用户进行身份验证。访问令牌由电子邮件发件人提供并检查。发件人使用令牌来确保只有有权访问 AMP 电子邮件的人员才能发出该电子邮件中包含的请求。访问令牌必须是加密安全的，并且受时间和范围限制。它们包含在请求的 URL 中。

此示例演示使用 <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 URL 中。

<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 发送一封电子邮件，其中包括他们之前所做的笔记列表。当前用户的笔记列表以 JSON 格式在端点 https://example.com/personal-notes 中提供。

在发送电子邮件之前，该服务为 jane@example.com: A3a4roX9x 生成了加密安全的有限用途访问令牌。访问令牌包含在 URL 查询中的字段名称 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 的 url 属性的一部分发送给用户。例如，如果您的应用程序在 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 for Email 的电子邮件客户端提供自己的文档和测试工具，以帮助您进行集成。

请参阅测试 AMP 电子邮件以获取更多信息和电子邮件客户端特定文档的链接。

由 @CrystalOnScript 撰写