Tekrar internete bağlandığında istekleri yeniden deneme

Bir web sunucusundan istekte bulunduğunuzda hata oluşabilir. Bunun nedeni, kullanıcının bağlantısının kesilmiş olması veya uzak sunucunun çalışmaması olabilir.

Bu dokümanda, çoğunlukla hizmet çalışanında GET isteklerinin ele alınmasına odaklanılmış olsa da POST, PUT veya DELETE gibi başka yöntemler de devreye girebilir. Bu yöntemler genellikle bir web uygulaması için veri sağlamak üzere arka uç API'leriyle iletişim kurmak için kullanılır. Bu istekler, Service Worker olmadığında başarısız olduğunda, kullanıcı tarafından tekrar çevrimiçi olduğunda manuel olarak yeniden denenmesi gerekir. Bu, kullanıcıların yapmayı her zaman hatırlayabileceği bir şey değildir.

Bu durum, uygulamanız için geçerliyse (ve bir hizmet çalışanı da dahilse) kullanıcı tekrar internete bağlandığında başarısız istekleri göndermeyi yeniden denemek isteyebilirsiniz. backgroundSync API bu sorun için bir çözüm sunar. Bir hizmet çalışanı başarısız bir ağ isteği algıladığında, tarayıcı bağlantının geri döndüğünü algıladığında sync etkinliği almak için kaydolabilir. sync etkinliği, kullanıcı etkinliği kaydeden sayfadan uzaklaşmış olsa bile yayınlanabilir. Bu da, başarısız istekleri yeniden denemek için kullanılan diğer yöntemlere göre daha etkilidir.

Workbox, bu API'yi workbox-background-sync modülü ile soyutlar. Bu modül, backgroundSync API'nin diğer Workbox modülleriyle kullanımını kolaylaştırır. Ayrıca, henüz backgroundSync'i desteklemeyen tarayıcılar için bir yedek stratejisi de uygular.

Temel kullanım

BackgroundSyncPlugin, workbox-background-sync modülünden dışa aktarılır. Hatalı istekleri sıraya koymak ve gelecekteki sync etkinlikleri tetiklendiğinde yeniden denemek için kullanılabilir:

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]
  }),
  // An optional third parameter specifies the request method
  'POST'
);

Burada BackgroundSyncPlugin, JSON verilerini alan bir API rotası ile eşleşen POST isteklerine uygulanan bir rotaya uygulanır. Kullanıcı çevrimdışıysa BackgroundSyncPlugin, kullanıcı tekrar çevrimiçi olduğunda isteği yeniden dener (ancak en fazla 1 gün boyunca bu işlemi tekrarlamaz).

İleri düzey kullanım

workbox-background-sync, başarısız istekleri örneklendirebileceğiniz ve ekleyebileceğiniz bir Queue sınıfı da sağlar. BackgroundSyncPlugin özelliğinde de olduğu gibi, başarısız istekler IndexedDB'de depolanır ve tarayıcı bağlantının geri yüklendiğini düşündüğünde denenir.

Sıra oluşturma

Sıra oluşturmak için sıra adını temsil eden bir dizeyle Queue nesnesini örneklendirin:

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

const queue = new Queue('myQueueName');

Sıra adı, genel SyncManager tarafından sağlanan register() yöntemi tarafından oluşturulan etiket adının bir parçası olarak kullanılır. Ayrıca, IndexedDB veritabanı tarafından sağlanan Object Store için de kullanılan addır.

İstekler sıraya ekleniyor

Queue örneğini oluşturduktan sonra pushRequest() yöntemini kullanarak örneğe başarısız istekler ekleyebilirsiniz:

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, tarayıcı ağın tekrar kullanılabilir olduğunu düşündüğü için hizmet çalışanı sync etkinliğini aldığında istekler otomatik olarak yeniden dener. Arka Plan Senkronizasyonu API'sini desteklemeyen tarayıcılar, hizmet çalışanı her başlatıldığında isteği yeniden dener. Bu, başarısız bir isteği yeniden denemek için daha az etkili bir yol olsa da bir yedeğin yerine geçer.

workbox-background-sync test ediliyor

Arka Plan Senkronizasyonu davranışını test etmek zor olabilir, ancak bu işlem Chrome Geliştirici Araçları'nda yapılabilir. Şu an için en iyi yaklaşım şöyle olabilir:

1. Hizmet çalışanınızı kaydeden bir sayfa yükleyin.
2. Bilgisayarınızın ağ bağlantısını veya web sunucunuzu kapatın. Chrome Geliştirici Araçları'ndaki çevrimdışı açma/kapatma düğmesini kullanmayın. Çevrimdışı onay kutusu yalnızca sayfadan gelen istekleri etkiler ancak Service Worker'ların istekleri gerçekleşmeye devam eder.
3. workbox-background-sync ile sıraya alınması gereken ağ istekleri oluşturun. Sıraya alınan istekleri Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests bölümünden kontrol edebilirsiniz.
4. Şimdi ağ bağlantısını yeniden yükleyin veya web sunucunuzu tekrar açın.
5. Chrome DevTools > Application > Service Workers adresine giderek erken bir sync etkinliğini zorunlu kılın. workbox-background-sync:<your queue name> etiket adını girin. Burada <your queue name>, ayarladığınız sıranın adıdır.
6. "Senkronize et" düğmesini tıklayın.
   
7. Daha önce başarısız olan ağ isteklerinin yeniden denendiğini ve işleme alındığını görebilirsiniz. Sonuç olarak, istekler başarıyla yeniden oynatıldığı için IndexedDB deposu boş olmalıdır.

Sonuç

Başarısız ağ isteklerini yeniden denemek için workbox-background-sync kullanmak, kullanıcı deneyimini ve uygulamanızın güvenilirliğini iyileştirmek için harika bir yöntem olabilir. Örneğin, kullanıcıların başarısız API isteklerini yeniden göndermelerine izin vererek API'nize göndermek istedikleri verileri kaybetmemelerini sağlayabilirsiniz. Ayrıca, analizler gibi verilerinizdeki boşlukları doldurmak için de kullanılabilir. workbox-google-analytics modülü, Google Analytics'e veri göndermeye yönelik başarısız istekleri yeniden denemek için arka planda workbox-background-sync kullanır.

Kullanım alanınız ne olursa olsun, workbox-background-sync bu tür görevleri basitleştirerek geliştirici deneyiminizi iyileştirir ve web uygulamanızın kullanıcı deneyimini ve işlevselliğini iyileştirmeniz için size daha fazla fırsat sunar.