Detect whether postMessage can send objects?

Question

I'm looking for a neat way to detect whether postMessage in the browser supports the sending and receiving of objects or just strings. I figure that someone out there must have wrote something that does this but I have not managed to find a solution.

I'm using postMessage to send data to/from a WebWorker. Whilst detecting whether the browser supports workers is straight-forward, detecting whether objects can be send via postMessage has proved more difficult.

I'd like to write a simple detection function. So, if the browser supports the sending of objects to use that. If only strings are allowed I can fallback to using JSON.stringify(). I'll probably assign the function to a dojo/has test (although this is not relevant to the question/answer).

What have other people done to solve this problem? Any advice would be great, I'm new to both WebWorkers and postMessage. Thanks in advance.

Dumb question from me - can you `postMessage` to the same window? — Ian, Dec 07 '12 at 11:26
@Ian ... what? A WebWorker is a class to create (pseudo-)threads. You can basically run an extern javascript file while the javascript within that page continues to run flawless. `postMessage` allows you to communicate with that thread. It doesn't has anything to do with different windows at all. — Tim S., Dec 07 '12 at 11:31
Your first sentence talks about sending messages with `postMessage`. I look up `postMessage` and it talks about sending messages to other windows (as I remember). Ignoring the fact that you're talking to Web Workers, why wouldn't you just set up a test call? I'm guessing their communication is different, but if you set up a listener in the current window for `onmessage` and pass in `{}`...just check the `typeof` to see if it's an object and not a string. — Ian, Dec 07 '12 at 11:35

gregers · Accepted Answer · 2014-04-11T10:10:09.937

I found an even easier way to detect if postMessage only supports strings or if it supports other types. Simply add a custom toString-method on the object. When trying to send an object with postMessage in IE8 and IE9 they will be converted to a string with the toString-method on the object. Since browsers that support sending objects doesn't call toString we can use this to our advantage. This test is not async, so you'll get the result instantly. Haven't tested this with web-workers, but I suppose you can use the same technique.

var onlyStrings = false;
try{window.postMessage({toString:function(){onlyStrings=true;}},"*");}catch(e){}

console.log("Browser only supports postMessage with strings? " + onlyStrings);

~~Tested in IE8, IE9, IE10 and latest version of Chrome, Firefox, Safari and Opera: http://jsbin.com/igowoFaj/1/edit?js,console~~

Update: Did a BrowserScope test with many more tests and browsers. Conclusion is that it's safe to send clonable objects, arrays, numbers, pixel data and array buffers if onlyStrings is false. In theory all browsers that allow sending objects should use the structured clone algorithm, but the Android browser and Opera Mobile has quirks. The BrowserScope test result is a bit hard to read, because a 0 for send_xxx is only problematic if the browser actually has support for that type, so check supports_xxx too. If they are equal it's ok, but it's a bug if the browser has support but can't send (when onlyStrings is false).

score 3 · Answer 2 · answered Dec 07 '12 at 11:28

You could try to perform an action BEFORE resuming your script. You could try this:

dummy_task.js

self.onmessage = function(event) {
    self.postMessage(event.data);
};

javascript

workerSupportObject(callback);

function workerSupportObject(callback) {
    var callbackIsCalled = false; // to make sure callback isn't run twice
    var worker = new Worker('dummy_task.js'); // create a worker

    // create event
    worker.onmessage = function(event) {
        // if the value is the same as we sent, it probably works
        if(!callbackIsCalled) callback.call(null, event.data.value === 'dummy');
        callbackIsCalled = true;
    };

    try {
        // send dummy JSON data
        worker.postMessage({'value': 'dummy'});
    } catch(e) {
        // oh... an error... clearly that's a no.
        if(!callbackIsCalled) callback(null, false);

        callbackIsCalled = true;
    }
}

function callback(objectSupported) {
    console.log('Worker supports objects: ', objectSupported);
}

Thanks, this seemed to work quite well. It's unfortunate that this cannot be done without callbacks as it voids being able to assign this to a has() function. Without the structures in place to ensure the has() is only called after availability has been tested. However, given the event based nature of what we are doing here it is probably impossible to do this without a callback. Thanks for your help. — Stephen Simpson, Dec 08 '12 at 10:54

score 3 · Answer 3 · answered Mar 09 '13 at 06:36

I wanted to know the same thing. I created this script to detect if an object could be passed in postMessage by a simple callback to the current window. You will see IE 9 return false, IE 10 returns true.

http://jsfiddle.net/milesplit/DvqqH/

var supportsPostObject = false;

(function(){
    var callback = function(e) {
        supportsPostObject = (typeof(e.data)!='string');
    };
    (window.addEventListener) ?
        window.addEventListener('message', callback) :
        window.attachEvent('onmessage', callback);
    ('postMessage' in window) && window.postMessage({}, '*');
})();

setTimeout(function(){
   alert(supportsPostObject);
}, 0);

score 0 · Answer 4 · answered Jan 08 '13 at 18:39

postMessage also works between iframes; assuming that the behavior is the same between workers and frames, you should try the following or something like it:

<html>
   <body>
      <iframe id='if'>

      </iframe>
      <script>
         var iframe = document.getElementById('if');
         var iframeScript = iframe.contentDocument.createElement("script");
         iframeScript.appendChild(
            iframe.contentDocument.createTextNode(
               'window.addEventListener("message", function(e) {console.log(e.data);}); console.log("listener attached");')); 
         iframe.contentDocument.body.appendChild(iframeScript);
         iframe.contentWindow.postMessage("asdf", "*");
         iframe.contentWindow.postMessage({'whatAmI': 'an object, maybe?'}, "*");
      </script>
   </body>   
</html>

You may need to replace console or console.log to be able to see results, but on Chrome, this gets me

listener attached about:blank (1):1
asdf about:blank (1):1
Object {whatAmI: "an object, maybe?"} about:blank (1):1

when I save it to a local file and open it up.

The jsfiddle version (and the version which uses an actual worker) are left as an exercise for the reader. :)

Detect whether postMessage can send objects?

4 Answers4

Linked