Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Używanie środowiska AMP Viewer do renderowania wiadomości e-mail

Programy pocztowe w celu obsługi AMP dla poczty e-mail powinny używać środowiska AMP Viewer do hostowania wiadomości e-mail AMP nadawcy. Przeglądarka utworzona przy użyciu biblioteki AMP Viewer hermetyzuje dokument AMP i zapewnia funkcje umożliwiające dwukierunkową komunikację z dokumentem AMP za pomocą metody postMessage. Funkcje te umożliwiają kontrolę widoczności poczty elektronicznej, przekazywanie metryk użytkownika oraz zapewnienie środków chroniących bezpieczeństwo żądań XHR wysyłanych z poczty elektronicznej.

Przechwytywanie żądań XHR przez przeglądarkę

Funkcja xhrInterceptor z biblioteki AMP Viewer umożliwia przechwytywanie wychodzących żądań XHR. AMP Viewer może sprawdzić prawidłowość żądania i celu zapewnienia ochrony i prywatności użytkowników.

Żądania XHR

Składniki AMP takie jak <amp-list> i <amp-form> wymagają wywołań do punktów końcowych w celu przesłania lub pobrania danych. Wywołania te klasyfikuje się jako żądania XHR.

Komunikacja z przeglądarką i dokumentami AMP

Protokół używany do komunikacji między przeglądarką a dokumentem AMP jest osiągany za pomocą metody postMessage. Poniżej znajduje się prosty przykład roboczy zastosowania metody postMessage do przechwytywania żądań XHR, w którym przeglądarka za pomocą metody postMessage obsługuje żądanie xhr wysyłane z dokumentu AMP i zwraca odpowiedź niestandardową.

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

Włączanie przechwytywania żądań XHR

Włączyć przechwytywanie xhr, wybierając przy inicjowaniu przeglądarki funkcję xhrInterceptor. Zobacz przykład wykonywania tego w przeglądarce i przykład przechwytywania xhr. Następnie dokument AMP musi wybrać opcję zezwolenia na przechwytywanie XHR. Dokumenty włączają ją poprzez dodanie atrybutu allow-xhr-interception do znacznika <html amp4email>. Program pocztowy musi ustawić ten atrybut w dokumencie AMP przed jego wyrenderowaniem, ponieważ jest to celowo nieprawidłowy atrybut i zostanie on oflagowany jak podczas walidacji dokumentu AMP.

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

Renderowanie szablonu po stronie serwera przeglądarki

Funkcja viewerRenderTemplate pozwala na zarządzanie renderowaniem szablonów <amp-list> oraz <amp-form>. Gdy jest włączona, środowisko uruchomieniowe AMP buforuje żądanie zawierające oryginalne wywołanie XHR, dane szablonu i wszelkie inne szczegóły wymagane do wyrenderowania zawartości składnika w przeglądarce. Pozwala to przeglądarce na zapoznanie się z zawartością danych punktu końcowego i zarządzanie renderowaniem mustache szablonów w celu zweryfikowania i oczyszczenia danych. Zwróć uwagę, że jeżeli ta funkcja jest włączona wraz z xhrInterceptor, w składniku amp-form i amp-list funkcja viewerRenderTemplate, która również buforuje żądania do przeglądarki, będzie mieć pierwszeństwo przed funkcją xhrInterceptor.

Przykład viewer.html pokazuje, jak można obsługiwać komunikat viewerRenderTemplate wysłany z dokumentu AMP. W tym przykładzie plik Viewer.prototype.processRequest_ przechwytuje komunikat viewerRenderTemplate i w zależności od typu składnika amp dostępnego w żądaniu odsyła html do wyrenderowania w następującym formacie JSON.

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

Jest to prosty przykład, w którym nie ma zależności od biblioteki mustache ani oczyszczania zawartości.

Poniższa tabela przedstawia bardziej praktyczny przykład tego, jak dokument AMP w przeglądarce programu pocztowego z funkcją viewerRenderTemplate mógłby obsłużyć renderowanie szablonu <amp-list>.

Viewer render template diagram

Środowisko uruchomieniowe AMP buforuje żądanie pobrania danych składnika <amp-list> do przeglądarki, która z kolei przekaże to żądanie do serwera programu pocztowego. Serwer przekaże ten adres URL i wyniki pobrania danych z adresu URL poprzez różne usługi, prawdopodobnie sprawdzając poprawność adresu URL, zawartość danych zwróconych z tego adresu i wyrenderuje szablony mustache przy użyciu tych danych. Następnie zwróci ów wyrenderowany szablon i prześle go z powrotem do przeglądarki w następującym formacie odpowiedzi JSON.

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

Tym, co zostanie wstrzyknięte do dokumentu AMP w celu wyrenderowania, będzie wartość html w ładunku JSON.

Poniższa tabela przedstawia funkcje i związane z nimi składniki:

Funkcja przeglądarki Powiązane składniki.
xhrInterceptor amp-form, amp-list, amp-state
viewerRenderTemplate amp-form, amp-list