Google AMP - Benutzerbenachrichtigung
Die Google Amp-User-Benachrichtigung wird verwendet, um dem Benutzer abweisende Dialogfeldnachrichten anzuzeigen. Wir können es verwenden, um Benutzer über Cookies auf der Seite zu benachrichtigen.
Um mit der Amp-User-Benachrichtigung arbeiten zu können, müssen wir das folgende Skript auf der Seite hinzufügen:
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>
Amp-User-Benachrichtigungs-Tag-Format -
<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>
Lassen Sie uns die Amp-User-Benachrichtigung anhand eines Arbeitsbeispiels verstehen -
Beispiel
<!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>
Ausgabe
Die Ausgabe des oben angegebenen Arbeitsbeispielcodes ist wie folgt:
Sobald der Benutzer auf die Schaltfläche klickt, wird die Benachrichtigung geschlossen. Nach dem Schließen wird die Benachrichtigung nicht angezeigt, selbst wenn Sie die Seite neu laden.
Die Daten der Benutzerbenachrichtigung werden im Browser localStorage gespeichert. Wenn der lokale Speicher gelöscht und die Seite aktualisiert wird, wird die Benachrichtigung erneut angezeigt. Sie können das gleiche mit versuchenlocalStorage.clear() in der Browserkonsole.
Verwenden von dismiss Aktion Die Benachrichtigung kann abgewiesen werden, indem die Aktion auf einer Schaltfläche wie folgt verwendet wird
<button on = "tap:my-notification.dismiss">
I accept
</button>
Wenn der Benutzer auf die Schaltfläche tippt, wird die Benachrichtigung geschlossen.