workbox-background-sync

    Review the guide for workbox-background-sync.

    Summary

    Types

    BackgroundSyncPlugin

    A class implementing the fetchDidFail lifecycle callback. This makes it easier to add failed requests to a background sync Queue.

    Properties

    Queue

    A class to manage storing failed requests in IndexedDB and retrying them later. All parts of the storing and replaying process are observable via callbacks.

    Properties

    • constructor

      function

      Creates an instance of Queue with the given options

      The constructor function looks like: (name: string, options?: QueueOptions) => {...}

      • name

        string

        The unique name for this queue. This name must be unique as it's used to register sync events and store requests in IndexedDB specific to this instance. An error will be thrown if a duplicate name is detected.

      • options

        QueueOptions optional

    • name

      string

    • getAll

      function

      Returns all the entries that have not expired (per maxRetentionTime). Any expired entries are removed from the queue.

      The getAll function looks like: () => {...}

      • returns

        Promise<QueueEntry[]>

    • popRequest

      function

      Removes and returns the last request in the queue (along with its timestamp and any metadata). The returned object takes the form: {request, timestamp, metadata}.

      The popRequest function looks like: () => {...}

      • returns

        Promise<QueueEntry>

    • pushRequest

      function

      Stores the passed request in IndexedDB (with its timestamp and any metadata) at the end of the queue.

      The pushRequest function looks like: (entry: QueueEntry) => {...}

      • entry

        QueueEntry

      • returns

        Promise<void>

    • registerSync

      function

      Registers a sync event with a tag unique to this instance.

      The registerSync function looks like: () => {...}

      • returns

        Promise<void>

    • replayRequests

      function

      Loops through each request in the queue and attempts to re-fetch it. If any request fails to re-fetch, it's put back in the same position in the queue (which registers a retry for the next sync event).

      The replayRequests function looks like: () => {...}

      • returns

        Promise<void>

    • shiftRequest

      function

      Removes and returns the first request in the queue (along with its timestamp and any metadata). The returned object takes the form: {request, timestamp, metadata}.

      The shiftRequest function looks like: () => {...}

      • returns

        Promise<QueueEntry>

    • size

      function

      Returns the number of entries present in the queue. Note that expired entries (per maxRetentionTime) are also included in this count.

      The size function looks like: () => {...}

      • returns

        Promise<number>

    • unshiftRequest

      function

      Stores the passed request in IndexedDB (with its timestamp and any metadata) at the beginning of the queue.

      The unshiftRequest function looks like: (entry: QueueEntry) => {...}

      • entry

        QueueEntry

      • returns

        Promise<void>

    QueueOptions

    Properties

    • forceSyncFallback

      boolean optional

    • maxRetentionTime

      number optional

    • onSync

      OnSyncCallback optional

    QueueStore

    A class to manage storing requests from a Queue in IndexedDB, indexed by their queue name for easier access.

    Most developers will not need to access this class directly; it is exposed for advanced use cases.

    Properties

    • constructor

      function

      Associates this instance with a Queue instance, so entries added can be identified by their queue name.

      The constructor function looks like: (queueName: string) => {...}

      • queueName

        string

    • deleteEntry

      function

      Deletes the entry for the given ID.

      WARNING: this method does not ensure the deleted entry belongs to this queue (i.e. matches the queueName). But this limitation is acceptable as this class is not publicly exposed. An additional check would make this method slower than it needs to be.

      The deleteEntry function looks like: (id: number) => {...}

      • id

        number

      • returns

        Promise<void>

    • getAll

      function

      Returns all entries in the store matching the queueName.

      The getAll function looks like: () => {...}

      • returns

        Promise<QueueStoreEntry[]>

    • popEntry

      function

      Removes and returns the last entry in the queue matching the queueName.

      The popEntry function looks like: () => {...}

      • returns

        Promise<QueueStoreEntry>

    • pushEntry

      function

      Append an entry last in the queue.

      The pushEntry function looks like: (entry: UnidentifiedQueueStoreEntry) => {...}

      • entry

        UnidentifiedQueueStoreEntry

      • returns

        Promise<void>

    • shiftEntry

      function

      Removes and returns the first entry in the queue matching the queueName.

      The shiftEntry function looks like: () => {...}

      • returns

        Promise<QueueStoreEntry>

    • size

      function

      Returns the number of entries in the store matching the queueName.

      The size function looks like: () => {...}

      • returns

        Promise<number>

    • unshiftEntry

      function

      Prepend an entry first in the queue.

      The unshiftEntry function looks like: (entry: UnidentifiedQueueStoreEntry) => {...}

      • entry

        UnidentifiedQueueStoreEntry

      • returns

        Promise<void>

    StorableRequest

    A class to make it easier to serialize and de-serialize requests so they can be stored in IndexedDB.

    Most developers will not need to access this class directly; it is exposed for advanced use cases.

    Properties

    • constructor

      function

      Accepts an object of request data that can be used to construct a Request but can also be stored in IndexedDB.

      The constructor function looks like: (requestData: RequestData) => {...}

      • requestData

        RequestData

        An object of request data that includes the url plus any relevant properties of [requestInit]https://fetch.spec.whatwg.org/#requestinit.

    • clone

      function

      Creates and returns a deep clone of the instance.

      The clone function looks like: () => {...}

    • toObject

      function

      Returns a deep clone of the instances _requestData object.

      The toObject function looks like: () => {...}

      • returns

        RequestData

    • toRequest

      function

      Converts this instance to a Request.

      The toRequest function looks like: () => {...}

      • returns

        Request

    • fromRequest

      function

      Converts a Request object to a plain object that can be structured cloned or JSON-stringified.

      The fromRequest function looks like: (request: Request) => {...}

      • request

        Request

    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.