I am super excited about this feature, since I have literally been waiting for it for over 2 years now. We can now easily create multi screen apps, as well as sharing API related data across multiple browser tabs.

Content

1. Introduction
2. How to install the Safari Tech Preview?
3. How to create a SharedWorker based on a JS module?
4. The neo.mjs multi window Covid Dashboard
5. Current state of browsers
6. Final thoughts

1. Introduction

For those of you who are not familiar with SharedWorkers yet, take a quick look at this link:

While Chrome and Firefox do support SharedWorkers for quite some time, the story is very different for the Webkit based scope.

The team actually worked on an implementation many years ago, but if I remember it correctly dropped the development at version 7 because of security concerns.

I was involved in a quite big community effort to push the feature back into the “on radar” category:

Fast forward: the Webkit team created a new ticket and resolved this one almost in secret:

This ticket is resolved now and it just ended up inside the latest version of the Safari Tech Preview:

2. How to install the Safari Tech Preview?

The installation is easy:

3. How to create a SharedWorker based on a JS module?

You can create a non module based worker like this:

const worker = new SharedWorker('worker.js');

In case you do want a JS module as the starting point, just use the type option:

const worker = new SharedWorker('worker.mjs', {
  type: 'module'
});

4. The neo.mjs multi window Covid Dashboard

This demo app is still one of the most amazing neo.mjs demos:

So far, it did only run inside Chromium and Firefox browsers. Now, it does also run inside Safari Tech Preview :)

Try it out for yourself:

development mode (Chromium, Safari):
neo.mjs/apps/sharedcovid/index.html#mainview=table

dist/production (Chromium, Firefox, Safari):
neo.mjs/dist/production/apps/sharedcovid/index.html#mainview=table

5. Current state of browsers

We can summarise it as follows:

( generated with https://imgflip.com/memegenerator/187760713/Three-dragons)

Safari made a huge comeback when it comes to rendering performance. E.g. the neo.mjs helix and gallery views are at the same level as Chromium. Firefox feels around 10x slower in this scenario and this is really intense.

While Firefox does support SharedWorkers as well, the Mozilla team has not finished the support for JS modules inside the worker based scope yet. More precisely: dynamic imports are not working yet.

For the neo.mjs scope this means:

dev mode (dedicated workers):
Chromium, Safari

dev mode (shared workers):
Chromium, Safari

dist/production (dedicated workers):
Chromium, Firefox, Safari

dist/production (shared workers):
Chromium, Firefox, Safari

It would be very nice to see Mozilla catching up again soon!

6. Final thoughts

At this point, the neo.mjs workers setup runs right away inside Safari:

This is also true in case we switch to the SharedWorkers scope.

This enables us to directly communicate across multiple browser windows and share the same backend (API) data, which results in less calls to the BE.

The performance gains are stunning.

Thinking about iOS: Apple still restricts iOS to only allow the Webkit Engine. Meaning: Chrome on iOS is just a skinned Safari. As soon as the SW support ends up on iOS too, we can create hybrid apps which use headless browsers and in there, apps can also directly communicate.

The new Safari release pushes neo.mjs to its prime time. Unless you want to become the next jQuery developer of tomorrow, I can only strongly recommend to take a deep dive into it:

In case you need help with learning neo, you are very welcome to join the Slack channel:

Best regards & happy coding,
Tobias