Что, если я скажу вам, что вы можете отправить своим пользователям форму опроса по электронной почте - пользователи могут заполнить форму и высказать свое мнение, не покидая своего почтового ящика? Довольно круто, правда? Поскольку Gmail объявляет о поддержке динамической электронной почты, все такие варианты использования возможны. Теперь вы можете отправлять по электронной почте интерактивный динамический контент в реальном времени. Этот блог демонстрирует доказательство концепции динамической электронной почты с использованием nodemailer v6.1.0.

Исходный код

Весь код этого POC доступен по адресу https://github.com/varunon9/amp4email вместе с подробными инструкциями. Не стесняйтесь создавать проблему Github для любой поддержки.

Давайте начнем

Когда я задумал поэкспериментировать с amp4email, мне понадобились две вещи:

  1. Способ отправки динамической электронной почты
  2. Способ проверить это

Тестирование динамической электронной почты

Gmail предоставил игровую площадку (https://amp.gmail.dev/playground/) для проверки вашего документа amp4email, а также для отправки его в вашу учетную запись Gmail для тестирования. Все, что вам нужно, это внести [email protected] в белый список в Настройки Gmail ›Общие› Динамическая электронная почта ›Разработка динамической электронной почты.
Если ваша организация использует G-Suite, ваш администратор может включить эти настройки в Apps > G Suite > Settings for Gmail > User Settings

Программная отправка динамической электронной почты

Nodemailer - это узел узла с открытым исходным кодом для отправки писем. Раньше я использовал его в своих проектах, поэтому для меня это был очевидный выбор. Я создал действительный документ amp4email, передал его как html в функции nodemailer sendMail , но получил статическое электронное письмо в формате HTML. Оказывается, чтобы отправить amp4email, вам нужно добавить новую часть MIME с типом содержимого text/x-amp-html в качестве потомка multipart/alternative в заголовок электронной почты.

Nodemailer не поддерживал его, поэтому я создал запрос функции в официальном репозитории Github https://github.com/nodemailer/nodemailer/issues/996.
К моему удивлению, один из сопровождающих Андрис Рейнман »Признал это, а также выпустил новую версию 6.1.0 с поддержкой amp в течение 3 часов после создания проблемы. Сразу попробовал и все получилось: D: D

Заставить это работать

Для демонстрации я отправил карусель изображений, и она отлично сработала.

Отправлен документ amp4email

<!doctype html>
<html amp4email>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
  </head>
  <body>
    <h3>Want to join fellow travellers on your next trip?</h3>
    <h4>Introducing <a href="https://github.com/varunon9/SaathMeTravel/tree/master/app/release" target="_blank">SaathMeTravel</a></h4>
    <amp-carousel width="900"
      height="300"
      layout="responsive"
      type="slides"
      autoplay
      delay="2000">
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_chat.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Chat Screen"></amp-img>
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_map.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Map Screen"></amp-img>
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_plan_journey.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Plan Journey"></amp-img>
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_profile.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Profile"></amp-img>
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_route.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Route"></amp-img>
      <amp-img src="https://raw.githubusercontent.com/varunon9/SaathMeTravel/master/screenshots/saathmetravel_review.png"
        width="720"
        height="1280"
        layout="responsive"
        alt="Reviews"></amp-img>
    </amp-carousel>
    <p>Star our open source poject on Github: 
      <a href="https://github.com/varunon9/SaathMeTravel">SaathMeTravel</a>
    </p>
  </body>
</html>

Получено динамическое письмо

Заключение

Хотя этот POC выглядит тривиальным, его реализация на реальных производственных серверах может оказаться сложной задачей. Чтобы отправлять динамические электронные письма конечным пользователям, вам необходимо следовать определенным правилам, а также внести свой домен в белый список Google - https://developers.google.com/gmail/ampemail/register. В настоящее время Gmail развернул эту функцию только в Интернете, но в будущем Android также будет поддерживать ее. Динамическая электронная почта, безусловно, выглядит многообещающей для меня, и я с нетерпением жду возможности реализовать ее в реальных сценариях использования.

Исходный код: https://github.com/varunon9/amp4email

📝 Прочтите этот рассказ позже в Журнале.

🗞 Просыпайтесь каждое воскресенье утром и слышите самые интересные истории, мнения и новости недели, ожидающие в вашем почтовом ящике: Получите заслуживающий внимания информационный бюллетень›