Periyodik Arka Plan Senkronizasyonu API'si ile daha zengin çevrimdışı deneyimler

Uygulama benzeri bir deneyim için web uygulamanızın verilerini arka planda senkronize edin

Joe Medley
Joe Medley

Aşağıdaki durumlardan herhangi biriyle karşılaştınız mı?

  • Kesintili veya internet bağlantısı yokken tren veya metroda yolculuk
  • Çok fazla video izledikten sonra operatörünüz tarafından kısıtlandı
  • Bant genişliğinin talebe yetişmekte zorlandığı bir ülkede yaşamak

Öyleyse, belirli işlerin web'de yapılmasının getirdiği hayal kırıklığını yaşamış ve platforma özgü 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 ağ olmasa bile haberleri okuyabilirsiniz.

Periyodik Arka Plan Senkronizasyonu, web uygulamalarının verileri arka planda düzenli olarak senkronize edebilmesini sağlayarak web uygulamalarını platforma özgü bir uygulamanın davranışına yaklaştırır.

Deneyin

Canlı demo uygulamasını kullanarak düzenli arka plan senkronizasyonunu deneyebilirsiniz. Bu uygulamayı kullanmadan önce şunlardan emin olun:

  • Chrome 80 veya sonraki bir sürümünü kullanıyorsunuz.
  • Periyodik arka plan senkronizasyonunu etkinleştirmeden önce web uygulamasını yüklersiniz.

Kavramlar ve kullanım

Periyodik arka plan senkronizasyonu, progresif web uygulaması veya hizmet çalışanı destekli sayfa başlatıldığında yeni içerik göstermenizi sağlar. Uygulama veya sayfa kullanımda değilken arka planda veri indirerek bunu yapar. Bu, uygulama görüntülenirken, başlatma sonrasında uygulama içeriğinin yenilenmesini engeller. Daha da iyisi, bu işlem uygulamanın yenilemeden önce bir içerik döner simgesi göstermesini engeller.

Periyodik arka plan senkronizasyonu olmadığında web uygulamaları veri indirmek için alternatif yöntemler kullanmalıdır. Bunun yaygın bir örneği, hizmet çalışanını uyandırmak için push bildirimi kullanmaktır. Kullanıcı, "yeni veriler mevcut" gibi bir mesajla kesintiye uğrar. Verilerin güncellenmesi aslında yan etkilerden kaynaklanır. Önemli flaş haberler gibi gerçekten önemli güncellemeler için push bildirimlerini kullanmaya devam edebilirsiniz.

Periyodik arka plan senkronizasyonu, arka plan senkronizasyonu ile kolayca karıştırılır. İsimleri benzer olsa da kullanım alanları farklıdır. Diğerlerinin yanı sıra, arka plan senkronizasyonu en yaygın olarak önceki istek başarısız olduğunda bir sunucuya veri yeniden göndermek için kullanılır.

Kullanıcı etkileşimini doğru şekilde belirlemek

Yanlış yapıldığında, düzenli arka plan senkronizasyonu kullanıcıların kaynaklarını boşa harcayabilir. Chrome kullanıma sunmadan önce doğru olduğundan emin olmak için bir deneme süresine tabi tuttu. Bu bölümde, Chrome'un bu özelliği mümkün olduğunca faydalı hale getirmek için aldığı tasarım kararlarından bazıları açıklanmaktadır.

Chrome'un tasarım konusunda aldığı ilk karar, bir web uygulamasının düzenli arka plan senkronizasyonunu yalnızca bir kullanıcı bu uygulamayı cihazına yükleyip ayrı bir uygulama olarak başlattıktan sonra kullanabilir. Periyodik arka plan senkronizasyonu, Chrome'daki normal bir sekme bağlamında kullanılamaz.

Ayrıca Chrome, kullanılmayan veya nadiren kullanılan web uygulamalarının nedensiz bir şekilde pil veya veri tüketmesini istemediğinden, düzenli arka plan senkronizasyonu tasarladı. Böylece, geliştiriciler kullanıcılarına değer sağlayarak bu senkronizasyondan kazanç elde etmek zorunda kalacaklar. Somut olarak, Chrome belirli bir web uygulaması için periyodik arka plan senkronizasyonlarının yapılıp yapılamayacağını ve ne sıklıkta gerçekleşebileceğini belirlemek üzere bir site etkileşim puanı (about://site-engagement/) kullanmaktadır. Diğer bir deyişle, etkileşim puanı sıfırdan büyük olmadığı ve değeri periodicsync etkinliğinin tetiklenme sıklığını etkilemediği sürece periodicsync etkinliği hiç tetiklenmez. Böylece arka planda yalnızca aktif olarak kullandığınız uygulamalar senkronize edilir.

Periyodik arka plan senkronizasyonu, mevcut API'ler ve popüler platformlardaki uygulamalarla bazı benzerlikler gösterir. Örneğin, tek seferlik arka planda senkronizasyonun yanı sıra push bildirimleri de bir kullanıcı sayfayı kapattıktan sonra web uygulamasının mantığının biraz daha uzun süre (hizmet çalışanı aracılığıyla) kullanılmasına olanak tanır. Çoğu platformda kritik güncellemeler, içeriklerin önceden yüklenmesi, verilerin senkronize edilmesi ve benzeri işlemlerde daha iyi bir kullanıcı deneyimi sağlamak için arka planda düzenli olarak ağa erişen uygulamaların yüklü olması yaygın bir durumdur. Benzer şekilde, periyodik arka plan senkronizasyonu da bir web uygulamasının mantığının, tek seferde birkaç dakika boyunca düzenli aralıklarla çalışacak şekilde ömrünü uzatır.

Tarayıcı bunun sık sık ve kısıtlamalar olmadan yapılmasına izin veriyorsa bazı gizlilik endişelerine yol açabilir. Aşağıda Chrome'un bu düzenli arka plan senkronizasyonu riskini nasıl ele aldığını görebilirsiniz:

  • Arka planda senkronizasyon etkinliği yalnızca cihazın önceden 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, periyodik arka plan senkronizasyonu istemcinin IP adreslerini, konuştuğu sunucuyu ve sunucunun adını gösterir. Tarayıcı, bu maruz kalmayı yaklaşık olarak uygulama ön plandayken senkronize etseydi olacağını hissettirmek için, bir uygulamanın arka plan senkronizasyon sıklığını, kişinin uygulamayı kullanma sıklığına göre sınırlandırır. Kullanıcı uygulamayla sık sık etkileşime geçmeyi durdurursa, düzenli arka plan senkronizasyonunun tetiklenmesi durdurulur. Bu, platforma özgü uygulamaların mevcut durumuna kıyasla net bir gelişmedir.

Ne zaman kullanılabilir?

Kullanım kuralları tarayıcıya göre değişir. Yukarıdan özetlemek gerekirse, Chrome düzenli arka plan senkronizasyonuna aşağıdaki gereksinimleri uygular:

  • Belirli bir kullanıcı etkileşim puanı.
  • Daha önce kullanılmış bir ağın varlığı.

Senkronizasyon zamanlaması geliştiriciler tarafından kontrol edilmez. Senkronizasyon sıklığı, uygulamanın kullanım sıklığına uyum sağlar. (Platforma özgü uygulamaların şu anda bunu yapmadığını unutmayın.) Ayrıca cihazın güç ve bağlantı durumu hakkında da bilgi verir.

Ne zaman kullanılmalıdır?

Service Worker'ınız bir periodicsync etkinliğini işlemek için uyandığında veri isteme fırsatınız olur ancak bunu yapma sorumluluğunuz yoktur. Etkinliği ele alırken ağ koşullarını ve kullanılabilir depolama alanını dikkate almalı ve yanıt olarak farklı miktarlarda veri indirmelisiniz. Yardımcı olması için aşağıdaki kaynaklardan yararlanabilirsiniz:

İzinler

Service Worker yüklendikten sonra Permissions API'yi kullanarak periodic-background-sync için sorgulama yapın. Bu işlemi bir pencereden veya Service Worker 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 senkronizasyonu 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 buna register() çağrısı yapın. Kayıt işlemi 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' ve minInterval 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() öğesini çağırın. Aşağıdaki örnekte, tekrar güncelleme yapılmasını önlemek amacıyla önbellek güncellemenin etkin olduğunu onaylamak için 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();
}

Kullanıcıların belirli güncelleme türlerini etkinleştirebilmesi veya devre dışı bırakabilmesi amacıyla web uygulamanızın ayarlar sayfasında etkin kayıtların bir listesini göstermek için getTags() kullanabilirsiniz.

Periyodik arka plan senkronizasyon etkinliğine yanıt verme

Periyodik bir arka plan senkronizasyonu etkinliğine yanıt vermek için hizmet çalışanınıza bir periodicsync etkinlik işleyici ekleyin. Kendisine 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 periyodik bir arka plan senkronizasyonu kaydedildiyse event.tag değeri '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.
});

Senkronizasyonun kaydını silme

Kayıtlı bir senkronizasyonu sonlandırmak için periodicSync.unregister() işlemini iptal etmek istediğiniz senkronizasyonun adıyla birlikte çağırın.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Arayüzler

Aşağıda, Periodic Arka Plan Senkronizasyonu API'sının sağladığı arayüzlerin kısa bir özetini görebilirsiniz.

  • PeriodicSyncEvent. Tarayıcının seçtiği bir zamanda ServiceWorkerGlobalScope.onperiodicsync etkinlik işleyicisine iletilir.
  • PeriodicSyncManager. Periyodik senkronizasyonları kaydeder, senkronize eder ve kayıtlı senkronizasyonlar için etiketler sağlar. ServiceWorkerRegistration.periodicSync özelliğinden bu sınıfın bir örneğini alın.
  • ServiceWorkerGlobalScope.onperiodicsync. PeriodicSyncEvent bilgisini almak için bir işleyici kaydeder.
  • ServiceWorkerRegistration.periodicSync. PeriodicSyncManager için bir referans döndürür.

Örnek

İçerik güncelleniyor

Aşağıdaki örnekte, bir haber sitesi veya blog'un güncel makalelerini indirmek ve önbelleğe almak için periyodik arka plan senkronizasyonu kullanılmaktadır. Senkronizasyon türünü ('update-articles') belirten etiket adına dikkat edin. updateArticles() çağrısı, makaleler indirilip depolanmadan önce hizmet çalışanının sonlandırılmaması için event.waitUntil() içinde sarmalanır.

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 PWA'ya periyodik arka plan senkronizasyonu eklemek için bu değişikliklerin yapılması gerekiyordu. Bu örnekte, web uygulamasındaki periyodik arka plan senkronizasyonunun durumunu açıklayan bir dizi faydalı günlük kaydı ifadesi yer almaktadır.

Hata ayıklama

Yerel olarak test yaparken periyodik arka plan senkronizasyonunu baştan sona görmek 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ışındaki hataları ayıklarken önemli bilgiler sağlar. Neyse ki, Chrome Geliştirici Araçları'ndaki deneysel bir özellik sayesinde bu bilgilerin tamamını bulabilirsiniz.

Yerel etkinlik kaydediliyor

Geliştirici Araçları'nın Periyodik Arka Plan Senkronizasyonu bölümü, periyodik arka plan senkronizasyonu yaşam döngüsündeki önemli etkinlikler çerçevesinde düzenlenmiştir: senkronizasyon için kaydolma, arka plan senkronizasyonu gerçekleştirme ve kaydı iptal etme. Bu etkinliklerle ilgili bilgi edinmek için Kaydı başlat'ı tıklayın.

Geliştirici Araçları'ndaki kayıt düğmesi
Geliştirici Araçları'ndaki kaydet düğmesi

Kayıt sırasında girişler, etkinliklere karşılık gelen Geliştirici Araçları'nda görünür. Her birinin bağlam ve meta verileri günlüğe kaydedilir.

Kaydedilen periyodik arka plan senkronizasyon verileri örneği
Kaydedilen periyodik arka plan senkronizasyon verileri örneği

Kayıt özelliği bir kez etkinleştirildikten sonra üç güne kadar etkin kalır. Bu sayede Geliştirici Araçları, saatler sonra bile olabilecek arka plan senkronizasyonlarıyla ilgili yerel hata ayıklama bilgilerini yakalayabilir.

Etkinlikleri simüle etme

Arka plan etkinliğini kaydetmek faydalı olabilir ancak bazen bir etkinliğin normal tempoda tetiklenmesini beklemeden periodicsync işleyicinizi hemen test etmek isteyebilirsiniz.

Bu işlemi Chrome Geliştirici Araçları'nın Uygulama panelinde bulunan Hizmet Çalışanları bölümünden yapabilirsiniz. Periyodik Senkronizasyon alanı, etkinliğin kullanması için bir etiket sağlamanıza ve bunu istediğiniz kadar tetiklemenize olanak tanır.

Uygulama panelinin 'Hizmet Çalışanları' bölümünde bir "Periyodik Senkronizasyon" metin alanı ve düğmesi görüntülenir.

Geliştirici Araçları arayüzünü kullanma

Chrome 81'den itibaren DevTools Uygulama panelinde Periyodik Arka Plan Senkronizasyonu bölümünü göreceksiniz.

Periyodik Arka Plan Senkronizasyonu bölümünü gösteren Uygulama paneli