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

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

0 голосов
/ 27 марта 2019

Возможно ли использовать почтовый формат 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 Ответ

0 голосов
/ 11 апреля 2019

Да, документации 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.

...