구글 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 사용자 알림 태그 형식
<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 ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP – User Notification</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-user-notification.html">
<meta name="viewport" content="width=device-width,minimum-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 작업을 사용하면 다음과 같이 버튼의 action업을 사용하여 알림을 해제할 수 있습니다.
<button on="tap:my-notification.dismiss"> I accept </button>
사용자가 버튼을 탭하면 알림이 해제됩니다.