'action' instead of 'type' as message identifier

examples/mvtlayer.worker.js

@@ -44,7 +44,7 @@ const layer = new VectorTileLayer({
 });
 const renderer = layer.getRenderer();
 const tileQueue = new TileQueue(getTilePriority, function() {
-  worker.postMessage({type: 'request-render'});
+  worker.postMessage({action: 'request-render'});
 });
 const maxTotalLoading = 8;
 const maxNewLoads = 2;
@@ -64,12 +64,12 @@ renderer.useContainer = function(target, transform, opacity) {
 let rendering = false;
 
 worker.addEventListener('message', function(event) {
-  if (event.data.type !== 'render') {
+  if (event.data.action !== 'render') {
     return;
   }
   if (rendering) {
     // drop this frame
-    worker.postMessage({type: 'request-render'});
+    worker.postMessage({action: 'request-render'});
     return;
   }
   frameState = event.data.frameState;
@@ -85,7 +85,7 @@ worker.addEventListener('message', function(event) {
     }
     const imageData = canvas.transferToImageBitmap();
     worker.postMessage({
-      type: 'rendered',
+      action: 'rendered',
       imageData: imageData,
       transform: rendererTransform,
       opacity: rendererOpacity,

examples/offscreen-canvas-tiles.js

@@ -11,14 +11,14 @@ const mvtLayerWorker = new Worker();
 
 const loadingImages = {};
 mvtLayerWorker.addEventListener('message', event => {
-  if (event.data.type === 'getFontParameters') {
+  if (event.data.action === 'getFontParameters') {
     getFontParameters(event.data.font, font => {
       mvtLayerWorker.postMessage({
-        type: 'getFontParameters',
+        action: 'getFontParameters',
         font: font
       });
     });
-  } else if (event.data.type === 'loadImage') {
+  } else if (event.data.action === 'loadImage') {
     if (!(event.data.src in loadingImages)) {
       const image = new Image();
       image.crossOrigin = 'anonymous';
@@ -26,7 +26,7 @@ mvtLayerWorker.addEventListener('message', event => {
         createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => {
           delete loadingImages[event.data.iconName];
           mvtLayerWorker.postMessage({
-            type: 'imageLoaded',
+            action: 'imageLoaded',
             image: imageBitmap,
             iconName: event.data.iconName
           }, [imageBitmap]);
@@ -77,34 +77,37 @@ function updateContainerTransform() {
 
 }
 
+function render(id, frameState) {
+  if (!container) {
+    container = document.createElement('div');
+    container.style.position = 'absolute';
+    container.style.width = '100%';
+    container.style.height = '100%';
+    transformContainer = document.createElement('div');
+    transformContainer.style.position = 'absolute';
+    transformContainer.style.width = '100%';
+    transformContainer.style.height = '100%';
+    container.appendChild(transformContainer);
+    canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.style.left = '0';
+    canvas.style.transformOrigin = 'top left';
+    transformContainer.appendChild(canvas);
+  }
+  mainThreadFrameState = frameState;
+  updateContainerTransform();
+  mvtLayerWorker.postMessage({
+    action: 'render',
+    id: id,
+    frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer()))
+  });
+  return container;
+}
+
 const map = new Map({
   layers: [
     new Layer({
-      render: function(frameState) {
+      render: render.bind(undefined, 'mapbox')
-        if (!container) {
-          container = document.createElement('div');
-          container.style.position = 'absolute';
-          container.style.width = '100%';
-          container.style.height = '100%';
-          transformContainer = document.createElement('div');
-          transformContainer.style.position = 'absolute';
-          transformContainer.style.width = '100%';
-          transformContainer.style.height = '100%';
-          container.appendChild(transformContainer);
-          canvas = document.createElement('canvas');
-          canvas.style.position = 'absolute';
-          canvas.style.left = '0';
-          canvas.style.transformOrigin = 'top left';
-          transformContainer.appendChild(canvas);
-        }
-        mainThreadFrameState = frameState;
-        updateContainerTransform();
-        mvtLayerWorker.postMessage({
-          type: 'render',
-          frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer()))
-        });
-        return container;
-      }
     })
   ],
   target: 'map',
@@ -114,9 +117,9 @@ const map = new Map({
   })
 });
 mvtLayerWorker.addEventListener('message', function(message) {
-  if (message.data.type === 'request-render') {
+  if (message.data.action === 'request-render') {
     map.render();
-  } else if (canvas && message.data.type === 'rendered') {
+  } else if (canvas && message.data.action === 'rendered') {
     transformContainer.style.transform = '';
     const imageData = message.data.imageData;
     canvas.width = imageData.width;

src/ol/render/canvas.js

@@ -289,15 +289,15 @@ export const registerFont = (function() {
   return function(fontSpec) {
     if (WINDOW) {
       getFontParameters(fontSpec, fontCallback);
-    } else {
+    } else if (self.postMessage) {
       /** @type {any} */
       const worker = self;
       worker.postMessage({
-        type: 'getFontParameters',
+        action: 'getFontParameters',
         font: fontSpec
       });
       worker.addEventListener('message', function handler(event) {
-        if (event.data.type === 'getFontParameters') {
+        if (event.data.action === 'getFontParameters') {
           worker.removeEventListener('message', handler);
           const font = event.data.font;
           fontCallback(font);