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

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

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

<!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 из примера ampproject.org, который возвращает JSON items фруктов. Но вы можете написать свой собственный 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.

Другие вопросы по тегам