ampproject / ampproject/amphtml

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

Open
#18,615 13 comments 0 reactions 0 assignees View on GitHub
Category: PWA Stale Type: Feature Request
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

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:

![image](https://user-images.githubusercontent.com/134745/43295413-91c16276-90f9-11e8-9cb4-e40966a2ea4b.png)

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.

https://github.com/ampproject/amphtml/blob/9e9554c19a232664fe299fd9195dada19f4f7781/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js#L293-L303

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:

```js
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:

```html
false

Update available!

```

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

Thoughts?

Contributor guide

Open the contributing guide

Research direction

Start with extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js around the linked registration code at lines 293-303. Review the issue's proposed updatefound/statechange flow and the existing action trigger pattern; done means the element exposes a documented event when an updated service worker reaches the installed state, with coverage added for that behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.