Workbox: [Feature] Differential Loading support

[Sturgelose]

Library Affected:
workbox-sw, workbox-build, etc.

Browser & Platform:
"all browsers"

Feature Request Description:
Describe a guide on how to handle Differential Loading using workbox.

In Angular 8.0 they have introduced Differential Loading, where the SPA is built into both ES5 and ES2015, and only one of the builds gets started at runtime depending on the support of the browser. As I know, in React and other frameworks they are evolving in this direction as well in order to optimize build sizes and speed.

If you use Workbox, the service workers caches all the files in both builds (ES5 and ES2015), making it download both builds when doing the precache (and thus downloding double of data and breaking the benefits of Differential Loading). One idea I'd see is to have a different SW for each build and we would load a different service worker depending on ES5 or ES2015 support, though I'm not quite sure on how this could be achieved...

I think the main challenge would be to find out which of the two ES5 or ES2015 service worker to load...

I'm aware this sounds a lot like a question, but as I am not aware about the possibilities of this feature I do not have a full proposal on how to handle this.

Thanks a lot!

When reporting bugs, please include relevant JavaScript Console logs and links to public URLs at which the issue could be reproduced.

[jeffposnick]

(This is tangentially related to https://github.com/GoogleChrome/workbox/issues/155.)

The way I'd recommend handling this now is to add two different build steps that each generate a different service worker file, each of which contains a different set of assets in the precache manifest.

Then, you'd conditionally register one of the two service worker files based on that capabilities of the current browser, using, e.g., the <script type="module"> technique to control which gets registered:

<script type="module">
  navigator.serviceWorker.register('sw-modern.js');
</script>
<script nomodule>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw-legacy.js');
  }
</script>

(You can of course use workbox-window here instead of navigator.serviceWorker.register().)

You're correct that it would be good to smooth out some of the manual steps in this process, as well as include an example of it in our documentation.

[Sturgelose]

Thanks a lot for the comments! When I have a window to work with it, and I can get some feedback in real implementation, I'd be willing to help to write some docs on how to do so.

We have a full setup of workbox running with Angular, so I'm also checking on creating a small series of blog posts in order to share how we did it with the community.

[philipwalton]

To be honest, the way I've handled this in the past (and still do handle it today) is to only create a service worker file for my ES2015+ build.

The percentage of browsers that support SW but don't support modules is tiny. As far as I know it's only a few very old versions of Samsung Internet (which aren't even supported by Samsung) as well as very old versions of Firefox (older than ESR).

Since SW should usually be a progressive enhancement, I think at this point it's fine to only progressively enhance the browsers that support both (which, as I said, is the vast majority of modern browsers).