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:
- Hizmet çalışanınızı kaydeden bir sayfa yükleyin.
- 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.
workbox-background-sync
ile sıraya alınması gereken ağ istekleri oluşturun. Sıraya alınan istekleriChrome DevTools > Application > IndexedDB > workbox-background-sync > requests
bölümünden kontrol edebilirsiniz.- Şimdi ağ bağlantısını yeniden yükleyin veya web sunucunuzu tekrar açın.
Chrome DevTools > Application > Service Workers
adresine giderek erken birsync
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.- "Senkronize et" düğmesini tıklayın.
- 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.