werkbox-achtergrondsynchronisatie

Wanneer u gegevens naar een webserver verzendt, mislukken de verzoeken soms. Het kan zijn omdat de gebruiker de connectiviteit heeft verloren, of omdat de server niet beschikbaar is; in beide gevallen wilt u vaak proberen de verzoeken later opnieuw te verzenden.

De nieuwe BackgroundSync API is een ideale oplossing voor dit probleem. Wanneer een servicemedewerker detecteert dat een netwerkverzoek is mislukt, kan deze zich registreren voor het ontvangen van een sync , die wordt afgeleverd wanneer de browser denkt dat de connectiviteit is hersteld. Houd er rekening mee dat de synchronisatiegebeurtenis zelfs kan worden afgeleverd als de gebruiker de applicatie heeft verlaten , waardoor deze veel effectiever is dan de traditionele methode voor het opnieuw proberen van mislukte verzoeken.

Workbox Background Sync is ontworpen om het gebruik van de BackgroundSync API eenvoudiger te maken en het gebruik ervan met andere Workbox-modules te integreren. Het implementeert ook een fallback-strategie voor browsers die BackgroundSync nog niet implementeren.

Browsers die de BackgroundSync API ondersteunen, zullen mislukte verzoeken automatisch namens u opnieuw afspelen met een interval dat wordt beheerd door de browser , waarbij waarschijnlijk gebruik wordt gemaakt van exponentiële vertraging tussen herhalingspogingen. In browsers die de BackgroundSync API niet standaard ondersteunen, probeert Workbox Background Sync automatisch opnieuw af te spelen wanneer uw servicemedewerker opstart.

Basisgebruik

De eenvoudigste manier om Achtergrondsynchronisatie te gebruiken is door de Plugin te gebruiken die automatisch mislukte verzoeken in de wachtrij zet en deze opnieuw probeert wanneer toekomstige sync worden geactiveerd.

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 haakt in op de fetchDidFail plug-in callback en fetchDidFail wordt alleen aangeroepen als er een uitzondering optreedt, hoogstwaarschijnlijk als gevolg van een netwerkfout. Dit betekent dat verzoeken niet opnieuw worden geprobeerd als er een antwoord wordt ontvangen met de foutstatus 4xx of 5xx . Als u alle verzoeken die resulteren in bijvoorbeeld een 5xx status opnieuw wilt proberen, kunt u dit doen door een fetchDidSucceed -plug-in aan uw strategie toe te voegen :

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.

Geavanceerd gebruik

Workbox Background Sync biedt ook een klasse Queue , waaraan u mislukte verzoeken kunt instantiëren en eraan kunt toevoegen. De mislukte verzoeken worden opgeslagen in IndexedDB en opnieuw geprobeerd wanneer de browser denkt dat de connectiviteit is hersteld (dwz wanneer deze de synchronisatiegebeurtenis ontvangt).

Een wachtrij maken

Om een ​​Workbox Background Sync Queue te maken, moet u deze construeren met een wachtrijnaam (die uniek moet zijn voor uw oorsprong ):

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

const queue = new Queue('myQueueName');

De wachtrijnaam wordt gebruikt als onderdeel van de tagnaam die register() -ed krijgt door de globale SyncManager . Het wordt ook gebruikt als de Object Store- naam voor de IndexedDB-database.

Een verzoek aan de wachtrij toevoegen

Nadat u uw Queue-instantie heeft gemaakt, kunt u er mislukte verzoeken aan toevoegen. U voegt een mislukt verzoek toe door de methode .pushRequest() aan te roepen. De volgende code vangt bijvoorbeeld alle aanvragen op die mislukken en voegt deze toe aan de wachtrij:

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());
});

Zodra het verzoek aan de wachtrij is toegevoegd, wordt het automatisch opnieuw geprobeerd wanneer de servicemedewerker de sync ontvangt (wat gebeurt wanneer de browser denkt dat de connectiviteit is hersteld). Browsers die de BackgroundSync API niet ondersteunen, zullen de wachtrij telkens opnieuw proberen wanneer de servicemedewerker wordt opgestart. Hiervoor moet de pagina die de servicemedewerker bestuurt actief zijn, dus het zal niet zo effectief zijn.

Workbox-achtergrondsynchronisatie testen

Helaas is het testen van BackgroundSync om een ​​aantal redenen enigszins onintuïtief en moeilijk.

De beste aanpak om uw implementatie te testen is door het volgende te doen:

1. Laad een pagina en registreer uw servicemedewerker.
2. Schakel het netwerk van uw computer uit of schakel uw webserver uit.
   • GEBRUIK CHROME DEVTOOLS NIET OFFLINE. Het offline selectievakje in DevTools heeft alleen invloed op verzoeken van de pagina. Verzoeken van servicemedewerkers blijven binnenkomen.
3. Maak netwerkverzoeken die in de wachtrij moeten worden geplaatst met Workbox Background Sync.
   • U kunt controleren of de verzoeken in de wachtrij zijn geplaatst door te kijken in Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests
4. Schakel nu uw netwerk- of webserver in.

5. Forceer een vroege sync door naar Chrome DevTools > Application > Service Workers te gaan, de tagnaam van workbox-background-sync:<your queue name> in te voeren, waarbij <your queue name> de naam moet zijn van de wachtrij die u hebt ingesteld, en vervolgens door op de knop 'Synchroniseren' te klikken.

   

6. U zou netwerkverzoeken moeten zien doorgaan voor de mislukte verzoeken en de IndexedDB-gegevens zouden nu leeg moeten zijn omdat de verzoeken met succes opnieuw zijn afgespeeld.