Skip to content

Commit

Permalink
Fixes to Background Sync API (#25215)
Browse files Browse the repository at this point in the history
* Fixes to Background Sync API

* Update files/en-us/web/api/background_synchronization_api/index.md

Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>

* md lint

* Update files/en-us/web/api/syncmanager/register/index.md

---------

Co-authored-by: dawei-wang <dawei-wang@users.noreply.github.com>
Co-authored-by: Jean-Yves Perrier <jypenator@gmail.com>
  • Loading branch information
3 people committed Mar 10, 2023
1 parent 52fbb31 commit db5dc15
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 53 deletions.
25 changes: 13 additions & 12 deletions files/en-us/web/api/background_synchronization_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,41 @@ slug: Web/API/Background_Synchronization_API
page-type: web-api-overview
status:
- experimental
spec-urls: https://wicg.github.io/background-sync/spec/
browser-compat: api.SyncManager
---

{{DefaultAPISidebar("Background Sync")}}{{Securecontext_Header}}{{SeeCompatTable}}

The Background Synchronization API provides a way to defer tasks to be run in a {{domxref('Service Worker API','service worker')}} until the user has a stable network connection.
The **Background Synchronization API** enables a web app to defer tasks so that they can be run in a [service worker](/en-US/docs/Web/API/Service_Worker_API) once the user has a stable network connection.

## Background Synchronization Concepts and Usage
## Concepts and usage

The Background Sync API allows web applications to defer server synchronization work to their service worker to handle at a later time, if the device is offline. Uses may include sending requests in the background if they couldn't be sent while the application was being used.
The Background Synchronization API allows web applications to defer server synchronization work to their service worker to handle at a later time, if the device is offline. Uses may include sending requests in the background if they couldn't be sent while the application was being used.

For example, an email client application could let its users compose and send messages at any time, even when the device has no network connection. The application frontend just registers a sync request and the service worker gets alerted when the network is present again and handles the sync.

The {{domxref('SyncManager')}} interface is available through {{domxref('ServiceWorkerRegistration.sync')}}. A unique tag identifier is set to 'name' the sync event, which can then be listened for within the {{domxref('ServiceWorker')}} script. Once the event is received you can then run any functionality available, such as sending requests to the server.

As this API relies on service workers, functionality provided by this API is only available in a secure context.

> **Note:** At the time of writing, the Background Synchronization API is only available through an installed [Progressive Web App](/en-US/docs/Web/Progressive_web_apps)
> **Note:** At the time of writing, the Background Synchronization API is only available through an installed [Progressive Web App](/en-US/docs/Web/Progressive_web_apps).
## Background Synchronization Interfaces
## Interfaces

- {{domxref('SyncManager')}} {{Experimental_Inline}}
- : Registers tasks to be run in a service worker at a later time with network connectivity. These tasks are referred to as _background sync requests_.
- {{domxref('SyncEvent')}}
- : Represents a synchronization event, sent to the {{domxref('ServiceWorkerGlobalScope', 'global scope')}} of a {{domxref('ServiceWorker')}}. It provides a way to run tasks in the service worker with network connectivity.
- {{domxref('SyncEvent')}} {{Experimental_Inline}}
- : Represents a synchronization event, sent to the [global scope](/en-US/docs/Web/API/ServiceWorkerGlobalScope) of a {{domxref('ServiceWorker')}}. It provides a way to run tasks in the service worker once the device has network connectivity.

## Service Worker Additions
### Extensions to other interfaces

The following additions to the {{domxref('Service Worker API')}} are specified in the Background Sync specification to provide an entry point for using Background Sync.
The following additions to the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) provide an entry point for setting up background synchronization.

- {{domxref("ServiceWorkerRegistration.sync")}} {{ReadOnlyInline}}
- : Returns a reference to the {{domxref("SyncManager")}} interface for registering tasks to run with network connectivity.
- {{domxref("ServiceWorkerGlobalScope.sync_event", "onsync")}}
- : An event handler fired whenever a {{domxref("ServiceWorkerGlobalScope/sync_event", "sync")}} event occurs. This happens either immediately if the network is available or as soon as the network becomes available.
- : Returns a reference to the {{domxref("SyncManager")}} interface for registering tasks to run once the device has network connectivity.
- [`ServiceWorkerGlobalScope: sync`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/sync_event) event
- : An event handler fired whenever a {{domxref("ServiceWorkerGlobalScope/sync_event", "sync")}} event occurs. This happens as soon as the network becomes available.

## Examples

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/syncevent/syncevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ new SyncEvent(type, options)
- : A string with the name of the event.
It is case-sensitive and browsers always set it to `sync`.
- `options`
- : An object that, _in addition of the properties defined in {{domxref("ExtendableEvent/ExtendableEvent", "ExtendableEvent()")}}_, can have the following properties:
- : An object that, in addition to the properties defined in {{domxref("ExtendableEvent/ExtendableEvent", "ExtendableEvent()")}}, can have the following properties:
- `tag`
- : A developer-defined unique identifier for this `SyncEvent`.
- `lastChance` {{optional_inline}}
Expand Down
4 changes: 4 additions & 0 deletions files/en-us/web/api/syncmanager/gettags/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ None.
A {{jsxref("Promise")}} that resolves to an array of strings
containing developer-defined identifiers for `SyncManager` registrations.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}
65 changes: 25 additions & 40 deletions files/en-us/web/api/syncmanager/register/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,57 +9,42 @@ browser-compat: api.SyncManager.register

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

The **`SyncManager.register`** method of the
{{domxref("SyncManager")}} interface returns a {{jsxref("Promise")}} that resolves to a
{{domxref("SyncRegistration")}} instance.
The **`SyncManager.register`** method of the {{domxref("SyncManager")}} interface registers a synchronization event, triggering a {{domxref("ServiceWorkerGlobalScope.sync_event", "sync")}} event inside the associated service worker as soon as network connectivity is available.

## Syntax

```js-nolint
register()
register(options)
register(tag)
```

### Parameters

- `options` {{optional_inline}}

- : An object that sets options for an instance of {{domxref("SyncRegistration")}}. The
available options are:

- `allowOnBattery`
- : A boolean that determines whether synchronization
is allowed when the user agent is on a battery-powered device. The default
is `true`.
- `id`
- : The unique identifier of the specified
{{domxref("SyncRegistration")}} object.
- `idleRequired`
- : A boolean that determines whether synchronization is
allowed when the user agent's device is idle. The default is `false`.
- `maxDelay`
- : The maximum delay in milliseconds before the next
`sync` event (or the first `sync` event if it is periodic).
The default is `0`, meaning there is no maximum delay.
- `minDelay`
- : The minimum delay in milliseconds before the
next `sync` event (or the first sync event if it is periodic). The
default is `0`.
- `minPeriod`
- : The minimum time
in milliseconds between periodic sync events. The default is `0`,
meaning events are not periodic.
- `minRequiredNetwork`
- : The network condition under which background
synchronization will occur. Valid values are `'network-any'`,
`'network-offline'`, `'network-online'`,
`'network-non-mobile'`. The default value is
`'network-online'`.
- `tag`

- : An identifier for this synchronization event. This will be the value of the `tag` property of the {{domxref("SyncEvent")}} that gets passed into the service worker's {{domxref("ServiceWorkerGlobalScope.sync_event", "sync")}} event handler.

### Return value

A {{jsxref("Promise")}} that resolves to an instance of
{{domxref("SyncRegistration")}}.
A {{jsxref("Promise")}} that resolves to {{jsxref("undefined")}}.

### Examples

The following asynchronous function registers a background sync from a browsing context:

```js
async function syncMessagesLater() {
const registration = await navigator.serviceWorker.ready;
try {
await registration.sync.register("sync-messages");
} catch {
console.log("Background Sync could not be registered!");
}
}
```

## Specifications

{{Specifications}}

## Browser compatibility

Expand Down

0 comments on commit db5dc15

Please sign in to comment.