Uygulamaya benzer bir deneyim için web uygulamanızın verilerini arka planda senkronize etme
Aşağıdaki durumlardan herhangi birini yaşadınız mı?
- Bağlantısı zayıf veya hiç olmayan bir trende ya da metroda seyahat ederken
- Çok fazla video izledikten sonra operatörünüz tarafından bağlantınız sınırlandırıldıysa
- Bant genişliğinin talebi karşılamakta zorlandığı bir ülkede yaşıyor olmak
Bu durumda, web'de belirli şeyleri yapmanın can sıkıcı olduğunu ve platforma özel uygulamaların bu senaryolarda neden genellikle daha iyi performans gösterdiğini merak etmişsinizdir. Platforma özgü uygulamalar, haber makaleleri veya hava durumu bilgileri gibi yeni içerikleri önceden getirebilir. Metroda internet bağlantısı olmasa bile haberleri okuyabilirsiniz.
Periyodik Arka Plan Senkronizasyonu, web uygulamalarının arka planda verileri düzenli olarak senkronize etmesini sağlar. Böylece web uygulamaları, platforma özgü bir uygulamanın davranışına daha yakın hale gelir.
Dene
Periyodik arka plan senkronizasyonunu canlı demo uygulamasıyla deneyebilirsiniz. Kullanmadan önce aşağıdakilerden emin olun:
- Chrome 80 veya sonraki bir sürümü kullanıyorsunuz.
- Düzenli arka plan senkronizasyonunu etkinleştirmeden önce web uygulamasını yüklemeniz gerekir.
Kavramlar ve kullanım
Periyodik arka plan senkronizasyonu, progresif web uygulaması veya hizmet çalışanı destekli bir sayfa kullanıma sunulduğunda yeni içerik göstermenize olanak tanır. Bunu, uygulama veya sayfa kullanılmadığında arka planda veri indirerek yapar. Bu sayede, uygulamanın içeriği başlatıldıktan sonra görüntülenirken yenilenmez. Daha da iyisi, uygulamanın yenilemeden önce içerik döndürücü göstermesini engeller.
Düzenli arka plan senkronizasyonu olmadan web uygulamalarının veri indirmek için alternatif yöntemler kullanması gerekir. Sık karşılaşılan bir örnek, bir hizmet çalışanını uyandırmak için push bildirimi kullanmaktır. Kullanıcı, "yeni veriler kullanılabilir" gibi bir mesajla kesintiye uğrar. Verilerin güncellenmesi aslında bir yan etkidir. Önemli güncellemeler (ör. önemli son dakika haberleri) için push bildirimlerini kullanmaya devam edebilirsiniz.
Periyodik arka plan senkronizasyonu, arka plan senkronizasyonu ile kolayca karıştırılabilir. Benzer adlara sahip olsalar da kullanım alanları farklıdır. Diğer özelliklerin yanı sıra, arka plan senkronizasyonu en yaygın olarak önceki istek başarısız olduğunda sunucuya veri göndermek için kullanılır.
Kullanıcı etkileşimini doğru şekilde elde etme
Yanlış şekilde yapılan düzenli arka plan senkronizasyonu, kullanıcı kaynaklarının israf edilmesine neden olabilir. Chrome, bu özelliği kullanıma sunmadan önce doğru olduğundan emin olmak için deneme süresi uyguladı. Bu bölümde, Chrome'un bu özelliği olabildiğince yararlı hale getirmek için aldığı bazı tasarım kararları açıklanmaktadır.
Chrome'un aldığı ilk tasarım kararı, bir web uygulamasının düzenli arka plan senkronizasyonunu yalnızca kişi bu uygulamayı cihazına yükledikten ve ayrı bir uygulama olarak kullanıma sunduktan sonra kullanabileceği yönündeydi. Periyodik arka plan senkronizasyonu, Chrome'daki normal sekme bağlamında kullanılamaz.
Ayrıca Chrome, kullanılmayan veya nadiren kullanılan web uygulamalarının gereksiz bir şekilde pili veya veri tüketmesini istemediğinden, Chrome düzenli aralıklarla arka plan senkronizasyonu tasarlamıştır.
Bu nedenle Chrome, geliştiricilerin kullanıcılarına değer sunarak bunları kazanmalarını gerektirecek düzenli aralıklarla arka plan senkronizasyonu tasarladı. Daha açık belirtmek gerekirse Chrome, belirli bir web uygulaması için düzenli arka plan senkronizasyonlarının gerçekleşip gerçekleşemeyeceğini ve gerçekleşirse ne sıklıkta gerçekleşeceğini belirlemek üzere bir site etkileşim puanı (about://site-engagement/) kullanır. Diğer bir deyişle, etkileşim puanı sıfırdan büyük olmadığı sürece periodicsync etkinliği hiç tetiklenmez ve bu etkinliğin tetiklenme sıklığı, değerine bağlıdır.periodicsync Bu, arka planda senkronize edilen uygulamaların yalnızca sizin etkin
olduğunuz uygulamalar olmasını sağlar.
Periyodik arka plan senkronizasyonu, popüler platformlardaki mevcut API'ler ve uygulamalarla bazı benzerliklere sahiptir. Örneğin, tek seferlik arka plan senkronizasyonu ve push bildirimleri, kullanıcı sayfayı kapattıktan sonra web uygulamasının mantığının (hizmet çalışanı aracılığıyla) biraz daha uzun süre çalışmasına olanak tanır. Çoğu platformda, kullanıcıların kritik güncellemeler, içeriğin önceden yüklenmesi, verilerin senkronize edilmesi vb. için daha iyi bir kullanıcı deneyimi sağlamak amacıyla arka planda düzenli olarak ağa erişen uygulamalar yüklü olması yaygın bir durumdur. Benzer şekilde, düzenli arka plan senkronizasyonu da bir web uygulamasının mantığının yaşam süresini uzatır. Böylece, mantık düzenli aralıklarla (bir seferde birkaç dakika) çalışabilir.
Tarayıcı bunun sık ve kısıtlama olmadan gerçekleşmesine izin veriyorsa gizlilikle ilgili bazı endişeler oluşabilir. Chrome'un düzenli arka plan senkronizasyonu riskini nasıl ele aldığı aşağıda açıklanmıştır:
- Arka plan senkronizasyonu etkinliği yalnızca cihazın daha önce bağlandığı bir ağda gerçekleşir. Chrome, yalnızca güvenilir tarafların işlettiği ağlara bağlanmanızı önerir.
- Tüm internet iletişimlerinde olduğu gibi, düzenli arka plan senkronizasyonu istemcinin IP adreslerini, konuştuğu sunucunun ve adını gösterir. Bu etkiyi, uygulama yalnızca ön plandayken senkronize ediliyorsa yaklaşık olarak ne kadar olacağına indirgemek için tarayıcı, uygulamanın arka plan senkronizasyonlarının sıklığını kullanıcının uygulamayı kullanma sıklığına göre sınırlandırır. Kullanıcı uygulamayla sık sık etkileşim kurmayı bırakırsa düzenli arka plan senkronizasyonu tetiklenmeyi durdurur. Bu, platforma özel uygulamalardaki mevcut duruma kıyasla net bir iyileştirmedir.
Ne zaman kullanılabilir?
Kullanım kuralları tarayıcıya göre değişir. Yukarıdakileri özetlemek gerekirse Chrome, periyodik arka plan senkronizasyonu için aşağıdaki koşulları uygular:
- Belirli bir kullanıcı etkileşimi puanı.
- Daha önce kullanılmış bir ağın varlığı.
Senkronizasyonların zamanlaması geliştiriciler tarafından kontrol edilmez. Senkronizasyon sıklığı, uygulamanın ne sıklıkta kullanıldığına göre belirlenir. (Platforma özgü uygulamaların şu anda bu işlemi yapmadığını unutmayın.) Ayrıca cihazın güç ve bağlantı durumu da dikkate alınır.
Ne zaman kullanılmalıdır?
Hizmet çalışanınız bir periodicsync etkinliğini işlemek için etkinleştirildiğinde veri isteme fırsatı elde edersiniz ancak bunu yapma yükümlülüğü yoktur. Etkinliği işlerken ağ koşullarını ve kullanılabilir depolama alanını dikkate almalı ve yanıt olarak farklı miktarlarda veri indirmelisiniz. Aşağıdaki kaynakları kullanabilirsiniz:
İzinler
Hizmet çalışanı yüklendikten sonra periodic-background-sync için sorgu yapmak üzere İzinler API'sini kullanın. Bunu bir pencereden veya hizmet çalışanı bağlamından yapabilirsiniz.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Periyodik senkronizasyon kaydetme
Daha önce de belirtildiği gibi, düzenli arka plan senkronizasyonu için bir hizmet çalışanı gerekir. ServiceWorkerRegistration.periodicSync kullanarak bir PeriodicSyncManager alın ve register()'yi arayın. Kayıt için hem bir etiket hem de minimum bir senkronizasyon aralığı (minInterval) gerekir. Etiket, birden fazla senkronizasyonun kaydedilebilmesi için kayıtlı senkronizasyonu tanımlar. Aşağıdaki örnekte etiket adı 'content-sync', minInterval ise bir gündür.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Kaydı doğrulama
Kayıt etiketleri dizisini almak için periodicSync.getTags() komutunu çağırın. Aşağıdaki örnekte, tekrar güncellemeyi önlemek için önbelleğin güncellenmesinin etkin olduğunu onaylamak amacıyla etiket adları kullanılmaktadır.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Ayrıca, kullanıcıların belirli güncelleme türlerini etkinleştirebilmesi veya devre dışı bırakabilmesi için web uygulamanızın ayarlar sayfasında etkin kayıtların listesini göstermek üzere getTags()'ü kullanabilirsiniz.
Periyodik arka plan senkronizasyonu etkinliğine yanıt verme
Periyodik arka plan senkronizasyonu etkinliğine yanıt vermek için hizmet işleyicinize bir periodicsync etkinlik işleyicisi ekleyin. Ona iletilen event nesnesi, kayıt sırasında kullanılan değerle eşleşen bir tag parametresi içerir. Örneğin, 'content-sync' adıyla düzenli arka plan senkronizasyonu kaydedilmişse event.tag, 'content-sync' olur.
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Senkronizasyon kaydını iptal etme
Kayıtlı bir senkronizasyonu sonlandırmak için, kaydını iptal etmek istediğiniz senkronizasyonun adını belirterek periodicSync.unregister()'ü arayın.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Arayüzler
Periodic Background Sync API tarafından sağlanan arayüzlerin kısa bir özetini aşağıda bulabilirsiniz.
PeriodicSyncEvent. Tarayıcı tarafından seçilen bir zamandaServiceWorkerGlobalScope.onperiodicsyncetkinlik işleyicisine iletilir.PeriodicSyncManager. Periyodik senkronizasyonları kaydedip bunların kaydını iptal eder ve kayıtlı senkronizasyonlar için etiketler sağlar. ServiceWorkerRegistration.periodicSync mülkünden bu sınıfın bir örneğini alın.ServiceWorkerGlobalScope.onperiodicsync.PeriodicSyncEventalıcısını kaydeder.ServiceWorkerRegistration.periodicSync.PeriodicSyncManageröğesine ait bir referans döndürür.
Örnek
İçerik güncelleme
Aşağıdaki örnekte, bir haber sitesi veya blog için güncel makaleleri indirip önbelleğe almak üzere düzenli arka plan senkronizasyonu kullanılmaktadır. Bu senkronizasyonun türünü belirten etiket adına ('update-articles') dikkat edin. updateArticles() çağrısı, servis çalışanının makaleler indirilip depolanmadan önce sonlandırılmaması için event.waitUntil() içine yerleştirilir.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Mevcut bir web uygulamasına periyodik arka plan senkronizasyonu ekleme
Mevcut bir PWA'ya düzenli arka plan senkronizasyonu eklemek için bu değişiklik grubu gerekliydi. Bu örnekte, web uygulamasındaki düzenli arka plan senkronizasyonunun durumunu açıklayan çeşitli yararlı günlük kaydı ifadeleri bulunmaktadır.
Hata ayıklama
Yerel olarak test ederken düzenli arka plan senkronizasyonunu uçtan uca görüntülemek zor olabilir. Etkin kayıtlar, yaklaşık senkronizasyon aralıkları ve geçmiş senkronizasyon etkinliklerinin günlükleri, web uygulamanızın davranışıyla ilgili hata ayıklama sırasında değerli bağlam sağlar. Neyse ki tüm bu bilgileri Chrome Geliştirici Araçları'ndaki deneysel bir özellik aracılığıyla bulabilirsiniz.
Yerel etkinliği kaydetme
DevTools'un Periyodik Arka Plan Senkronizasyonu bölümü, periyodik arka plan senkronizasyonu yaşam döngüsünde senkronizasyona kaydolma, arka plan senkronizasyonu gerçekleştirme ve kaydolma işlemlerini kapsayan önemli etkinlikler etrafında düzenlenmiştir. Bu etkinlikler hakkında bilgi edinmek için Kaydı başlat'ı tıklayın.
Kayıt sırasında DevTools'ta etkinliklere karşılık gelen girişler görünür. Her giriş için bağlam ve meta veriler kaydedilir.
Kayıt bir kez etkinleştirildikten sonra üç güne kadar etkin kalır. Bu sayede DevTools, gelecekte gerçekleşebilecek arka plan senkronizasyonları hakkında yerel hata ayıklama bilgilerini yakalayabilir.
Etkinlikleri simülasyonla oluşturma
Arka plan etkinliğini kaydetmek yararlı olsa da bir etkinliğin normal ritmiyle tetiklenmesini beklemeden periodicsync işleyicinizi hemen test etmek isteyeceğiniz durumlar olabilir.
Bunu Chrome Geliştirici Araçları'ndaki Uygulama panelinde bulunan Hizmet Çalışanları bölümünden yapabilirsiniz. Düzenli Senkronizasyon alanı, etkinliğin kullanacağı bir etiket sağlamanıza ve bu etiketi istediğiniz kadar tetiklemenize olanak tanır.
Geliştirici Araçları arayüzünü kullanma
Chrome 81'den itibaren Geliştirici Araçları Uygulama panelinde Düzenli Arka Plan Senkronizasyonu bölümü gösterilir.
