-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathservice-workers-network-based.html
135 lines (130 loc) · 4.13 KB
/
service-workers-network-based.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Network-based image optimization using Service Workers - ImageKit</title>
<link type="text/css" href="<%= getPath('style/landingpage.css') %>" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<%= commonHeadHTML %>
<meta name="description" content="Using service workers for optimizing images for varying network conditions on the user's device">
<meta property="og:description" content="Using service workers for optimizing images for varying network conditions on the user's device" />
<meta property="og:url" content="https://imagekit.io/demo/service-workers-network-based-image-optimization" />
<meta property="og:title" content="Network-based image optimization and delivery - Demo" />
</head>
<style>
html {
font-size: 16px;
}
header {
background: #222222;
font-size: 1rem;
height: 60px;
padding: 0 20px;
}
header .logo {
float: left;
width: 125px;
margin-top: 15px;
}
header h1 {
float: right;
margin: 0;
color: #FFF;
font-size: 1.5rem;
font-weight: normal;
margin-top: 10px;
}
#sample-website {
background: #F5F8FA;
padding: 40px 0;
}
#website-container {
background: #FFF;
border-radius: 5px;
margin: 0 auto;
padding: 50px;
max-width: 1100px;
box-shadow: 0px 1px 9px 1px rgba(51,51,51,0.2);
-webkit-box-shadow: 0px 1px 9px 1px rgba(51,51,51,0.2);
-moz-box-shadow: 0px 1px 9px 1px rgba(51,51,51,0.2);
font-size: 0;
}
h2 {
font-size: 1.5rem;
margin: 0;
color: #333;
}
p {
font-size: 1rem;
color: #888;
}
.item {
display: inline-block;
min-width: 300px;
margin: 35px 0;
}
.item.middle {
margin: 0 50px;
}
.item-name {
font-size: 1.3rem;
font-weight: bold;
color: #333;
margin-top: 10px;
}
.item-description {
font-size: 0.875rem;
font-weight: normal;
color: #888;
}
.item-price {
margin-top: 10px;
font-size: 1rem;
font-weight: bold;
color: #333;
}
@media (max-width: 1100px) {
.item {
width: 50%;
max-width: 475px;
}
}
</style>
<body>
<header>
<img class="logo" srcset="https://ik.imagekit.io/demo/imagekitwebsite/static/img/logo.png" />
<h1>Network-based image optimization using Service Workers</h1>
</header>
<section id="sample-website">
<div id="website-container">
<h2>Items for Men and Women</h2>
<p>Showing 30 of 300</p>
<% for(var i=1; i<31; i++) { %>
<div class="item <% if((i+1)%3 == 0) { print('middle'); } %>">
<div class="image-holder">
<img src="https://ik.imagekit.io/demo/img/sw_demo/image<%= i %>.jpeg?tr=w-300,h-450,fo-auto,q-90" />
</div>
<div class="item-description">
<div class="item-name">Item <%= i %></div>
<div class="item-description">This is item <%= i %>.</div>
<div class="item-price">Rs. <%= i %>00</div>
</div>
</div>
<% } %>
</div>
</section>
<script>
if ('serviceWorker' in navigator && 'URL' in window) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw_v2.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>