Add message event listener when skipWaiting: false

[jeffposnick]

Library Affected:
workbox-build

When developers use the Workbox build tools in generateSWmode, and they set skipWaiting: false, we should consider adding in some boilerplate to the generated service worker that will listen to a message event and call skipWaiting() in response to a specific command that could be sent from the client page.

This would allow developers to follow recipes like https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offer_a_page_reload_for_users while still using generateSW (instead of injectManifest) mode if they prefer.

The change could be added to

workbox/packages/workbox-build/src/templates/sw-template.js

Line 42 in b146d8d

<% if (skipWaiting) { %>workbox.skipWaiting();<% } %>

with an else clause that would look like:

self.addEventListener('message', (event) => {
  // What should this check for?
  if (event.data === '...') {
    self.skipWaiting();
  }
});

The main thing to decide is what the event.data check should look like. This should presumably be coordinated with the work being done on the workbox-window library by @philipwalton.

[cintrzyk]

shouldn't be self.skipWaiting() rather than workbox.skipWaiting()? as I see workbox.skipWaiting() sets a listener instead of forcing a service worker to become active immediately 🤔

🤞 can't wait for it

[jeffposnick]

We're going to go ahead and implement this ahead of the full workbox-messages package, and just add an explicit message listener and use event.data.type === 'SKIP_WAITING' as the check. That should end up being compatible with the format we have planned for workbox-messages