Учебники

Google AMP — Уведомление пользователя

Ноябрь 7, 2018

Google-уведомление пользователя-пользователя используется для показа пользователю сообщения о недействительных диалоговых окнах. Мы можем использовать его для уведомления пользователей о файлах cookie на странице.

Для работы с amp-user-уведомлением нам нужно добавить следующий скрипт на страницу — 

<script async custom-element = "amp-user-notification" 
   src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>

Формат тега уведомления пользователя-amp — 

<amp-user-notification id = "my-notification" layout = "nodisplay">
   <div>Example of amp-user-notification. 
      <button on = "tap:my-notification.dismiss">I accept
      </button>
   </div>
</amp-user-notification>

Давайте разберемся с уведомлением пользователя-усилителя, используя рабочий пример —

пример 

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Selector</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none
               animation:none
            }
         </style>
      </noscript>
   
      <script async custom-element = "amp-user-notification" 
         src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
      </script>
   
      <style amp-custom>
         div {
            font-size: 15px;
            background-color : #ccc;
            padding: 10px 10px;
            border-radius: 2px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            cursor: pointer; 
            float: right;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Amp User Notification</h3>
      <amp-user-notification
         id = "my-notification"
         layout = "nodisplay">
         <div>Example of amp-user-notification. 
            <button on = "tap:my-notification.dismiss">I accept
            </button>
         </div>
      </amp-user-notification>
   </body>
</html>

Выход

Вывод приведенного выше кода рабочего примера показан ниже:

Уведомление пользователя о шрифте Amp

Как только пользователь нажимает кнопку, уведомление прекращается. После закрытия уведомление не будет отображаться, даже если вы перезагрузите страницу.

Данные уведомления пользователя хранятся в браузере localStorage. Если локальное хранилище очищено и страница обновлена, вы сможете снова увидеть уведомление. Вы можете попробовать то же самое, используя localStorage.clear () в консоли браузера.

Используя действие dismiss, уведомление можно отклонить, используя действие для кнопки следующим образом. 

<button on = "tap:my-notification.dismiss">
   I accept
</button>

Когда пользователь нажимает на кнопку, уведомление будет отклонено.

49
Share: