# BackgroundSync Form

The Background Sync API enables requests to be sent even when offline. These requests are queued and automatically dispatched once the user is online. While online, normal form submission behaviors remain unchanged.

The configuration below ensures all requests starting with `/form` are queued and sent upon reconnection. Ensure the queue name is unique. The request method can be customized to differentiate, for instance, between `POST` and `PUT` requests, allowing for distinct retention periods.

**Usage**

{% code title="" overflow="wrap" lineNumbers="true" %}

```yaml
pwa:
    serviceworker:
        enabled: true
        workbox:
            enabled: true
            background_sync:
                - queue_name: 'form'
                  match_callback: 'startsWith: /form'
                  method: POST
                  max_retention_time: 7_200 # 5 days in minutes
                  force_sync_fallback: true #Optional
```

{% endcode %}

{% code overflow="wrap" lineNumbers="true" %}

```twig
<form {{ stimulus_controller('@pwa/backgroundsync-form') }} method="post">
    ...
    <button {{ stimulus_action('@pwa/backgroundsync-form', 'send')}} type="submit">
        Send!
    </button>
</form>
```

{% endcode %}

### Parameters

`params`: an object with the `fetch` parameters to use. Default value:&#x20;

```json
{
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    redirect: 'follow',
    referrerPolicy: 'no-referrer'
}
```

`headers`: header parameters to be passed to the request. Default value: `{}`

`redirection`: when offline and after the form submission, the redirection URI. Default value: `null`.

### Actions

`send`: To be applied on the form submit button.

### Targets

None

### Events

`pwa--backgroundsync-form:before:send`: contains the `URL` and the combined `fetch` parameters. Sent just before the request submission.

`pwa--backgroundsync-form:after:send`: contains the `URL` , the combined `fetch` parameters and the `response`. Sent right after the request submission.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pwa.spomky-labs.com/1.3.x/symfony-ux/backgroundsync-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.