çalışma kutusu-arka plan-senkronizasyon

Bir web sunucusuna veri gönderdiğinizde bazen istekler başarısız olur. Google bunun nedeni kullanıcının bağlantısını kesmesi veya sunucu çalışmıyor; her iki durumda da isteklerinizi sık sık göndermeyi daha sonra tekrar deneyin.

Yeni BackgroundSync API bu sorun için ideal bir çözümdür. Bir hizmet çalışanı, ağ isteği başarısız olduysa sync etkinliği almak için kaydolabilir, Tarayıcı, bağlantının geri geldiğini düşündüğünde teslim edilir. Senkronizasyon etkinliğinin, kullanıcı geleneksel yöntemden çok daha etkili olmasını sağlayan yeniden deneniyor.

Workbox Arka Plan Senkronizasyonu, arka plan senkronizasyonu gibi backgroundSync API'sini etkinleştirmenize ve kullanımını diğer Workbox modülleriyle entegre etmenize olanak tanır. Google Ayrıca, BackgroundSync.

backgroundSync API'sini destekleyen tarayıcılar başarısız olanları otomatik olarak tekrar oynatır sizin adınıza talep edebileceği tarayıcı tarafından yönetilen aralık, arasında eksponansiyel geri yükleme olduğunu görebilirsiniz. Şu tarayıcılarda BackgroundSync API'yi yerel olarak desteklemediğinden, Workbox Arka Plan Senkronizasyonu Service Worker her başlatıldığında otomatik olarak tekrar oynatmayı dener.

Temel Kullanım

Arka Plan Senkronizasyonu'nu kullanmanın en kolay yolu,Plugin Başarısız istekleri otomatik olarak sıraya koyun ve sonraki sync tarihinde tekrar deneyin tetiklendiği anlamına gelir.

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 fetchDidFail eklentisi geri çağırması ve fetchDidFail yalnızca büyük olasılıkla neden olabilir. Bu durumda, bir istek olması durumunda istekler yeniden alınan yanıt 4xx veya 5xx hata durumu. 5xx durumuyla sonuçlanan tüm istekleri yeniden denemek isterseniz bu işlemleri fetchDidSucceed eklentisi ekleyerek ekleyin:

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.

Gelişmiş Kullanım

Workbox Arka Plan Senkronizasyonu ayrıca bir Queue sınıfı da sağlar. Bunu başarısız istekleri örneklendirmek ve eklemek için kullanılır. Başarısız istekler depolanır IndexedDB dizininde ve tarayıcı, bağlantının geri yüklendiğini algıladığında (ör. .

Sıra Oluşturma

Workbox Arka Plan Senkronizasyon Sırası oluşturmak için, (benzersiz olmalıdır) kaynak):

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

const queue = new Queue('myQueueName');

Sıra adı, girilen etiket adının bir parçası olarak register() sürüm tüm dünyadan SyncManager. İnsanların olarak da kullanılır Nesne Deposu adı: IndexedDB veritabanını kullanıyor.

Sıraya istek ekleme

Queue örneğinizi oluşturduktan sonra, başarısız istekleri bu örneğe ekleyebilirsiniz. Başarısız isteği, .pushRequest() yöntemini çağırarak eklersiniz. Örneğin, Aşağıdaki kod, başarısız olan istekleri yakalar ve sıraya ekler:

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

Sıraya eklendikten sonra, istek otomatik olarak yeniden denenir. hizmet çalışanı, sync etkinliğini alır (bu etkinlik, tarayıcı bağlantının yeniden kurulduğunu düşünüyor). Şunu desteklemeyen tarayıcılar: BackgroundSync API, hizmet çalışanı her çalıştığında sırayı yeniden dener. yardımcı olabilir. Bu, hizmet çalışanını kontrol eden sayfanın o yüzden o kadar etkili olmayacaktır.

Çalışma Kutusu Arka Plan Senkronizasyonunu Test Etme

Ne yazık ki, Arka Plan Sync'i test etmek biraz pratiksiz ve zor. çeşitli nedenlerle kullanır.

Uygulamanızı test etmek için en iyi yaklaşım aşağıdakileri yapmaktır:

1. Bir sayfa yükleyin ve hizmet çalışanınızı kaydedin.
2. Bilgisayarınızın ağını veya web sunucunuzu kapatın.
   • CHROME DEVTOOLS'U ÇEVRİMDIŞI KULLANMAYIN. Çevrimdışı onay kutusu Geliştirici Araçları yalnızca sayfadaki istekleri etkiler. Hizmet çalışanı istekleri devam eder.
3. Çalışma Kutusu Arka Plan Senkronizasyonu ile sıraya eklenmesi gereken ağ isteklerinde bulunun.
   • İsteklerin sıraya alınıp alınmadığını incelemek için Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests.
4. Şimdi ağınızı veya web sunucunuzu etkinleştirin.

5. Şu adrese giderek erken sync etkinliklerini zorunlu kılın Chrome DevTools > Application > Service Workers, <your queue name> olması gereken yerde workbox-background-sync:<your queue name> sıra adını tıklayın ve daha sonra 'Senkronize Et'i tıklayarak düğmesini tıklayın.

   

6. Ağ isteklerinin başarısız isteklerle işlendiğini ve İstekler sonlandırıldığı için IndexedDB verileri artık boş başarıyla tekrar oynatıldı.