Add a worker for caching at runtime (aka, export PWA games)

[arthuro555]

Description

Some games have lots of images and especially when the developper don't have his CDN it can take some time to load everything. Plus some runtime files don't change often and don't need to be redownloaded everytime.

Solution suggested

Using web workers cache. It permits to let some files cached on the device to let it potentially work offline and most importantly to not have to redownload every assets every time you run the game.

Additional resource

https://developers.google.com/web/tools/workbox/ is a tool by google helping to manage the cache. It would make the runtime slightly larger but it's worth it if you consider the cache / loading time improvements

[4ian]

This is akin to exporting games that are ready-made as PWA.
There is some risk of confusion in case of updates though because of the existing cached assets of the existing service workers being still served after an update - because the new service worker is only activated after the game is opened (so the new service worker is downloaded), then closed (refresh is not working) then opened again.

[arthuro555]

because the new service worker is only activated after the game is opened

Couldn't that be solved by using some sort of build timestamp in the runtime and in the worker, and if the worker's current build timestamp doesn't match the rest of the runtime's timestamp it wouldn't deliver cached assets and/or code?

[4ian]

Yep, having a cache bursting unique number in filenames is probably something that will be needed.

[arthuro555]

I have here a very simple worker:

// sw.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
workbox.routing.registerRoute(new RegExp("[\s\S]*"), new workbox.strategies.NetworkFirst());

and installed using (in index.html)

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    // Find current path
    currentPath = location.href.split("#");
    if (currentPath.length > 1)
      currentPath = currentPath[0];
      currentPath = location.href.split("?");
    if (currentPath.length > 1)
      currentPath = currentPath[0];

    navigator.serviceWorker.register(currentPath + 'sw.js');
  });
}
</script>

This would add some basic caching capabilities by auto caching all files requested, and whenever there is no network available, the game will automatically load from the cache, without complicating things too much.

I think in the end the best method would be to let users define rules for a library like workbox, like they have a choice on what caching method to use for each resource type (js code, images, sounds and music, etc) inside a menu and a service worker is generated according to their choices.