Added Service Worker Sample for posting messages from a page that isn't controlled

[TalAter]

This new code sample shows how a page that has just registered a Service Worker, but is still not being controlled by it, can use the ServiceWorkerRegistration object to post messages to the new Service Worker.

It also shows how to detect whether to use this method, or good old fashioned (old?) navigator.serviceWorker.controller.

All the samples provided so far (and all the tutorials I saw) only began communication using postMessage after the page was refreshed... so finding this little gem in the Service Worker spec was a lifesaver.

[jpmedley]

This looks good, but I have a few concerns. If the install handler calls event.waitUntil(), the message will be blocked. Maybe your explanation should point this out.

Also, if you're trying to get the jump on the install process, it seems like you might be setting yourself up for a race condition. What's the use case for this trick?

[TalAter]

Thanks @jpmedley.

I just tried this out with very long installation process inside an event.waitUntil() and couldn't see how the message could be blocked. I'm using ServiceWorkerRegistration which is only returned when the promise from registering the service worker completes.

navigator.serviceWorker.register('sw.js').then(function(registration) {
  // registration contains an installed Service Worker here
})

Is there a way that I'm missing which might cause a race condition or the message to be blocked?

As for a use case, there are many. The one I'm looking at right now is a script that saves data into the cache. The data to save is present in the page, and not in the service worker code.

This means that without this method, if I want to send the data to the Service Worker so it will cache it, I need to wait until the second time the user visits this page, and the Service Worker is in control of the page.

Here's some code that uses this trick to allow me to place messages into the cache when the user first visits the page.