casella di lavoro-sincronizzazione-in background

Quando invii dati a un server web, a volte le richieste non vanno a buon fine. Il motivo potrebbe essere che l'utente ha perso la connettività o che il server non è attivo; in entrambi i casi, potresti voler provare a inviare di nuovo le richieste in un secondo momento.

La nuova API BackgroundSync rappresenta la soluzione ideale a questo problema. Quando un service worker rileva che una richiesta di rete non è andata a buon fine, può registrarsi per ricevere un evento sync, che viene consegnato quando il browser ritiene che sia tornata la connettività. Tieni presente che l'evento di sincronizzazione può essere pubblicato anche se l'utente ha abbandonato l'applicazione, il che significa che è molto più efficace rispetto al metodo tradizionale di ritentare le richieste non riuscite.

La sincronizzazione in background di Workbox è progettata per semplificare l'utilizzo dell'API BackgroundSync e integrarne l'utilizzo con altri moduli di Workbox. Implementa inoltre una strategia di riserva per i browser che non implementano ancora BackgroundSync.

I browser che supportano l'API BackgroundSync riprodurranno automaticamente le richieste non riuscite per tuo conto a un intervallo gestito dal browser, probabilmente utilizzando il backoff esponenziale tra i tentativi di riproduzione. Nei browser che non supportano in modo nativo l'API BackgroundSync, Workbox Background Sync proverà automaticamente a ripetere la riproduzione ogni volta che viene avviato il service worker.

Utilizzo di base

Il modo più semplice di utilizzare la sincronizzazione in background è utilizzare Plugin, che accoda automaticamente le richieste non riuscite e le riprova quando vengono attivati futuri eventi sync.

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin si aggancia al callback del plug-in fetchDidFail e fetchDidFail viene richiamato solo se viene generata un'eccezione, molto probabilmente a causa di un errore di rete. Ciò significa che le richieste non verranno ritentate se viene ricevuta una risposta con uno stato di errore 4xx o 5xx. Se vuoi riprovare tutte le richieste che risultano, ad esempio, uno stato 5xx, puoi farlo aggiungendo un plug-in fetchDidSucceed alla tua strategia:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

Utilizzo avanzato

La sincronizzazione in background della casella di lavoro fornisce anche un corso Queue, che puoi instaurare e aggiungere le richieste non riuscite. Le richieste non riuscite vengono archiviate in IndexedDB e vengono tentate di nuovo quando il browser ritiene che la connettività sia ripristinata, ovvero quando riceve l'evento di sincronizzazione.

Creazione di una coda

Per creare una coda di sincronizzazione in background della casella di lavoro, devi crearla con un nome coda (che deve essere univoco per la tua origine):

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

Il nome della coda viene utilizzato come parte del nome del tag che viene register() assegnato dal SyncManager globale. Viene utilizzato anche come nome dell'archivio oggetti per il database IndexedDB.

Aggiunta di una richiesta alla coda

Dopo aver creato l'istanza Queue, puoi aggiungere richieste non riuscite. Per aggiungere una richiesta non riuscita, richiama il metodo .pushRequest(). Ad esempio, il seguente codice rileva tutte le richieste non riuscite e le aggiunge alla coda:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

Una volta aggiunta alla coda, la richiesta viene tentata automaticamente quando il service worker riceve l'evento sync (cosa che si verifica quando il browser ritiene che la connettività sia ripristinata). I browser che non supportano l'API BackgroundSync ritenteranno la coda a ogni avvio del service worker. Ciò richiede l'esecuzione della pagina che controlla il service worker, quindi non sarà molto efficace.

Test della sincronizzazione in background della casella di lavoro

Sfortunatamente, testare BackgroundSync è un po' poco intuitivo e difficile per una serie di motivi.

L'approccio migliore per testare la tua implementazione è:

1. Carica una pagina e registra il tuo service worker.
2. Disattiva la rete del computer o il server web.
   • NON UTILIZZARE CHROME DEVTOOLS OFFLINE. La casella di controllo offline in DevTools interessa solo le richieste dalla pagina. Le richieste dei service worker continuano ad andare a buon fine.
3. Effettua le richieste di rete da mettere in coda con la sincronizzazione in background della casella di lavoro.
   • Puoi verificare che le richieste siano state in coda cercando in Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Ora attiva la rete o il server web.

5. Per forzare un evento sync in anteprima, vai a Chrome DevTools > Application > Service Workers, inserisci il nome tag di workbox-background-sync:<your queue name>, dove <your queue name> dovrebbe essere il nome della coda impostata, quindi fai clic sul pulsante "Sincronizza".

   

6. Dovresti vedere che le richieste di rete vengono completate per le richieste non riuscite. Ora i dati IndexedDB dovrebbero essere vuoti perché le richieste sono state riprodotte correttamente.