Google AMP - Kullanıcı Bildirimi
Google amp-user-notification, kullanıcıya kapatılamaz iletişim kutusu mesajlarını göstermek için kullanılır. Kullanıcıyı sayfadaki çerezler hakkında bilgilendirmek için kullanabiliriz.
Amp-user-notification ile çalışmak için sayfaya aşağıdaki komut dosyasını eklememiz gerekir -
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>
Amp-kullanıcı-bildirim etiketi biçimi -
<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>
Çalışan bir örnek kullanarak amp-user-bildirimini anlayalım -
Misal
<!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>
Çıktı
Yukarıda verilen çalışma örneği kodunun çıktısı aşağıda gösterildiği gibidir -
Kullanıcı düğmeyi tıkladığında bildirim reddedilir. Kapatıldıktan sonra, sayfayı yeniden yükleseniz bile bildirim görüntülenmeyecektir.
Kullanıcı bildiriminin verileri localStorage tarayıcısında saklanır. Yerel depolama temizlenir ve sayfa yenilenirse, bildirimi tekrar görebileceksiniz. Aynı şeyi kullanarak deneyebilirsinizlocalStorage.clear() tarayıcı konsolunda.
Kullanma dismiss aşağıdaki gibi bir düğme üzerindeki eylem kullanılarak bildirim reddedilebilir eylem
<button on = "tap:my-notification.dismiss">
I accept
</button>
Kullanıcı düğmeye dokunduğunda bildirim reddedilecektir.