Google AMP - Thông báo của người dùng
Google amp-user-notification được sử dụng để hiển thị thông báo hộp thoại có thể loại bỏ cho người dùng. Chúng tôi có thể sử dụng nó để thông báo cho người dùng về cookie trên trang.
Để làm việc với amp-user-notification, chúng tôi cần thêm tập lệnh sau trên trang:
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>Định dạng thẻ thông báo amp-người dùng -
<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>Hãy để chúng tôi hiểu amp-user-notification bằng cách sử dụng một ví dụ làm việc -
Thí dụ
<!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>Đầu ra
Đầu ra của mã ví dụ làm việc được đưa ra ở trên như được hiển thị bên dưới:
Khi người dùng nhấp vào nút, thông báo sẽ bị loại bỏ. Sau khi bị loại bỏ, thông báo sẽ không được hiển thị ngay cả khi bạn tải lại trang.
Dữ liệu về thông báo của người dùng được lưu trữ trong localStorage của trình duyệt. Nếu bộ lưu trữ cục bộ bị xóa và trang được làm mới, bạn sẽ có thể xem lại thông báo. Bạn có thể thử tương tự bằng cách sử dụnglocalStorage.clear() trong bảng điều khiển của trình duyệt.
Sử dụng dismiss hành động thông báo có thể bị loại bỏ, bằng cách sử dụng hành động trên một nút như sau
<button on = "tap:my-notification.dismiss">
I accept
</button>Khi người dùng nhấn vào nút, thông báo sẽ bị loại bỏ.