-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (80 loc) · 3.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Simple Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f0f">
<link rel="icon" type="images/png" sizes="216x216" href="favicons/favicon-216.png">
<link rel="apple-touch-icon" type="images/png" sizes="216x216" href="favicons/favicon-216.png">
<meta name="Description" content="Lighthouse Driven Development Progressive Web Application">
<link rel="manifest" href="/manifest.webmanifest">
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function(registration) { console.log("Service Worker Registered with scope: " + registration.scope); })
.catch(function(error) { console.log("Service Worker Registration failed with error: "+ error); });
}
</script>
<script>
// and here's the trick (works everywhere)
function r(f) { /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f() }
// use like
r(function () {
// VanillaJS FTW!
var body = document.querySelector('body')
appendTo(body, 'h1', 'Hello World')
appendTo(body, 'h2', 'TODO');
appendTodoTo(body, true, 'Run Lighthouse Audit');
appendTo(body, 'h3', 'Changes on the website');
appendTodoTo(body, true, 'add noscript');
appendTodoTo(body, true, 'add Service Worker (to handle offline)');
appendTodoTo(body, true, 'add Manifest');
appendTodoTo(body, true, 'add meta name="viewport"');
appendTodoTo(body, true, 'add meta name="theme-color"');
appendTodoTo(body, true, 'HTML doctype');
appendTo(body, 'h3', 'changes on the server side');
appendTodoTo(body, true, 'serve with HTTPS');
appendTodoTo(body, true, 'redirect HTTP to HTTPS');
appendTodoTo(body, true, 'serve with HTTP/2');
appendTo(body, 'h3', 'Optional : CI/CD with Lighthouse running as a bot to check PRs');
appendTodoTo(body, true, 'integration with Travis-CI');
appendTodoTo(body, true, 'deploy to Firebase Hosting');
appendTodoTo(body, true, 'show current version: {{REPLACE_THIS_WITH_COMMIT_HASH}}');
appendTodoTo(body, true, 'replace Travis-CI with GitHub Actions');
appendTodoTo(body, false, 'add Lighthouse CI check on PRs');
});
function appendTo(root, tagName, text) {
var tag = document.createElement(tagName);
tag.appendChild(document.createTextNode(text));
root.appendChild(tag);
}
function appendTodoTo(root, checked, labelText) {
var input = document.createElement('input');
input.type='checkbox';
input.id='todo_' + generateUID();
checked && (input.checked='checked');
var label = document.createElement('label');
label.htmlFor = input.id;
label.appendChild(document.createTextNode(labelText));
var br = document.createElement('br');
root.appendChild(input);
root.appendChild(label);
root.appendChild(br);
}
// https://stackoverflow.com/a/6248722/526660
function generateUID() {
// I generate the UID from two parts here
// to ensure the random number provide enough bits.
var firstPart = (Math.random() * 46656) | 0;
var secondPart = (Math.random() * 46656) | 0;
firstPart = ("000" + firstPart.toString(36)).slice(-3);
secondPart = ("000" + secondPart.toString(36)).slice(-3);
return firstPart + secondPart;
}
</script>
</head>
<body>
<noscript>JavaScript is required for this application to work.</noscript>
</body>
</html>