çalışma kutusu-arka plan-senkronizasyon

Bir web sunucusuna veri gönderdiğinizde, bazen istekler başarısız olur. Bunun nedeni kullanıcının bağlantısının kesilmesi veya sunucunun kapalı olması olabilir. Her iki durumda da, istekleri daha sonra tekrar göndermeyi denemek isteyebilirsiniz.

Yeni backgroundSync API bu sorun için ideal bir çözümdür. Service Worker bir ağ isteğinin başarısız olduğunu tespit ettiğinde, tarayıcı bağlantının geri döndüğünü düşündüğünde gerçekleşen sync etkinliğini almak için kaydolabilir. Senkronizasyon etkinliğinin, kullanıcı uygulamayı terk etmiş olsa bile yayınlanabileceğini ve bu sayede, başarısız istekleri yeniden denemek için kullanılan geleneksel yöntemden çok daha etkili olduğunu unutmayın.

Workbox Arka Plan Senkronizasyonu, backgroundSync API'nin kullanımını kolaylaştırmak ve diğer Workbox modülleriyle entegrasyonunu kolaylaştırmak için tasarlanmıştır. Ayrıca, henüz BackgroundSync uygulamasını kullanmayan tarayıcılar için de bir yedek stratejisi uygular.

BackgroundSync API'yi destekleyen tarayıcılar, başarısız istekleri tarayıcı tarafından yönetilen bir aralıkta sizin adınıza otomatik olarak tekrar oynatır. Bu durum, muhtemelen tekrar oynatma denemeleri arasında eksponansiyel geri yükleme kullanır. backgroundSync API'yi yerel olarak desteklemeyen tarayıcılarda Workbox Arka Plan Senkronizasyonu, hizmet çalışanınız her başlatıldığında otomatik olarak tekrar oynatmayı dener.

Temel Kullanım

Arka Plan Senkronizasyonu'nu kullanmanın en kolay yolu, başarısız istekleri otomatik olarak sıraya sokacak ve gelecekteki sync etkinlik tetiklendiğinde yeniden deneyecek Plugin'yi kullanmaktır.

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ğırmaya kanca yapar ve fetchDidFail yalnızca büyük olasılıkla bir ağ hatası nedeniyle atılan bir istisna olduğunda çağrılır. Diğer bir deyişle, 4xx veya 5xx hata durumuna sahip bir yanıt alındığında isteklerin yeniden denenmeyeceği anlamına gelir. 5xx durumu gibi sonuç veren tüm istekleri, stratejinize bir fetchDidSucceed eklentisi ekleyerek yeniden denemek isterseniz bu işlemi gerçekleştirebilirsiniz:

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, başarısız istekleri başlatabileceğiniz ve ekleyebileceğiniz bir Queue sınıfı da sağlar. Başarısız istekler IndexedDB'de depolanır ve tarayıcı bağlantının geri yüklendiğini düşündüğünde (senkronizasyon etkinliğini aldığında) yeniden denenir.

Sıra Oluşturma

Çalışma Kutusu Arka Plan Senkronizasyon Sırası oluşturmak için sırayı bir sıra adıyla oluşturmanız gerekir (bu ad, kaynak kaynağınıza özgü olmalıdır):

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

const queue = new Queue('myQueueName');

Sıra adı, genel SyncManager tarafından register() eklenen etiket adının bir parçası olarak kullanılır. IndexedDB veritabanı için Nesne Deposu adı olarak da kullanılır.

Sıraya istek ekleme

Queue örneğinizi oluşturduktan sonra buna başarısız istekler ekleyebilirsiniz. .pushRequest() yöntemini çağırarak başarısız istek eklersiniz. Örneğin, aşağıdaki kod başarısız olan istekleri yakalar ve bunları 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, hizmet çalışanı sync etkinliğini aldığında (tarayıcı bağlantının geri yüklendiğini düşündüğünde gerçekleşir) istek otomatik olarak yeniden denenir. backgroundSync API'yi desteklemeyen tarayıcılar, hizmet çalışanı her başlatıldığında sırayı yeniden dener. Bu, Service Worker'ı kontrol eden sayfanın çalışmasını gerektirdiğinden çok etkili olmayacaktır.

Çalışma Kutusu Arka Plan Senkronizasyonunu Test Etme

Ne yazık ki, backgroundSync'i test etmek çeşitli nedenlerle biraz sezgisel ve zordur.

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 GELİŞTİRİCİLERİ ÇEVRİMDIŞI OLARAK KULLANMAYIN. Geliştirici Araçları'ndaki çevrimdışı onay kutusu, yalnızca sayfadan gelen istekleri etkiler. Service Worker istekleri işleme alınmaya devam eder.
3. Workbox Arka Plan Senkronizasyonu ile sıraya alınması gereken ağ istekleri oluşturun.
   • İsteklerin sıraya alınıp alınmadığını Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests bölümünden kontrol edebilirsiniz
4. Şimdi ağınızı veya web sunucunuzu açın.

5. Chrome DevTools > Application > Service Workers konumuna gidip workbox-background-sync:<your queue name> etiket adını girip burada <your queue name> ayarladığınız sıranın adı olmalıdır ve ardından "Senkronize et" düğmesini tıklayarak erken bir sync etkinliği zorlayın.

   

6. Başarısız istekler için ağ isteklerinin tamamlandığını görürsünüz. İstekler başarıyla yeniden oynatıldığı için IndexedDB verilerinin artık boş olması gerekir.