New example: not-so-simple-service-worker

[sidewayss]

It could use a better name. Please offer suggestions. I have it up and running here:
https://sidewayss.github.io/dom-examples/service-worker/nsssw/

This topic is setup for multiple examples, but as of now there is only one, so I assume that a second example would be desirable. This new example does a few things that the simple-service-worker example does not:

1. addEventListener("statechange", ...)
2. postMessage()
3. module-level cache variable so caches.open() doesn't get called so often
4. different coding style overall, inlines functions, uses .then() instead of await

The pretext is a design that, upon DOMContentLoaded, wants to pre-cache a set of resources by sub-page. In the example it's a set of images as part of a slideshow. Upon loading the page, the service worker caches all the slideshow images so that they display immediately when the user requests them.

The code could use more comments, and I'll add them (or feel free) once the code is generally approved as OK. Same goes for an entry in the readme.md for this repo. #255 is an open PR to add the simple-service-worker example to the readme, and it would be best to merge that, then add this not-so-simple example.

Are there formatting rules for these examples? Should I be running this code through Prettier? If so, just generic Prettier or do you have a specific configuration?

On a related note: I am curious as to the real benefits of implementing the caching scheme illustrated by the simple example. Seems to me that the "install" event .addAll() code only provides faster page loading the 2nd time the user visits the page, at which point the service worker is active and all these files will get cached anyway as part of the "fetch" event handler. Am I correct, are there more generalized benefits to that caching scheme?

[wbamberg]

Thanks for your PR, @sidewayss ! I can't guarantee to look at this any time soon I'm afraid - understanding/reviewing/discussing a whole new SW example is a significant amount of work and so is maintaining it in the future. I think it has to add something that's clearly missing in the current docs to be worth the investment. That is, more examples are not always better.

And showing a different coding style is not really a goal for MDN - we try to have a single coding style, to make it easier for people to understand our examples.

[sidewayss]

Thanks for your reply. No hurry. The coding style of the current simple-service-worker example is hardly standard, the way all the functions are declared as consts, for example. This repo, dom-examples, doesn't seem to have a super-consistent coding style, including the use of Prettier or lack thereof. And by "different coding style" I specifically meant the things I mentioned: .then() instead of await, inlining, declaring functions as function instead of const, hardly things that would go against any overall MDN coding style guidelines, would they?

I think this new example is very bare-bones, in terms of maintenance, and should be useful. But of course it's up to you all at MDN. IMO this topic of service workers leaves a lot of open questions and another couple of examples exploring real world caching issues would really help.