-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathfirst-time-install.html
72 lines (71 loc) · 2.72 KB
/
first-time-install.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Nde Installer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic@6.4.0/picnic.min.css">
</head>
<body style="text-align: center">
<h1>Hello! It appears this is your first visit.</h1>
<h2>Please wait while the application installs.</h2>
<div style="width: 100%; height: 100px; background: #f3f3f3">
<div id="loader" style="height: 100px; text-align: center; font-size: 24pt; line-height: 100px; width: 100%">Installing ServiceWorker...</div>
</div>
<script>
if (!navigator.serviceWorker) {
var div = document.createElement('div')
div.innerHTML = "Oh no! Your browser doesn't support a feature needed to run this app (navigator.serviceWorker). Try using a different browser."
document.body.appendChild(div)
} else {
var div = document.createElement('h4')
div.innerHTML = "Sorry about the wait. Here are some cat gifs though!"
document.body.appendChild(div)
const img = new Image()
document.body.appendChild(img)
img.src = 'https://cataas.com/cat/gif?timestamp=' + Date.now()
setInterval(function () {
img.src = 'https://cataas.com/cat/gif?timestamp=' + Date.now()
}, 5000)
navigator.serviceWorker
.register('service-worker.js', { scope: '/' })
.then((reg) => {
reg.addEventListener('updatefound', () => {
let newWorker = reg.installing
document.getElementById('loader').innerHTML = 'Starting git clone...'
newWorker.addEventListener('statechange', () => {
console.log('reg.installing.state =', newWorker.state)
if (newWorker.state === 'activated') {
console.log('Begin cloning...')
let msg = {
type: "clone",
repo: 'wmhilton/nde',
ref: 'master',
name: 'nde'
}
newWorker.postMessage(msg)
navigator.serviceWorker.addEventListener('message', event => {
let data = event.data
console.log('data =', data)
if (data.type === 'status') {
if (data.status === 'complete') {
window.location = '/nde/'
} else if (data.status === 'progress') {
console.log(data.progress)
let loader = document.getElementById('loader')
loader.style.color = '#FFF'
loader.style.background = '#3498db'
loader.style.width = Math.floor(data.progress * 100) + '%'
loader.innerHTML = (loader.style.width === '100%' ? 'Checking out master branch...' : loader.style.width)
} else if (data.status === 'error') {
alert('Error! ' + data.error.message)
}
}
})
}
})
})
})
}
</script>
</body>
</html>