-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
153 lines (148 loc) · 6.77 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>PWA Starter Demo</title>
<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="theme-color" content="#000000">
<meta name=description content="Demo of Progressive Web Application with features like splash screen, offline support, service workers etc.">
<meta name="keywords" content="PWA, Progressive Web Apps, Service Worker, Offline Support, Push Notifications, Gaurav Behere, PWA Starter, Background Sync, Lighthouse">
<meta name="author" content="Gaurav Behere">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="PWA Starter Demo">
<meta name="application-name" content="PWA Starter Demo">
<link rel="icon" type="image/png" href="./images/icon_32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./images/icon_16.png" sizes="16x16">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="manifest" href="./manifest.json">
<link rel="stylesheet" href="./css/styles.css" />
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-messaging.js"></script>
<meta name="google-site-verification" content="epQonJNeUcw3dFBM3DJfzKaR0_XKSzu9u0dAF1Qi6vE" />
<script>
/* Initialize Firebase with your app settings
* these settings can be found in firebase developer console
*/
var config = {
apiKey: "<Your API KEY>",
authDomain: "<FIREBASE PROJECT NAME>.firebaseapp.com",
databaseURL: "https://<FIREBASE PROJECT NAME>.firebaseio.com",
projectId: "<FIREBASE PROJECT NAME>",
storageBucket: "topics/push_notifications",
messagingSenderId: "<YOUR SENDER ID>"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<header>
<span class="logo" onclick="window.location='https://gauravbehere.github.io/pwa-starter-demo/'"></span>
PWA Starter Demo
</header>
<div id="contentDiv">
<div class="feature">
<div class="featureIcon">
<i class="fas fa-bell bell"></i>
</div>
<div class="featureContent">
<div>
Push Notifications
</div>
<article>
Engage users with push notifications using Firebase API. It makes use of HTML5 Notification.<br>
<a href="https://firebase.google.com/docs/cloud-messaging/" target="_blank">Read More</a>
</article>
</div>
</div>
<div class="feature">
<div class="featureIcon">
<i class="fas fa-sync sync"></i>
</div>
<div class="featureContent">
<div>
Background Sync
</div>
<article>
Background sync is a new web API that lets you defer actions until the user has stable connectivity.<br>
<a href="https://developers.google.com/web/updates/2015/12/background-sync" target="_blank">Read More</a><br><br>
Go Offline & hit this button <button onclick="registerSync()">Trigger Offline Action</button>
</article>
</div>
</div>
<div class="feature">
<div class="featureIcon">
<i class="fas fa-bolt bolt"></i>
</div>
<div class="featureContent">
<div>
Lightening Speed
</div>
<article>
With caching strategies in place & faster load, PWA repsponds faster in slow networks.<br>
<a href="https://developers.google.com/web/fundamentals/performance/why-performance-matters/" target="_blank">Read More</a>
</article>
</div>
</div>
<div class="feature">
<div class="featureIcon">
<i class="fas fa-cog"></i>
</div>
<div class="featureContent">
<div>
Service Worker
</div>
<article>
Runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.<br>
<a href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker" target="_blank">Read More</a>
</article>
</div>
</div>
<div class="feature">
<div class="featureIcon">
<i class="fas fa-wifi wifi"></i>
</div>
<div class="featureContent">
<div>
Respond To Network Changes
</div>
<article>
Engage user even when there is no network.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events" target="_blank">Read More</a>
</article>
</div>
</div>
<div class="feature">
<div class="featureIcon">
<i class="fab fa-github-square"></i>
</div>
<div class="featureContent">
<div>
Source Code
</div>
<article>
Source code & readme can be found here.<br>
<a href="https://github.com/gauravbehere/pwa-starter-demo" target="_blank">PWA Starter Demo</a>
</article>
</div>
</div>
</div>
<footer>
© MIT Licence
<a href="http://gauravbehere.in" target="_blank">Gaurav Behere</a>
</footer>
<script src="./js/notify.js"></script>
<script src="./js/networkChange.js"></script>
<script defer src="./js/push.js"></script>
<script src="./js/sync.js"></script>
<script defer src="./js/app.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3574737-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-3574737-3');
</script>
</body>
</html>