amp-install-serviceworker: Trigger event when service worker has been update has been installed

[westonruter]

At the moment there is no way to alert the user when an updated service worker has been installed. Often pages inform the user of this with a prompt such as:

I suggest that amp-install-serviceworker be extended to add support for an updatefound event which can be triggered on the amp-install-serviceworker element.

amphtml/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js

Lines 293 to 303 in 9e9554c

	function install(win, src) {
	return win.navigator.serviceWorker.register(src).then(function(registration) {
	if (getMode().development) {
	user().info(TAG, 'ServiceWorker registration successful with scope: ',
	registration.scope);
	}
	return registration;
	}, function(e) {
	user().error(TAG, 'ServiceWorker registration failed:', e);
	});
	}

Perhaps instead of updatefound it would be better to name it updateinstalled since as I understand we're primarily interested in when an updatefound event results in 'installed' === registration.installing.state being true. So perhaps something like so:

function install(win, src) {
  return win.navigator.serviceWorker.register(src).then(function(registration) {
    if (getMode().development) {
      user().info(TAG, 'ServiceWorker registration successful with scope: ',
        registration.scope);
    }

    reg.addEventListener('updatefound', () => {
      reg.installing.addEventListener('statechange', () => {
        if ( 'installed' === registration.installing.state ) {
          const name = 'updateinstalled';
          const event = createCustomEvent(this.win, `${TAG}.${name}`, dict({}));
          Services.actionServiceForDoc(this.element).trigger(this.element, name, event, ActionTrust.HIGH);
        }
      });
    });

    return registration;
  }, function(e) {
    user().error(TAG, 'ServiceWorker registration failed:', e);
  });
}

With something like this in place, an author could then show a notice using amp-bind like so:

<amp-state id="updateAvailable">false</amp-state>
<amp-install-serviceworker 
  on="updateinstalled:AMP.setState({updateAvailable:true})" 
  src="https://www.example.com/serviceworker.js"
  data-iframe-src="https://www.example.com/install-serviceworker.html"
  layout="nodisplay"
></amp-install-serviceworker>
<button hidden [hidden]="! updateAvailable" on="tap:AMP.navigateTo(url=AMPDOC_URL)">
   Update available!
</button>

(Maybe there should be an AMP.reload() action available as well.)

Thoughts?

[westonruter]

/cc @cramforce

[kristoferbaxter]

Added @ericlindley-g as he's been thinking about enhancements to amp-install-serviceworker for a little bit.

[cramforce]

I wonder if we should establish a standard mechanism to update from amp-state from any worker. @kristoferbaxter Could it be the same API as what we're planning to use for amp-script?

[kristoferbaxter]

Agreed @cramforce.

We should have the same standard, I'll write something up.

[westonruter]

I wonder if we should establish a standard mechanism to update from amp-state from any worker.

❤️ I was wanting to write up something about this as well. In particular I had in mind: if a service worker is using a stale-while-revalidate strategy for caching navigation requests, as soon as revalidation results in there being an update to a cached response, the service worker needs to communicate a message to the client that there is an update to that URL and the user should be prompted to refresh.

I'm sure you have something in mind already, but what comes to mind for me is a message event that is triggered on the amp-install-serviceworker element which could then be used in a call to AMP.setState(). For example:

<amp-state id="stateFromServiceWorker">{}</amp-state>
<amp-install-serviceworker
	on="message:AMP.setState({stateFromServiceWorker:event.data})"
	src="https://www.example.com/serviceworker.js"
	data-iframe-src="https://www.example.com/install-serviceworker.html"
	layout="nodisplay"
></amp-install-serviceworker>

Where messages could be sent from the service worker which could then populate the state via the event handler.

[cramforce]

I was thinking about something more imperative. And giving the SW itself access to the page's state.

[kristoferbaxter]

I was thinking about something more imperative. And giving the SW itself access to the page's state.

That's where I was headed as well. I'll put the document up tomorrow.