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:
- Bir sayfa yükleyin ve hizmet çalışanınızı kaydedin.
- 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.
- 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
- İsteklerin sıraya alınıp alınmadığını
- Şimdi ağınızı veya web sunucunuzu açın.
Chrome DevTools > Application > Service Workers
konumuna gidipworkbox-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 birsync
etkinliği zorlayın.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.
Türler
BackgroundSyncPlugin
fetchDidFail
yaşam döngüsü geri çağırmasını uygulayan bir sınıf. Bu, başarısız istekleri bir arka plan senkronizasyon Sırasına eklemeyi kolaylaştırır.
Özellikler
-
oluşturucu
void
constructor
işlevi şu şekilde görünür:(name: string, options?: QueueOptions) => {...}
-
ad
dize
Parametre ayrıntıları için
workbox-background-sync.Queue
belgelerini inceleyin. -
seçenekler
QueueOptions isteğe bağlı
-
returns
-
Queue
Başarısız isteklerin IndexedDB'de depolanmasını yöneten ve bunları daha sonra yeniden deneyen bir sınıf. Depolama ve tekrar oynatma sürecinin tüm bölümleri, geri çağırmalarla gözlemlenebilir.
Özellikler
-
oluşturucu
void
Verilen seçeneklerle bir Sıra örneği oluşturur
constructor
işlevi şu şekilde görünür:(name: string, options?: QueueOptions) => {...}
-
ad
dize
Bu sıranın benzersiz adı. Bu ad, bu örneğe özel olarak IndexedDB'de senkronizasyon etkinliklerini ve depolama isteklerini kaydetmek için kullanıldığı için benzersiz olmalıdır. Yinelenen bir ad algılanırsa hata mesajı verilir.
-
seçenekler
QueueOptions isteğe bağlı
-
returns
-
-
ad
dize
-
getAll
void
Süresi dolan tüm girişleri döndürür (
maxRetentionTime
başına). Süresi dolan tüm girişler sıradan kaldırılır.getAll
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueEntry[]>
-
-
popRequest
void
Sıradaki son isteği (zaman damgası ve tüm meta verilerle birlikte) kaldırıp döndürür. Döndürülen nesne şu biçimde olur:
{request, timestamp, metadata}
.popRequest
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueEntry>
-
-
pushRequest
void
İletilen isteği IndexedDB'de (zaman damgası ve tüm meta verilerle birlikte) sıranın sonunda depolar.
pushRequest
işlevi şu şekilde görünür:(entry: QueueEntry) => {...}
-
giriş
QueueEntry
-
returns
Promise<void>
-
-
registerSync
void
Bu örneğe özgü bir etikete sahip senkronizasyon etkinliği kaydeder.
registerSync
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<void>
-
-
replayRequests
void
Sıradaki her isteği döngüye alır ve isteği yeniden getirmeye çalışır. Herhangi bir istek yeniden getirilemezse, sırada aynı konuma geri yerleştirilir (böylece bir sonraki senkronizasyon etkinliği için bir yeniden deneme kaydedilir).
replayRequests
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<void>
-
-
shiftRequest
void
Sıradaki ilk isteği kaldırır ve döndürür (zaman damgası ve tüm meta verilerle birlikte). Döndürülen nesne şu biçimde olur:
{request, timestamp, metadata}
.shiftRequest
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueEntry>
-
-
beden
void
Sırada bulunan giriş sayısını döndürür. Süresi dolan girişlerin de (
maxRetentionTime
başına) bu sayıya dahil edildiğini unutmayın.size
işlevi şu şekilde görünür:() => {...}
-
returns
Vaat<sayı>
-
-
unshiftRequest
void
İletilen isteği IndexedDB'de (zaman damgası ve tüm meta verilerle birlikte) sıranın başında depolar.
unshiftRequest
işlevi şu şekilde görünür:(entry: QueueEntry) => {...}
-
giriş
QueueEntry
-
returns
Promise<void>
-
QueueOptions
Özellikler
-
forceSyncFallback
boole isteğe bağlı
-
maxRetentionTime
numara isteğe bağlı
-
onSync
OnSyncCallback isteğe bağlı
QueueStore
Daha kolay erişim için IndexedDB'de bir Sıradan gelen ve sıra adına göre dizine eklenen depolama isteklerini yönetmeye yönelik bir sınıf.
Çoğu geliştiricinin bu sınıfa doğrudan erişmesi gerekmez. Sınıf ileri seviye kullanım alanlarına açıktır.
Özellikler
-
oluşturucu
void
Bu örneği bir Queue örneğiyle ilişkilendirir. Böylece eklenen girişler, sıra adlarıyla tanımlanabilir.
constructor
işlevi şu şekilde görünür:(queueName: string) => {...}
-
queueName
dize
-
returns
-
-
deleteEntry
void
Belirtilen kimlik için girişi siler.
UYARI: Bu yöntem, silinen girişin bu sıraya ait olmasını (ör.
queueName
ile eşleşir) garanti etmez. Ancak bu sınıf herkese açık bir şekilde gösterilmediği için bu sınırlama kabul edilebilir. Ek bir kontrol, bu yöntemi olması gerekenden daha yavaş hale getirir.deleteEntry
işlevi şu şekilde görünür:(id: number) => {...}
-
id
sayı
-
returns
Promise<void>
-
-
getAll
void
Mağazada
queueName
ile eşleşen tüm girişleri döndürür.getAll
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueStoreEntry[]>
-
-
popEntry
void
Sıradaki,
queueName
ile eşleşen son girişi kaldırır ve döndürür.popEntry
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueStoreEntry>
-
-
pushEntry
void
Sırada en sonuncuya bir giriş ekleyin.
pushEntry
işlevi şu şekilde görünür:(entry: UnidentifiedQueueStoreEntry) => {...}
-
giriş
UnidentifiedQueueStoreEntry
-
returns
Promise<void>
-
-
shiftEntry
void
Sıradaki,
queueName
ile eşleşen ilk girişi kaldırır ve döndürür.shiftEntry
işlevi şu şekilde görünür:() => {...}
-
returns
Promise<QueueStoreEntry>
-
-
beden
void
Mağazada
queueName
ile eşleşen girişlerin sayısını döndürür.size
işlevi şu şekilde görünür:() => {...}
-
returns
Vaat<sayı>
-
-
unshiftEntry
void
Sıradakinin başına bir giriş ekleyin.
unshiftEntry
işlevi şu şekilde görünür:(entry: UnidentifiedQueueStoreEntry) => {...}
-
giriş
UnidentifiedQueueStoreEntry
-
returns
Promise<void>
-
StorableRequest
IndexedDB'de depolanabilmesi için istekleri serileştirmeyi ve seri durumdan çıkarmayı kolaylaştıran bir sınıf.
Çoğu geliştiricinin bu sınıfa doğrudan erişmesi gerekmez. Sınıf ileri seviye kullanım alanlarına açıktır.
Özellikler
-
oluşturucu
void
Request
oluşturmak için kullanılabilecek ancak IndexedDB'de depolanabilen bir istek verisi nesnesini kabul eder.constructor
işlevi şu şekilde görünür:(requestData: RequestData) => {...}
-
requestData
RequestData
url
öğesini ve [requestInit]https://fetch.spec.whatwg.org/#requestinit
öğesinin ilgili özelliklerini içeren bir istek verisi nesnesi.
-
returns
-
-
clone
void
Örneğin derin bir klonunu oluşturur ve döndürür.
clone
işlevi şu şekilde görünür:() => {...}
-
returns
-
-
toObject
void
Örnek
_requestData
nesnesinin derin klonunu döndürür.toObject
işlevi şu şekilde görünür:() => {...}
-
returns
RequestData
-
-
toRequest
void
Bu örneği bir İstek'e dönüştürür.
toRequest
işlevi şu şekilde görünür:() => {...}
-
returns
İstek
-
-
fromRequest
void
Bir İstek nesnesini, yapılandırılmış klonlanmış veya JSON dizeli olabilen düz bir nesneye dönüştürür.
fromRequest
işlevi şu şekilde görünür:(request: Request) => {...}
-
istek
İstek
-
returns
Promise<StorableRequest>
-