├── .gitignore
├── package.json
├── web
├── js
│ ├── worker.js
│ └── home.js
├── index.html
└── css
│ └── style.css
├── README.md
└── server.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web-workers",
3 | "main": "server.js",
4 | "dependencies": {
5 | "node-static-alias": "~1.1.2"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/web/js/worker.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var curNum = 0;
4 |
5 | self.onmessage = onMessage;
6 |
7 | // **********************************
8 |
9 | function onMessage() {
10 | getNextFib();
11 | }
12 |
13 | function getNextFib() {
14 | var curFib = fib(curNum);
15 | self.postMessage({ num: curNum, fib: curFib });
16 | curNum++;
17 | getNextFib();
18 | }
19 |
20 | function fib(n) {
21 | if (n < 2) {
22 | return n;
23 | }
24 | return fib(n-1) + fib(n-2);
25 | }
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | > [!NOTE]
2 | > This repo is from an archived version of the course. Watch the latest version of the course on [frontendmasters.com](https://frontendmasters.com/courses/service-workers/).
3 |
4 | # Service Workers & Offline Course by Kyle Simpson
5 |
6 | Code for the Web Workers section of the Service Workers and Offline course by Kyle Simpson.
7 |
8 | ## Starter Exercise Files
9 |
10 | To get started, download the [Starter Files (ZIP)](https://static.frontendmasters.com/resources/2019-05-10-service-worker-pwa/service-workers-starter.zip)
11 |
12 | Don't forget to `npm install` the necessary modules.
13 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Web Workers
6 |
7 |
8 |
9 |
10 | Web Workers
11 |
16 |
17 |
18 |
19 |
20 |
21 | Let's explore Web Workers together.
22 |
23 |
24 | Fibonacci Numbers:
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/web/css/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | font-family: sans-serif;
4 | font-size: 1.3em;
5 | }
6 |
7 | *,
8 | *::before,
9 | *::after {
10 | box-sizing: inherit;
11 | }
12 |
13 | html input,
14 | html button,
15 | html textarea {
16 | font-size: 1em;
17 | }
18 |
19 | html,
20 | body {
21 | background-color: #e5efff;
22 | }
23 |
24 | header {
25 | position: relative;
26 | max-width: 800px;
27 | margin: 0px auto;
28 | color: #222;
29 | }
30 |
31 | nav {
32 | background-color: #5078ba;
33 | color: #fff;
34 | }
35 |
36 | nav ul {
37 | padding: 0px;
38 | padding-left: 20px;
39 | margin: 0px;
40 | list-style: none;
41 | }
42 |
43 | nav ul li {
44 | display: inline-block;
45 | padding: 10px;
46 | }
47 |
48 | nav ul li a {
49 | color: #fff;
50 | text-decoration: none;
51 | }
52 |
53 | main {
54 | margin: 0px auto;
55 | max-width: 800px;
56 | background-color: #fff;
57 | color: #000;
58 | padding: 30px;
59 | }
60 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var path = require("path");
4 | var http = require("http");
5 | var nodeStaticAlias = require("node-static-alias");
6 |
7 | const PORT = 8049;
8 | const WEB_DIR = path.join(__dirname,"web");
9 |
10 | var httpServer = http.createServer(handleRequest);
11 |
12 | var staticServer = new nodeStaticAlias.Server(WEB_DIR,{
13 | serverInfo: "Web Workers",
14 | cache: 1
15 | });
16 |
17 |
18 | httpServer.listen(PORT);
19 | console.log(`Server started on http://localhost:${PORT}...`);
20 |
21 |
22 | // *******************************
23 |
24 | async function handleRequest(req,res) {
25 | // handle static file requests
26 | if (["GET","HEAD"].includes(req.method)) {
27 | // special handling for empty favicon
28 | if (req.url == "/favicon.ico") {
29 | res.writeHead(204,{
30 | "Content-Type": "image/x-icon",
31 | "Cache-Control": "public, max-age: 604800"
32 | });
33 | res.end();
34 | return;
35 | }
36 |
37 | // handle other static files
38 | staticServer.serve(req,res,function onStaticComplete(err){
39 | if (err) {
40 | res.writeHead(404);
41 | res.end();
42 | }
43 | });
44 | }
45 | // Oops, invalid/unrecognized request
46 | else {
47 | res.writeHead(404);
48 | res.end();
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/web/js/home.js:
--------------------------------------------------------------------------------
1 | (function Home(){
2 | "use strict";
3 |
4 | var startStopBtn;
5 | var fibsList;
6 | var worker;
7 |
8 | document.addEventListener("DOMContentLoaded",ready,false);
9 |
10 |
11 | // **********************************
12 |
13 | function ready() {
14 | startStopBtn = document.getElementById("start-stop-btn");
15 | fibsList = document.getElementById("fibs");
16 |
17 | startStopBtn.addEventListener("click",startFibs,false);
18 | }
19 |
20 | function renderFib(num,fib) {
21 | var p = document.createElement("div");
22 | p.innerText = `Fib(${num}): ${fib}`;
23 | if (fibsList.childNodes.length > 0) {
24 | fibsList.insertBefore(p,fibsList.childNodes[0]);
25 | }
26 | else {
27 | fibsList.appendChild(p);
28 | }
29 | }
30 |
31 | function startFibs() {
32 | startStopBtn.removeEventListener("click",startFibs,false);
33 | startStopBtn.addEventListener("click",stopFibs,false);
34 |
35 | startStopBtn.innerText = "Stop";
36 | fibsList.innerHTML = "";
37 |
38 | worker = new Worker("/js/worker.js");
39 | worker.addEventListener("message",onMessage);
40 | worker.postMessage({ start: true });
41 | }
42 |
43 | function stopFibs() {
44 | startStopBtn.removeEventListener("click",stopFibs,false);
45 | startStopBtn.addEventListener("click",startFibs,false);
46 |
47 | startStopBtn.innerText = "Start";
48 | worker.terminate();
49 | worker = null;
50 | }
51 |
52 | function onMessage(evt) {
53 | renderFib(evt.data.num,evt.data.fib);
54 | }
55 |
56 | })();
57 |
--------------------------------------------------------------------------------