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 电邮，以便可以将其视为 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 库加载之前，通过将 AMP for Email 样板放置在 <head> 中，最初隐藏电子邮件内容。

<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 的电子邮件客户端允许的 CSS 的完整列表，请参阅 AMP for Email 支持的 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 编写