-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
49 lines (43 loc) · 2.26 KB
/
index.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
<html lang="en">
<head>
<title>WebPush iOS example</title>
<base href="https://andreinwald.github.io/webpush-ios-example/">
<link rel="manifest" href="manifest.json"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/favicon.png"> <!-- needed for phone PWA app icon -->
<style>
body {background-color: #cfc7e2;font-family: Arial, sans-serif;font-size: 18px;padding-bottom: 50px;}
.wrapper {max-width: 800px;margin: 0 auto;}
@supports (-webkit-touch-callout: none) {#scan-qr-code {display: none;}}
#add-to-home-screen {display: none;background-color: bisque;padding: 10px;}
#add-to-home-screen img {display: block;margin: 0 auto;padding-top: 10px;max-height: 500px;max-width: 100%}
#scan-qr-code img {display: block;max-width: 100%}
#subscribe_btn, #test_send_btn {display: none;width: 100%;line-height: 2;font-size: 20px;margin-top: 10px;}
#active_sub {display: none;background-color: #e7e7ff;padding: 20px;word-wrap: break-word;}
#source_link {position: fixed;bottom: 10px;color: #fff;background-color: rgba(0,0,0,0.5);padding: 5px;left: 10px;}
</style>
</head>
<body>
<div class="wrapper">
<h1>WebPush iOS example</h1>
<div id="content">
<div id="add-to-home-screen">
For WebPush work you may need to add this website to Home Screen at your iPhone or iPad (window.navigator is
not
standalone).
<img src="images/webpush-add-to-home-screen.jpg" alt="webpush add to some screen">
</div>
<div id="scan-qr-code">Open this page at your iPhone/iPad:
<img src="images/qrcode.png" alt="qrCode"><br><br>
</div>
<button id="subscribe_btn" onclick="subscribeToPush()">Subscribe to notifications</button>
<div id="active_sub"></div>
<button id="test_send_btn" onclick="testSend()">Send test push</button>
</div>
<a id="source_link" href="https://github.com/andreinwald/webpush-ios-example">Code of this page</a>
</div>
<script src="frontend.js"></script>
</body>
</html>