Skip to content
This repository has been archived by the owner on Jul 4, 2023. It is now read-only.

Commit

Permalink
setup the progressive webapp
Browse files Browse the repository at this point in the history
  • Loading branch information
e7d committed Mar 4, 2019
1 parent 14f6219 commit b2ec937
Showing 22 changed files with 150 additions and 107 deletions.
4 changes: 2 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -15,9 +15,9 @@ RUN apk add --no-cache \
&& fc-cache -f -v \
&& mkdir -p /app/results \
&& mkdir -p /app/web \
&& ( cd /opt/speedtest/server && npm run dist ) \
&& ( cd /opt/speedtest/server && npm ci --production ) \
&& mv /opt/speedtest/server/* /app/ \
&& ( cd /opt/speedtest/web && npm run dist ) \
&& ( cd /opt/speedtest/web && npm ci && npm run dist ) \
&& mv /opt/speedtest/web/dist/* /app/web/ \
&& npm cache clean --force \
&& rm -rf /opt/speedtest \
1 change: 0 additions & 1 deletion packages/server/package.json
Original file line number Diff line number Diff line change
@@ -11,7 +11,6 @@
"url": "https://github.com/e7d/speedtest.git"
},
"scripts": {
"dist": "npm ci --production",
"dev": "node server.js 8888 ../web/dist",
"watch": "nodemon server.js 8888 ../web/dist"
},
12 changes: 9 additions & 3 deletions packages/server/src/httpServer.js
Original file line number Diff line number Diff line change
@@ -194,18 +194,24 @@ class HttpServer {
* @param {Response} response
*/
loadFile(uri, request, response) {
if (uri === "/") uri = "index.html";
let filePath = path.join(this.webFolderPath, uri);
fs.exists(filePath, exists => {
if (!exists || uri === "/") {
filePath = path.join(this.webFolderPath, "index.html");
if (!exists) {
response.writeHead(404);
response.write("Not found");
response.end();
return;
}

gzip(request, response);
try {
const stat = fs.statSync(filePath);
const buffer = fs.readFileSync(filePath);
response.writeHead(200, {
"Content-Type": this.guessContentType(filePath),
"Content-Length": buffer.length
"Content-Length": buffer.length,
"Last-Modified": stat.mtime.toUTCString()
});
response.write(buffer, "binary");
response.end();
2 changes: 1 addition & 1 deletion packages/web/package.json
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
},
"scripts": {
"build": "webpack --env=dev --progress --profile --colors",
"dist": "npm ci && webpack --env=prod --progress --profile --colors",
"dist": "webpack --env=prod --progress --profile --colors",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --env=dev --progress --profile --colors --watch"
},
Binary file added packages/web/src/assets/icon-128x128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/src/assets/icon-144x144.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/src/assets/icon-152x152.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/src/assets/icon-192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/src/assets/icon-256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/web/src/assets/icon-512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions packages/web/src/assets/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "Speed Test",
"short_name": "Speed Test",
"icons": [{
"src": "icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "white",
"theme_color": "#007bff"
}
56 changes: 56 additions & 0 deletions packages/web/src/assets/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
var cacheName = "SpeedTest";
var filesToCache = [
"/",
"/app.css",
"/app.js",
"/favicon.ico",
"/icons.eot",
"/icons.svg",
"/icons.ttf",
"/icons.woff",
"/icons.woff2",
"/index.html",
"/worker.js"
];

self.addEventListener("install", e => {
e.waitUntil(
caches.open(cacheName).then(cache => {
return cache.addAll(filesToCache);
})
);
});

self.addEventListener("activate", e => {
e.waitUntil(
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== cacheName) {
return caches.delete(key);
}
})
);
})
);
return self.clients.claim();
});

self.addEventListener("fetch", e => {
if (
["/ip", "/ping", "/download", "/upload"].some(url => {
if (e.request.url.indexOf(url) > -1) {
e.respondWith(fetch(e.request));
return true;
}
})
) {
return;
}

e.respondWith(
caches.match(e.request).then(cacheResponse => {
return cacheResponse || fetch(e.request);
})
);
});
1 change: 0 additions & 1 deletion packages/web/src/css/app.scss
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@
@import "./app/icons";
@import "./app/logo";
@import "./app/global";
@import "./app/loader";
@import "./app/header";
@import "./app/alerts";
@import "./app/settings";
1 change: 1 addition & 0 deletions packages/web/src/css/app/_icons.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@font-face {
font-display: auto;
font-family: 'icons';
src: url('./app/icons.eot');
src: url('./app/icons.eot#iefix') format('embedded-opentype'),
63 changes: 0 additions & 63 deletions packages/web/src/css/app/_loader.scss

This file was deleted.

1 change: 0 additions & 1 deletion packages/web/src/css/app/_template.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
* {
box-sizing: border-box;
font-family: var(--fontFamilySansSerif);
}

[hidden] {
57 changes: 33 additions & 24 deletions packages/web/src/index.html
Original file line number Diff line number Diff line change
@@ -7,12 +7,16 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#f5f5f5">
<title>Speed Test</title>
<meta name="description" content="An HTML 5 speed test." />
<link rel="manifest" href="manifest.json">
<link rel="icon" href="favicon.ico">
<link rel="preload" href="app.css" as="style">
<link rel="preload" href="app.js" as="script">
<link rel="preload" href="worker.js" as="script">
</head>

<body>
<div id="loader" class="logo"></div>
<div id="main" hidden>
<div id="main">
<header>
<h1>
<a href="/">
@@ -22,9 +26,12 @@ <h1>
</h1>

<nav id="commands">
<button id="show-about" class="btn-link"><i class="icon icon-info"></i></button>
<button id="results-history" class="btn-link"><i class="icon icon-history"></i></button>
<button id="show-settings" class="btn-link"><i class="icon icon-cog"></i></button>
<a id="show-about" class="btn-link" href="/about" title="Get information about this speed test"><i
class="icon icon-info"></i></a>
<a id="results-history" class="btn-link" href="/results" title="History of previous results"><i
class="icon icon-history"></i></a>
<a id="show-settings" class="btn-link" href="/settings" title="Configure the speed test settings"><i
class="icon icon-cog"></i></a>
</nav>
</header>

@@ -120,19 +127,19 @@ <h4>The download and upload speed are the size of your connection</h4>
<article id="supported-browsers">
<h3>What are the supported browsers?</h3>
<p>This speed test should operate normally on all modern browsers, including the latest version of <a
href="https://www.google.com/chrome/" target="_blank">Google Chrome</a>, <a
href="https://www.mozilla.org/firefox/" target="_blank">Mozilla Firefox</a>,
<a href="https://www.microsoft.com/windows/microsoft-edge" target="_blank">Microsoft Edge</a>, <a
href="https://www.apple.com/safari/" target="_blank">Apple Safari</a> and <a
href="https://www.opera.com/" target="_blank">Opera</a>.</p>
href="https://www.google.com/chrome/" target="_blank" rel="noopener">Google Chrome</a>, <a
href="https://www.mozilla.org/firefox/" target="_blank" rel="noopener">Mozilla Firefox</a>,
<a href="https://www.microsoft.com/windows/microsoft-edge" target="_blank" rel="noopener">Microsoft
Edge</a>, <a href="https://www.apple.com/safari/" target="_blank" rel="noopener">Apple
Safari</a> and <a href="https://www.opera.com/" target="_blank" rel="noopener">Opera</a>.</p>
<p>However, no version of Internet Explorer is officially supported.</p>
</article>

<article id="source-code">
<h3>Where can I review the source code?</h3>
<p>This speed test is completely open source. Its source code can be reviewed online, on its GitHub
repository: <a href="https://github.com/e7d/speedtest"
target="_blank">https://github.com/e7d/speedtest</a></p>
repository: <a href="https://github.com/e7d/speedtest" target="_blank"
rel="noopener">https://github.com/e7d/speedtest</a></p>
</article>
</section>

@@ -178,7 +185,7 @@ <h2>Previous results</h2>
<th>Upload</th>
<th>IP / Org</th>
<th class="text-center">
<button id="erase-history" class="btn-danger" title="Delete all results from history"><i
<button id="erase-history" class="btn-danger" aria-label="Erase history" title="Delete all results from history"><i
class="icon icon-trash"></i></button>
</th>
</tr>
@@ -190,7 +197,7 @@ <h2>Previous results</h2>
<section id="settings" hidden>
<div class="flex">
<h2>Settings</h2>
<button id="settings-mode" class="btn-link" hidden>Advanced mode</button>
<button id="settings-mode" class="btn-link" aria-label="Advanced mode" hidden>Advanced mode</button>
</div>

<form>
@@ -231,7 +238,8 @@ <h2>Settings</h2>
<div class="field">
<label>Mode</label>
<div>
<input id="latency-websocket" type="radio" name="config.latency.mode" value="websocket" checked>
<input id="latency-websocket" type="radio" name="config.latency.mode" value="websocket"
checked>
<label for="latency-websocket">
WebSocket
</label>
@@ -275,7 +283,8 @@ <h2>Settings</h2>
<div class="field">
<label>Mode</label>
<div>
<input id="upload-websocket" type="radio" name="config.upload.mode" value="websocket" checked>
<input id="upload-websocket" type="radio" name="config.upload.mode" value="websocket"
checked>
<label for="upload-websocket">
WebSocket
</label>
@@ -292,7 +301,7 @@ <h2>Settings</h2>
<input id="upload-duration" type="number" name="config.upload.duration" value="10">
</div>
</fieldset>
<button type="submit" class="btn-dark">Save</button>
<button type="submit" class="btn-dark" aria-label="Save settings">Save</button>
<span id="save-confirmation">Saved!</span>
</form>
</section>
@@ -306,7 +315,7 @@ <h2>Settings</h2>
<div class="input-group">
<input id="share-result-link" type="text" readonly>
<div class="input-group-append">
<button id="share-result-link-copy" class="btn-outline-secondary" type="button">Copy</button>
<button id="share-result-link-copy" class="btn-outline-secondary" type="button" aria-label="Copy">Copy</button>
</div>
</div>
</fieldset>
@@ -315,7 +324,7 @@ <h2>Settings</h2>
<div class="input-group">
<input id="share-result-image" type="text" readonly>
<div class="input-group-append">
<button id="share-result-image-copy" class="btn-outline-secondary" type="button">Copy</button>
<button id="share-result-image-copy" class="btn-outline-secondary" type="button" aria-label="Copy">Copy</button>
</div>
</div>
</fieldset>
@@ -324,7 +333,7 @@ <h2>Settings</h2>
<div class="input-group">
<input id="share-result-embed" type="text" readonly>
<div class="input-group-append">
<button id="share-result-embed-copy" class="btn-outline-secondary" type="button">Copy</button>
<button id="share-result-embed-copy" class="btn-outline-secondary" type="button" aria-label="Copy">Copy</button>
</div>
</div>
</fieldset>
@@ -333,7 +342,7 @@ <h2>Settings</h2>
<div class="input-group">
<input id="share-result-forum" type="text" readonly>
<div class="input-group-append">
<button id="share-result-forum-copy" class="btn-outline-secondary" type="button">Copy</button>
<button id="share-result-forum-copy" class="btn-outline-secondary" type="button" aria-label="Copy">Copy</button>
</div>
</div>
</fieldset>
@@ -345,9 +354,9 @@ <h2>Settings</h2>
</div>

<div id="actions">
<button id="start" class="btn-lg btn-primary">Start</button>
<button id="stop" class="btn-lg btn-danger" hidden>Stop</button>
<button id="share-result" class="btn-link" hidden><i class="icon icon-link"></i> Share</button>
<button id="start" class="btn-lg btn-primary" aria-label="Start">Start</button>
<button id="stop" class="btn-lg btn-danger" aria-label="Stop" hidden>Stop</button>
<button id="share-result" class="btn-link" aria-label="Share" hidden><i class="icon icon-link"></i> Share</button>
<div id="timestamp"></div>
</div>

Loading

0 comments on commit b2ec937

Please sign in to comment.