İçindekiler

E-postaları işlemek için AMP Görüntüleyiciyi kullanma

E-posta için AMP'yi desteklemek isteyen e-posta istemcileri, e-göndericilerinin AMP e-postalarını barındırmak için AMP Görüntüleyiciyi kullanmalıdır. AMP Görüntüleyici kütüphanesiyle oluşturulmuş bir görüntüleyici, bir AMP belgesini sarmalar ve postMessage aracılığıyla AMP belgesiyle çift yönlü iletişime olanak tanıyan özellikleri etkinleştirir. Bu özellikler arasında e-postanın görünürlüğünün kontrolünün verilmesi, kullanıcı ölçümlerinin aktarılması ve e-postadan yapılan XHR isteklerinin güvenliğinin sağlanması için araçlar sağlanması vardır.

Görüntüleyici XHR müdahalesi

AMP Görüntüleyici kütüphanesinin xhrInterceptor özelliği, izleyicinin giden XHR isteklerine müdahale etmesine olanak tanır. AMP Görüntüleyici, kullanıcılarının korunmasını ve gizliliğini sağlamak adına bir isteğin geçerliliğini ve amacını incelemek için iç gözlem yapabilir.

XHR istekleri

<amp-list> ve <amp-form> gibi AMP bileşenleri, verileri göndermek veya almak için uç noktalara çağrı yapılmasını gerektirir. Bu çağrılar XHR istekleri olarak sınıflandırılır.

Görüntüleyici ve AMP belge iletişimi

Görüntüleyici ile AMP belgesi arasındaki iletişim için kullanılan protokol, postMessage aracılığıyla gerçekleştirilir. Aşağıda, bir görüntüleyicinin bir AMP belgesinden gönderilen xhr postMessage'ı işlediği ve özel bir yanıt döndürdüğü XHR müdahalesi kullanım örneğinde, postMessage'ı iş başında gösteren küçük bir örnek verilmiştir.

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

XHR müdahalesini etkinleştirme

Görüntüleyiciyi başlatma sırasında xhrInterceptor özelliğine dahil ederek xhr müdahalesini etkinleştirin. Lütfen bunun nasıl yapıldığına dair görüntüleyici örneğine ve xhr müdahalesi örneğine bakın. AMP belgesi daha sonra XHR müdahalesine izin vermeyi seçmelidir. Belgeler, allow-xhr-interception özniteliğini <html amp4email> etiketine ekleyerek etkinleştirir. E-posta istemcisi, bu öznitelik kasıtlı olarak geçersiz bir öznitelik olduğundan ve AMP belgesi doğrulaması sırasında bu şekilde işaretleneceğinden, işlemeden önce AMP belgesinde bu özniteliği ayarlamalıdır.

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

Görüntüleyici sunucu tarafı şablonu oluşturma

viewerRenderTemplate özelliği görüntüleyicinin <amp-list> ve <amp-form> şablon işlemesini yönetmeye izin verir. Bu özellik etkinleştirildiğinde, AMP çalışma zamanı, orijinal XHR çağrısını, şablon verilerini ve bileşen içeriklerini görüntüleyicide işlemek için gereken diğer ayrıntıları içeren bir isteği ara sunucuya alır. Bu, izleyicinin uç nokta veri içeriğine iç gözlem yapmasına ve verileri doğrulamak ve sterilize etmek için şablonların mustache oluşturmasını yönetmesine olanak tanır. Bu özellik xhrInterceptor ile birlikte amp-form ve amp-list bileşeninde etkinleştirilirse, görüntüleyiciye yönelik istekleri de ara sunucuya alan viewerRenderTemplate özelliğinin xhrInterceptor'ınkinden daha üstün olacağını unutmayın.

viewer.html örneği, AMP belgesinden gönderilen viewerRenderTemplate mesajının nasıl işlenebileceğini gösterir. Bu örnekte, Viewer.prototype.processRequest_, viewerRenderTemplate mesajını yakalar ve istekte bulunan amp bileşen türünü temel alarak, aşağıdaki JSON biçiminde oluşturulacak html'yi geri gönderir.

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

Bu, mustache kütüphane bağımlılığının veya içerik temizliğinin olmadığı küçük bir örnektir.

Aşağıdaki şema, viewerRenderTemplate özelliğine sahip bir e-posta istemcisi görüntüleyicisindeki bir AMP belgesinin <amp-list> şablonunun oluşturulmasını nasıl işleyebileceğine dair daha gerçekçi bir örneği göstermektedir.

AMP çalışma zamanı, <amp-list> bileşen veri getirme isteğini görüntüleyiciye aktarır ve o da bu isteği bir e-posta istemci sunucusuna iletir. Sunucu, bu URL'yi ve URL getirme sonuçlarını çeşitli hizmetler aracılığıyla besler, muhtemelen URL geçerliliğini, bu URL'den döndürülen verilerin içeriğini inceler ve mustache şablonlarını bu verilerle işler. Daha sonra işlenmiş şablonu döndürür ve aşağıdaki JSON yanıt biçiminde görüntüleyiciye geri gönderir.

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

JSON yükündeki html değeri, işleme için AMP belgesine enjekte edilen değer olacaktır.

Aşağıdaki tablo, özellikleri ve etkilenen bileşenleri özetlemektedir:

Görüntüleyici özelliği	Etkilenen bileşenler
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