Daftar isi

Menggunakan Penampil AMP untuk merender email

Klien email yang ingin mendukung AMP untuk Email harus menggunakan Penampil AMP untuk mengelola email AMP pengirim mereka. Penampil yang dibuat dengan perpustakaan Penampil AMP menyelubungi dokumen AMP dan memungkinkan kemampuan yang mengizinkan komunikasi dua arah dengan dokumen AMP melalui postMessage. Kemampuan ini meliputi pemberian kontrol atas visibilitas email, penyampaian metrik pengguna, dan menyediakan alat untuk memastikan keamanan permintaan XHR yang dibuat dari email.

Pencegatan XHR Penampil

Kemampuan xhrInterceptor perpustakaan Penampil AMP memungkinkan penampil mencegah permintaan XHR yang keluar. Penampil AMP dapat mengintrospeksi sebuah permintaan untuk mengetahui validitas dan niatnya untuk memastikan perlindungan dan privasi penggunanya.

Permintaan XHR

Komponen AMP, seperti <amp-list> dan <amp-form>, memerlukan panggilan ke endpoint untuk memuat atau mengambil data. Panggilan ini digolongkan sebagai permintaan XHR.

Komunikasi dokumen AMP dan Penampil

Protokol yang digunakan untuk komunikasi di antara penampil dan dokumen AMP dicapai melalui postMessage. Berikut ini adalah contoh kecil tentang postMessage yang berfungsi dalam kasus penggunaan pencegatan XHR, di mana penampil menangani postMessage XHR yang dikirimkan dari dokumen AMP dan menghasilkan tanggapan kustom.

// 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;
};

Mengaktifkan pencegatan XHR

Aktifkan pencegatan XHR dengan memilih penampil ke dalam kemampuan xhrInterceptor pada saat inisialisasi. Silakan lihat contoh penampil tentang cara melakukan ini dan contoh tentang pencegatan XHR. Dokumen AMP harus menerima untuk mengizinkan pencegatan XHR. Dokumen menerima dengan menambahkan atribut allow-xhr-interception ke tag <html amp4email>. Klien email harus memasang atribut ini pada dokumen AMP sebelum merendernya karena ini adalah atribut yang diniatkan invalid dan akan ditandai demikian dalam validasi dokumen AMP.

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

Perenderan templat sisi server penampil

Kemampuan viewerRenderTemplate memungkinkan penampil untuk mengelola perenderan templat <amp-list> dan <amp-form>. Setelah aktif, runtime AMP mewakili permintaan yang berisi panggilan XHR asli, data templat, dan detail lain apa pun yang diperlukan untuk perenderan konten komponen ke penampil. Ini memungkinkan penampil untuk menginstropeksi konten data endpoint dan mengelola perenderan misai (mustache) atas templat untuk memverifikasi dan mengamankan data. Harap ketahui bahwa jika kemampuan ini diaktifkan bersama xhrInterceptor, di dalam komponen amp-form dan amp-list, kemampuan viewerRenderTemplate yang juga mewakili permintaan ke penampil akan mengungguli xhrInterceptor.

Contoh viewer.html memperlihatkan bagaimana cara menangani pesan viewerRenderTemplate yang dikirimkan dari dokumen AMP. Di dalam contoh tersebut, Viewer.prototype.processRequest_ menangkap pesan viewerRenderTemplate dan berdasarkan jenis komponen AMP yang tersedia di dalam permintaan, mengirimkan kembali HTML untuk dirender di dalam format JSON berikut ini.

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',
      },
    },
  });

Ini adalah contoh kecil di mana tidak ada ketergantungan perpustakaan misai (mustache) atau sanitasi konten.

Diagram di bawah ini menggambarkan contoh yang lebih nyata tentang cara dokumen AMP di dalam penampil klien email dengan kemampuan viewerRenderTemplate dapat menangani perenderan templat <amp-list>.

Runtime AMP akan mewakili permintaan pengambilan data komponen <amp-list> ke penampil, yang pada gilirannya akan meneruskan permintaan ini ke server klien email. Server akan mengumpan URL ini dan hasil pengambilan URL melalui berbagai layanan, mungkin memeriksa validitas URL, konten data yang dihasilkan dari URL itu, dan merender templat misai (mustache) dengan data itu. Lalu, templat yang dirender akan dikembalikan dan dikirimkan kembali ke penampil di dalam format tanggapan JSON berikut ini.

{
  "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"
    }
  }
}

Nilai HTML dalam payload JSON adalah apa yang dimasukkan ke dalam dokumen AMP untuk perenderan.

Tabel di bawah ini menguraikan kemampuan dan komponen yang terpengaruh:

Kemampuan penampil	Komponen yang terpengaruh
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.dev/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)`

Written by @alabiaga