web-workers: new cheatsheet

javascript-workers.md

@@ -1,48 +0,0 @@
----
-title: JavaScript workers
-category: JavaScript
----
-
-## Web workers
-
-    // Client code
-
-    var worker = new Worker('worker.js');
-    worker.onmessage = function(message) {
-      alert(message.data);
-    });
-    worker.postMessage("");
-
-### Worker code
-
-    // worker.js
-
-    self.onmessage = function(message) {
-      alert(message.data);
-    }
-    self.postMessage("");
-
-### Message data
-
-    // [MessageEvent]
-    bubbles: false
-    cancelBubble: false
-    cancelable: false
-    clipboardData: undefined
-    currentTarget: Worker
-    data: "Hello"
-    defaultPrevented: false
-    eventPhase: 0
-    lastEventId: ""
-    origin: ""
-    ports: Array[0]
-    returnValue: true
-    source: null
-    srcElement: Worker
-    target: Worker
-    timeStamp: 1344821022383
-    type: "message"
-
-
-
-

web-workers.md

@@ -0,0 +1,58 @@
+---
+title: Web workers
+category: JavaScript
+updated: 2017-10-30
+weight: -1
+---
+
+## Web workers
+
+#### Client
+
+```js
+var worker = new Worker('worker.js')
+
+worker.onmessage = function (message) {
+  alert(JSON.stringify(message.data))
+})
+
+worker.postMessage('hello!')
+```
+
+Messages can be anything that can be serialized into JSON (objects, arrays, strings, numbers, booleans). See: [structured clone](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)
+
+#### Worker
+
+```js
+self.onmessage = function (message) {
+  ···
+}
+
+self.postMessage({ msg: 'hello' })
+```
+
+### Message data
+
+#### [MessageEvent]
+
+```js
+bubbles: false
+cancelBubble: false
+cancelable: false
+clipboardData: undefined
+currentTarget: Worker
+data: "Hello"             ← the data
+defaultPrevented: false
+eventPhase: 0
+lastEventId: ""
+origin: ""
+ports: Array[0]
+returnValue: true
+source: null
+srcElement: Worker
+target: Worker
+timeStamp: 1344821022383
+type: "message"
+```
+
+These are the contents of `message` on onmessage.