forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathamp-web-push.amp.html
70 lines (67 loc) · 3.31 KB
/
amp-web-push.amp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>amp-web-push example</title>
<link rel="canonical" href="amps.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>
<style amp-custom>
.amp-web-push button {
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: inherit;
font-weight: inherit;
background: #2196F3;
color: white;
display: inline-block;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
text-align: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.amp-web-push button:hover {
background: #269BF8;
}
.amp-web-push button:active {
background: #1C91EE;
transform: scale(0.99);
}
</style>
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<!-- AMP Web Push Extension Configuration -->
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://example.com/helper-iframe.html"
permission-dialog-url="https://example.com/permission-dialog.html"
service-worker-url="https://example.com/service-worker.js"
></amp-web-push>
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
<button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<button on="tap:amp-web-push.unsubscribe">Unsubscribe me from Notifications</button>
</amp-web-push-widget>
<amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
Looks like you've blocked notifications!
</amp-web-push-widget>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget
ligula eu augue scelerisque sodales. Vivamus consequat consectetur mauris, sed
mollis justo aliquam feugiat. Phasellus sagittis dui eget posuere pulvinar.
Curabitur leo urna, auctor in fringilla ut, eleifend in dolor. Aenean
imperdiet lectus et lectus tincidunt, eu porttitor nisi placerat. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Praesent pretium tincidunt lectus sit amet semper. Sed egestas vulputate
ultricies. Nunc vestibulum porta ante sed iaculis.
</p>
</body>
</html>