Google AMP - powiadomienie użytkownika
Google amp-user-notification służy do wyświetlania użytkownikowi komunikatów z okien dialogowych, które można zamknąć. Możemy za jego pomocą powiadomić użytkownika o plikach cookies na stronie.
Aby pracować z powiadomieniem amp-user-notification potrzebujemy dodać następujący skrypt na stronie -
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>Format znacznika powiadomienia użytkownika 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>Zrozummy powiadomienie użytkownika amp na przykładzie roboczym -
Przykład
<!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>Wynik
Dane wyjściowe działającego przykładowego kodu podanego powyżej są pokazane poniżej -
Gdy użytkownik kliknie przycisk, powiadomienie zostanie odrzucone. Po odrzuceniu powiadomienie nie będzie wyświetlane, nawet jeśli ponownie załadujesz stronę.
Dane powiadomienia użytkownika są przechowywane w magazynie localStorage przeglądarki.Jeśli lokalny magazyn zostanie wyczyszczony, a strona zostanie odświeżona, będziesz mógł ponownie zobaczyć powiadomienie. Możesz spróbować tego samego, używająclocalStorage.clear() w konsoli przeglądarki.
Za pomocą dismiss działanie powiadomienie można odrzucić, używając akcji na przycisku w następujący sposób
<button on = "tap:my-notification.dismiss">
I accept
</button>Gdy użytkownik naciśnie przycisk, powiadomienie zostanie odrzucone.