Use ESM in a service worker file (import/export)

Question

I am trying to use a service worker file which is also an ESM module.

The register method has an extra argument accepting an options object which has a type field whose valid values seem to be classic and module, but when I use:

navigator.serviceWorker.register('worker.js', { type: 'module' });
// `worker.mjs` doesn't work either
// The file exists in both cases!

I get an unspecified DOMException with no message in Chrome.

I figured what the valid values for type were by reading the spec, specifically this:

https://html.spec.whatwg.org/multipage/workers.html#workertype

It seems to me like my code is valid.

As a sanity check, I also tried to explicity set type to classic and the service worker registration then goes through fine. If I set it to an invalid value, I get a TypeError telling me so, so it's not like the browser is not yet aware of type: module. It is treated as a special case, it just throws a DOMException with no message.

Am I using the type field correctly? Is it still too early and it is not supported in browsers?

`.mjs` is a Node.js thing, not an ESM thing outside Node.js. (And Node.js now has `type`. Hopefully `.mjs` will die a death...) — T.J. Crowder, Jul 09 '19 at 13:27
What version of Chrome? Do the contents of your service worker script make any difference? — T.J. Crowder, Jul 09 '19 at 13:28

Tomáš Hübelbauer · Accepted Answer · 2019-07-11T07:28:02.897

5

This is dumb! Chrome will print just DOMException into the console (not even expansible) when logging the error object and Object.keys on that object instance returns [], but when I specifically print e.message the culprit is revealed:

type 'module' in RegistrationOptions is not implemented yet.See https://crbug.com/824647 for details.

Not amused by Chrome.

edited Jul 11 '19 at 07:28

answered Jul 09 '19 at 13:28

Tomáš Hübelbauer

9,179
14
63
125

2

That link now states that "Yes, this is available in Chrome 91" which was released on May 25th, 2021. – Corey Alix Jan 04 '22 at 20:15

T.J. Crowder · Answer 2 · 2019-07-09T13:38:43.770

2

On browsers, bare names can't be used to identify modules unless you also have a module map (aka import map, this link has much more info) that maps the bare name to a module.

If worker.js is in the same location as the page loading it, then:

navigator.serviceWorker.register('./worker.js', { type: 'module' });
// -------------------------------^^

Or of course, add a module map.

edited Jul 09 '19 at 13:38

answered Jul 09 '19 at 13:29

T.J. Crowder

1,031,962
187
1,923
1,875

Unfortunately this is just not supported and the error message is obscured beyond belief. Just figured it out after posting the question, see my answer. – Tomáš Hübelbauer Jul 09 '19 at 13:29
1

@TomášHübelbauer - Yeah, just saw that. When it *is* supported, I suspect you'll need to do the above, though. :-) – T.J. Crowder Jul 09 '19 at 13:30
I will keep that in mind. With classic (the default) registrations, passing `worker.js` (no `./`) works just fine for me though. The browser is able to resolve the relative URL correctly. – Tomáš Hübelbauer Jul 09 '19 at 13:35
1

@TomášHübelbauer - Right, the requirement for a path or a map is specifically related to modules. For instance, for a non-worker, `` works; but without a map, `` does not, it has to be ``. – T.J. Crowder Jul 09 '19 at 13:39

Use ESM in a service worker file (import/export)

2 Answers2