Uygulamaya benzer bir deneyim için web uygulamanızın verilerini arka planda senkronize etme
Aşağıdaki durumlardan herhangi birinde bulundunuz mu?
- 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 işlemleri 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 özel 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
Düzenli arka plan senkronizasyonu, aşamalı web uygulaması veya hizmet çalışanı destekli sayfa başlatıldığında 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 kullanma seçeneğiniz de devam eder.
Periyodik arka plan senkronizasyonu, arka plan senkronizasyonuyla kolayca karıştırılabilir. Benzer adlara sahip olsalar da kullanım alanları farklıdır. Arka plan senkronizasyonu, diğerlerinin yanı sıra önceki bir istek başarısız olduğunda verileri bir sunucuya yeniden göndermek için en yaygın şekilde 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 yalnızca kullanıcının cihazına yükledikten ve ayrı bir uygulama olarak başlattıktan sonra düzenli arka plan senkronizasyonunu kullanabilmesidir. 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 yere pil veya veri tüketmesini istemediğinden, Chrome, geliştiricilerin kullanıcılarına değer sunarak bu özelliği kazanması gerektiği şekilde düzenli arka plan senkronizasyonunu 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 sayede, arka planda senkronize edilen uygulamaların yalnızca etkin olarak kullandığınız uygulamalar olmasını sağlayabilirsiniz.
Periyodik arka plan senkronizasyonu, popüler platformlardaki mevcut API'ler ve uygulamalarla bazı benzerlikler paylaşır. Ö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çerik ön getirme, veri senkronizasyonu vb. için daha iyi bir kullanıcı deneyimi sunmak amacıyla arka planda düzenli olarak ağa erişen uygulamalar yüklemesi yaygındır. 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, periyodik arka plan senkronizasyonu için bu riski şu şekilde ele almış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 da istemcinin IP adreslerini, iletişim kurduğu sunucunun IP adresini ve sunucunun adını gösterir. Bu etkiyi, uygulama yalnızca ön plandayken senkronize ediliyorsa yaklaşık olarak ne kadar olacağı düzeyine indirmek 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 bunu 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, periyodik 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
Bir kayıt etiketi dizisi almak için periodicSync.getTags() işlevini çağırın. Aşağıdaki örnekte, tekrar güncellemeyi önlemek için önbelleğin güncellenmesinin etkin olduğunu onaylamak üzere 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 kayıtlı bir düzenli arka plan senkronizasyonu varsa 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ı kaydeder ve kaydını siler 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ı, hizmet ç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 hakkındaki bilgiler, web uygulamanızın davranışıyla ilgili hata ayıklama işlemi 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ünün önemli etkinlikleri (senkronizasyona kaydolma, arka plan senkronizasyonu gerçekleştirme ve kaydını silme) 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 ritimde 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. Periyodik 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.
