Блог

Главная - Вопросы по программированию - AMP-HTML почта — как связаться с сервером и получить json?

AMP-HTML почта — как связаться с сервером и получить json?

#amp-html #amp-email

#amp-html #amp-электронная почта

Вопрос:

Возможно ли использовать почтовый формат AMP-HTML для связи с сервером? Я не думаю, что это так хорошо документировано. Есть некоторая информация о обычном AMP-HTML, но не так много об электронной почте.

Это amp-почта, которую я хочу отправить. Я бы хотел, чтобы секретное слово извлекалось с моего сервера, а не жестко кодировалось.

 <!doctype html>
<html ⚡4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
  </head>
  <body>
  <!-- Store complex nested JSON data in <amp-state> elements. -->
    <amp-state id="words">
      <script type="application/json">
        {
          "SecretWord": "fetched"
        }
      </script>
    </amp-state>

    <p [text]="'Your word is: '   currentWord   '.'">Click to show magic word</p>


    <button on="tap:AMP.setState({currentWord: words['SecretWord']})">Show word</button>
  </body>
</html>

Ответ №1:

Да, документации по AMP4Email не так много. Недавно, после множества безуспешных попыток, мне удалось завершить один из моих вариантов использования с использованием AMP4Email.

Вы можете обратиться к приведенному ниже примеру для достижения своей цели:

 <!doctype html>
<html ⚡4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
  </head>
  <body>

    <amp-state id="fruits"
    src="https://amp.dev/static/samples/json/related_products.json"></amp-state>

    <p [text]="'My favorite fruit is : '   favoriteFruit   '.'">Click to find my favorite fruit.</p>

    <button on="tap:AMP.setState({favoriteFruit: fruits.items[0]['name']})">Show</button>
  </body>
</html>

Я использовал API из примера by ampproject.org , который возвращает JSON items из fruits. Но вы можете написать свой собственный API, который отправляет только ваше любимое слово.

Чтобы написать свой собственный сервис, вы должны быть очень осторожны с заголовками ответов. Если вы посмотрите на заголовки ответов этого API, вы увидите некоторые заголовки, такие как access-... и amp-... . Эти заголовки обязательны, если вы хотите использовать свой API / сервис в AMP4Email.

Обязательными заголовками ответа являются:

 AMP-Access-Control-Allow-Source-Origin: <value received in __amp_source_origin query param for your service>
Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
Access-Control-Allow-Origin: <origin, e.g. 'https://mail.google.com', if your service is hit from GMail inbox)

PS: __amp_source_origin заголовок добавляется GMail. Вы будете получать этот заголовок для всех запросов, поступающих из AMP4Email HTML.