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 的標準。
包含頂層的 <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 函式庫。

<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 建立了一個 <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 電子郵件支援有限的 CSS 選擇器和屬性子集。

請參閱 AMP 電子郵件支援的 CSS，以取得支援 AMP 的電子郵件用戶端允許使用的完整 CSS 清單。

AMP 強制樣式設定的大小限制為 75,000 位元組。

允許的 AMP 元件

AMP 元件的動態、視覺和互動功能將 AMP 電子郵件帶入電子郵件的未來。

AMP 電子郵件中支援的元件完整清單可作為 AMP 電子郵件規格的一部分提供。

驗證請求

動態個人化電子郵件內容通常需要驗證使用者。但是，為了保護使用者資料，從 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 發送一封電子郵件，其中包含他們先前所做筆記的清單。目前使用者的筆記清單可在端點 https://example.com/personal-notes 中以 JSON 格式取得。

在發送電子郵件之前，該服務為 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 的組合是您必須預先產生的組合，確保 accessToken 無法從 requestId 推導出來。任何具有 requestId=123 且沒有 accessToken 或 accessToken 不等於 xyz 的核准請求都應被拒絕。如果動作應該是一次性動作，一旦此請求通過，則任何具有相同 ID 和存取權杖的未來請求也應被拒絕。

在不同的電子郵件用戶端中測試

支援 AMP 電子郵件的電子郵件用戶端提供他們自己的文件和測試工具，以協助您進行整合。

請參閱測試 AMP 電子郵件以取得更多資訊以及電子郵件用戶端特定文件的連結。

由 @CrystalOnScript 撰寫