Introduce Service Worker to improve speed (and help with unreliable, offline connections)

[cvan]

A Service Worker would be good to introduce to help the load times. Even on subsequent loads, the time to first byte (even for the 304 requests with E-Tag headers) can add up.

I'd recommend using https://github.com/GoogleChrome/sw-toolbox or a snippet from https://serviceworke.rs/. I have several handy but I'd recommend starting with sw-toolbox.

Cache the common assets first. And, we can look to possibly storing the responses to the Uploadcare requests using the Cache API (if the files are big, IndexedDB could be used as a last resort).

[cvan]

Also could be useful: https://github.com/TalAter/UpUp

[feiss]

Since users can also save their painting in a local file, the offline option is interesting!

[cvan]

Example: load a drawing URL once, close the tab, and load it again. On my connection, this drawing takes over 6 seconds to load on subsequent refreshes (even with all the 304 responses).

The drawing file clocks in at 568.303 KB, which isn't that large.

But, it's the whole request/response lifecycle that is eating up the time (even if the responses are already cached by the browser, which they are).

A simple Service Worker will obliterate these network bottlenecks. It's some low-hanging fruit to get some great improved perf.

I'd love to tackle this next week.

[fernandojsg]

@cvan I'v never worked with Service Worker before, do you mind giving some advices on how to deal with it, or start some wip PR?

[cvan]

Yep, working on it for Puzzle Rain, so expect a PR for several repos soon.

[fernandojsg]

Cool! :)

[cvan]

FYI: I made a tool for handling a Service Worker that is versioned based on a hash of static assets in a directory:

https://github.com/cvan/sherpy https://gist.github.com/cvan/b0b373442a69b298fc05d4a8a8001d5a

Might be useful out of the box, though you may have to tweak things slightly - YMMV.