feat(service-worker): support sendRequest as a notificationclick action (#46912)

Implement a new `notificationclick` action, `sendRequest`, which sends a
GET request to the specified URL, without opening a new window. This can
be useful for hitting an API endpoint.

PR Close #46912
This commit is contained in:
Tristan Sprößer
2022-07-19 14:03:23 +02:00
committed by Andrew Kushnir
parent 49e1912e1d
commit 383090858c
3 changed files with 59 additions and 3 deletions
@@ -61,11 +61,12 @@ The Angular service worker supports the following operations:
| `openWindow` | Opens a new tab at the specified URL, which is resolved relative to the service worker scope. |
| `focusLastFocusedOrOpen` | Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL, which is resolved relative to the service worker scope. |
| `navigateLastFocusedOrOpen` | Focuses the last focused client and navigates it to the specified URL, which is resolved relative to the service worker scope. If there is no client open, then it opens a new tab at the specified URL. |
| `sendRequest` | Send a simple GET request to the specified URL. |
<div class="alert is-important">
If an `onActionClick` item does not define a `url`, then the service worker's registration scope is used.
</div>
### Actions
@@ -86,14 +87,16 @@ In addition, using the `onActionClick` property on the `data` object, you can ti
{"action": "foo", "title": "Open new tab"},
{"action": "bar", "title": "Focus last"},
{"action": "baz", "title": "Navigate last"},
{"action": "qux", "title": "Just notify existing clients"}
{"action": "qux", "title": "Send request in the background"}
{"action": "other", "title": "Just notify existing clients"}
],
"data": {
"onActionClick": {
"default": {"operation": "openWindow"},
"foo": {"operation": "openWindow", "url": "/absolute/path"},
"bar": {"operation": "focusLastFocusedOrOpen", "url": "relative/path"},
"baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"}
"baz": {"operation": "navigateLastFocusedOrOpen", "url": "https://other.domain.com/"},
"qux": {"operation": "sendRequest", "url": "https://yet.another.domain.com/"}
}
}
}
@@ -380,6 +380,10 @@ export class Driver implements Debuggable, UpdateSource {
}
break;
}
case 'sendRequest': {
await this.scope.fetch(urlToOpen);
break;
}
default:
break;
}
@@ -1035,6 +1035,55 @@ describe('Driver', () => {
});
});
describe('`sendRequest` operation', () => {
it('sends a GET request to the specified URL', async () => {
// Initialize the SW.
expect(await makeRequest(scope, '/foo.txt')).toBe('this is foo');
await driver.initialized;
server.clearRequests();
// Trigger a `notificationlick` event.
const url = '/some/url';
await scope.handleClick(
{
title: 'Test notification',
body: 'This is a test notifiction.',
data: {
onActionClick: {
foo: {operation: 'sendRequest', url},
},
},
},
'foo');
// Expect request to the server.
server.assertSawRequestFor('/some/url');
});
it('falls back to sending a request to `/` when no URL is specified', async () => {
// Initialize the SW.
expect(await makeRequest(scope, '/foo.txt')).toBe('this is foo');
await driver.initialized;
server.clearRequests();
// Trigger a `notificationlick` event.
await scope.handleClick(
{
title: 'Test notification',
body: 'This is a test notifiction.',
data: {
onActionClick: {
bar: {operation: 'sendRequest'},
},
},
},
'bar');
// Expect request to the server.
server.assertSawRequestFor('/');
});
});
describe('No matching onActionClick field', () => {
it('no client interaction', async () => {
expect(await makeRequest(scope, '/foo.txt')).toEqual('this is foo');