Google AMP-사용자 알림
Google amp-user-notification은 사용자에게 닫을 수있는 대화 상자 메시지를 표시하는 데 사용됩니다. 페이지의 쿠키에 대해 사용자에게 알리는 데 사용할 수 있습니다.
amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야합니다.
<script async custom-element = "amp-user-notification"
src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">
</script>Amp-user-notification 태그 형식-
<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>실제 예제를 사용하여 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>산출
위에 주어진 작업 예제 코드의 출력은 다음과 같습니다.
사용자가 버튼을 클릭하면 알림이 해제됩니다. 닫히면 페이지를 새로 고침해도 알림이 표시되지 않습니다.
사용자 알림의 데이터는 브라우저 localStorage에 저장되며, localstorage를 지우고 페이지를 새로 고치면 알림을 다시 볼 수 있습니다. 다음을 사용하여 동일하게 시도 할 수 있습니다.localStorage.clear() 브라우저 콘솔에서.
사용 dismiss 다음과 같이 버튼의 작업을 사용하여 알림을 해제 할 수있는 작업
<button on = "tap:my-notification.dismiss">
I accept
</button>사용자가 버튼을 탭하면 알림이 해제됩니다.