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

Uygulamaya benzer bir deneyim için web uygulamanızın verilerini arka planda senkronize edin

Jeff Posnick

Joe Medley

Aşağıdaki durumlardan herhangi birini yaşadınız mı?

• Trende veya metroda kesintili ya da internet bağlantısı yokken
• Çok fazla video izledikten sonra operatörünüz tarafından kısıtlandı
• Bant genişliğinin talebi karşılamakta zorlandığı bir ülkede yaşamak

duyduysanız, gerçekten hayatınızın bir parçası olduğu için internette gerçekleştirildiğini öğrendim ve platforma özgü uygulamaların neden bu kadar iyi performans bu senaryolarda işe yarar. Platforma özgü uygulamalar, haber makaleleri veya hava durumu gibi yeni içerikleri getirebilir. bu bilgilerden faydalanabilirsiniz. Metroda ağ bağlantısı olmasa bile haberler.

Periyodik Arka Plan Senkronizasyonu, web uygulamalarının düzenli aralıklarla senkronize edilmesini sağlar arka planda işlem yaparak web uygulamalarını platforma özgü davranışlara yaklaştırır. uygulamasını indirin.

Dene

Canlı demo ile düzenli aralıklarla arka plan senkronizasyonunu deneyebilirsiniz uygulamasında gösterilir. Kullanmadan önce şunlardan emin olun:

• Chrome 80 veya daha yeni bir sürüm kullanıyorsanız.
• Siz yükleme etkinleştirmeniz gerekir.

Kavramlar ve kullanım

Periyodik arka plan senkronizasyonu, progresif bir web uygulaması olduğunda yeni içerik göstermenize olanak tanır. veya hizmet çalışanı destekli bir sayfa başlatılır. Bunu yapmak için arka planda çalışır. Bu, uygulamanın içerik yayınlandıktan sonra izlenme sürecinde yenilenmesi gerekebilir. Daha da iyisi, uygulamanın, yenilemeden önce bir içerik döner simgesi göstermesini engeller.

Düzenli arka plan senkronizasyonu olmadan, web uygulamaları aşağıdaki işlemler için alternatif yöntemler kullanmalıdır: verileri indirmenizi sağlar. Bunun yaygın bir örneği, bir hizmeti uyandırmak için push bildirimi kullanmaktır bir kontrol noktası görevi görebilir. Kullanıcı, "yeni veriler mevcut" gibi bir mesajla kesintiye uğrar. Verilerin güncellenmesi temel bir yan etkidir. Tekliflerinizi otomatikleştirmek ve optimize etmek için önemli güncellemeler (ör. önemli güncellemeler) için push bildirimleri flaş haber.

Periyodik arka plan senkronizasyonu, arka plan senkronizasyonu ile kolayca karıştırılabilir. Her ne kadar kullanım alanları farklı olabilir. Diğer şeylerin yanı sıra, arka plan senkronizasyonu en yaygın olarak bir sunucuyu yeniden göndermek için önceki istek başarısız oldu.

Kullanıcı etkileşiminin doğru olmasını sağlama

Düzenli olarak yapılan arka plan senkronizasyonu yanlış yapılır, kullanıcıları boşa harcayabilir kaynaklar. Chrome, kullanıma sunmadan önce emin olun. Bu bölümde, Chrome'un tasarım kararlarından bazıları olabildiğince yararlı hale getirmek için elimizden geleni yaptık.

Chrome'un aldığı ilk tasarım kararı, bir web uygulamasının yalnızca düzenli aralıklarla arka plan senkronizasyonunu etkinleştirmeniz gerekir. bir uygulama olarak kullanıma sundu. Periyodik arka plan senkronizasyonu kullanılamıyor durumunu Chrome'daki normal bir sekme bağlamında ekleyebilirsiniz.

Dahası, Chrome kullanılmayan veya nadiren kullanılan web uygulamalarının nedensiz yere pil veya veri tüketmesine izin veriyorsa, Chrome'un düzenli olarak arka plan senkronizasyonunu geliştiricilerin, bunu kullanıcılarına değer sunarak kazanmaları gerekiyor. Somut olarak, Chrome bir site etkileşim puanı kullanıyor (about://site-engagement/) kullanarak periyodik arka plan senkronizasyonlarının gerçekleşip gerçekleşmeyeceğini ve ne sıklıkta gerçekleşeceğini belirleme kullanabilirsiniz. Diğer bir deyişle, etkileşim kurulmadığı sürece periodicsync etkinliği hiç tetiklenmez. puanı sıfırdan büyüktür ve değeri, reklamın periodicsync etkinlik tetiklendi. Bu şekilde, arka planı, aktif olarak kullandıklarınızdır.

Periyodik arka plan senkronizasyonu, mevcut API'lerle bazı benzerliklere sahiptir ve en iyi uygulamaları paylaşacağız. Örneğin, tek seferlik arka planda senkronizasyon push bildirimleri bir web uygulamasının mantığının biraz daha uzun süre kalmasına olanak tanır (örneğin, hizmet çalışanı). Çoğu platformda ağa düzenli olarak erişen uygulamaların yüklü olduğu ve Kritik güncellemeler için daha iyi bir kullanıcı deneyimi sağlamak üzere arka planda içerik önceden getirme, verileri senkronize etme vb. Benzer şekilde, düzenli aralıklarla arka plan senkronizasyonu da bir web uygulamasının mantığının günlük düzende çalışacak şekilde birkaç dakika sürebilir.

Tarayıcı bunun sık sık ve herhangi bir kısıtlama olmadan gerçekleşmesine izin verdiyse gizlilikle ilgili bazı sorunlara yol açabilir. Chrome'un bu sorunu nasıl ele aldığı aşağıda açıklanmıştır düzenli arka plan senkronizasyonu riski:

• Arka planda senkronizasyon etkinliği yalnızca cihazın daha önce bağlanıldı. Chrome, yalnızca güvenilir taraflardır.
• Tüm internet iletişimlerinde olduğu gibi, düzenli aralıklarla arka planda yapılan senkronizasyonla, IP adresi ve iletişim kurduğu sunucunun adını ve sunucu. Bu karşılaşmayı, uygulama yalnızca uygulama indirmesi halinde hemen hemen ön plandayken senkronize edildiğinde, tarayıcı bir reklamın arka planı, kullanıcının uygulamayı kullanma sıklığına göre senkronize edilir. Eğer kullanıcı, uygulamayla sık sık etkileşime son veriyor, düzenli arka plan senkronizasyonu tetiklenmez. Bu, platforma özgü statüko üzerinde 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 olarak arka plan senkronizasyonu için aşağıdaki şartlar geçerlidir:

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

Senkronizasyonların zamanlaması geliştiriciler tarafından kontrol edilmez. İlgili içeriği oluşturmak için kullanılan uygulamanın kullanım sıklığıyla uyumlu olacaktır. ( platforma özgü uygulamalarda şu an için böyle bir kullanım yoktur.) Ayrıca cihazın gücünü ve bağlantı durumu.

Ne zaman kullanılmalıdır?

Hizmet çalışanınız bir periodicsync etkinliğini işlemek için uyandığında Veri talep etme fırsatı vardır ancak bunu yapma zorunluluğu yoktur. İşleme sırasında ağ koşullarını ve kullanılabilir depolama alanını ve sonuç olarak farklı miktarlarda veri indirebilir. Tekliflerinizi otomatikleştirmek ve optimize etmek için aşağıdaki kaynaklardan yararlanabilirsiniz:

• Network Information API
• Veri tasarrufu modunu algılama
• Kullanılabilir depolama alanı tahmini

İzinler

Hizmet çalışanı yüklendikten sonra İzinleri kullanın. Sorgu için API periodic-background-sync için. Bu işlemi bir pencereden ya da Service Worker bağlamı.

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. Al ServiceWorkerRegistration.periodicSync kullanarak bir PeriodicSyncManager ve ara register() var. Kaydolmak için hem etiket hem de minimum değer gereklidir senkronizasyon aralığı (minInterval). Etiket, kayıtlı senkronizasyonu tanımlar Böylece birden fazla senkronizasyon yapılabilir. Aşağıdaki örnekte etiket adı 'content-sync' ve minInterval bir gün.

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. İlgili içeriği oluşturmak için kullanılan aşağıdaki örnekte, önbellek güncelleme işleminin etkin olduğunu onaylamak için etiket adları kullanılmaktadır. tekrar güncelleniyor.

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();
}

Web'deki etkin kayıtların listesini göstermek için getTags() öğesini de kullanabilirsiniz Ayarlar sayfasından, kullanıcıların belirli türde güncellemelerine göz atın.

Düzenli aralıklarla arka plan senkronizasyonu etkinliğine yanıt verme

Düzenli bir arka plan senkronizasyonu etkinliğine yanıt vermek için periodicsync etkinliği ekleyin için bir yöntem sunar. Kendisine geçirilen event nesnesi bir Kayıt sırasında kullanılan değerle eşleşen tag parametresi. Örneğin, 'content-sync' adıyla düzenli aralıklarla arka plan senkronizasyonu, ardından event.tag 'content-sync' olacak.

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ı iptal etme

Kayıtlı bir senkronizasyonu sonlandırmak için periodicSync.unregister() uygulamasını şunun adıyla arayın: senkronizasyonu tıklayın.

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

Arayüzler

Periyodik Arka Plan'ın sağladığı arayüzlerin kısa bir özetini burada bulabilirsiniz Senkronizasyon API'si.

• PeriodicSyncEvent Şu zamanda ServiceWorkerGlobalScope.onperiodicsync etkinlik işleyicisine geçti: seçtiği bir saattir.
• PeriodicSyncManager Düzenli senkronizasyonları kaydeder, kayıtları iptal eder ve kayıtlı senkronize edilir. ServiceWorkerKayıt.periodicSync'ten bu sınıfın bir örneğini al
• ServiceWorkerGlobalScope.onperiodicsync PeriodicSyncEvent öğesini almak için bir işleyici kaydeder.
• ServiceWorkerRegistration.periodicSync Bir PeriodicSyncManager referansı döndürür.

Örnek

İçerik güncelleniyor

Aşağıdaki örnekte, bir haber sitesi veya blog'a ilişkin güncel makaleleri indirmek ve önbelleğe almak için düzenli olarak arka plan senkronizasyonu kullanılmaktadır. Bunun senkronizasyon türünü belirten etiket adına dikkat edin ('update-articles'). updateArticles() çağrısı event.waitUntil() içinde sarmalanır. Böylece hizmet çalışanı, makaleler indirilip depolanmadan önce sonlandırılmaz.

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 düzenli aralıklarla arka plan senkronizasyonu ekleme

Şu satıra eklemek için bu değişiklik grubunu mevcut bir PWA ile düzenli olarak arka plan senkronizasyonu. Bu örnek, web uygulamasındaki düzenli arka plan senkronizasyonunun durumu.

Hata ayıklama

Düzenli arka plan senkronizasyonunu görmek ve uçtan uca görüntülemek zor olabilir yerel olarak test etmektir. Etkin kayıtlar, yaklaşık senkronizasyon hakkında bilgi aralıkları ve geçmiş senkronizasyon etkinliklerinin günlükleri, hata ayıklama sırasında değerli bilgiler sağlar web uygulamanızın davranışı. Neyse ki bu adımların hepsini Chrome Geliştirici Araçları'ndaki deneysel bir özellik aracılığıyla.

Yerel aktivite kaydediliyor

Geliştirici Araçları'nın Periyodik Arka Plan Senkronizasyonu bölümü, önemli etkinliklere göre düzenlenmiştir senkronizasyona kaydolma, senkronizasyona kaydolma, arka plan senkronizasyonu ve kaydı iptal etme. Bu etkinlikler hakkında bilgi edinmek için Kaydı başlat'ı tıklayın.

Kayıt sırasında, Geliştirici Araçları'nda etkinliklere karşılık gelen girişler gösterilir. her biri için günlüğe bağlam ve meta veri kaydedilir.

Kaydı bir kez etkinleştirdikten sonra üç güne kadar etkin durumda kalır. Geliştirici Araçları'nın arka plan senkronizasyonlarıyla ilgili yerel hata ayıklama bilgilerini yakalamasına izin verme yer alabilir.

Etkinliklerin simülasyonunu yapma

Arka plandaki etkinliği kaydetmek faydalı olabilir ancak bazı durumlarda hiçbir zaman beklemeden periodicsync işleyicinizi hemen test etmek olayın normal temposunda tetiklenmesini sağlar.

Bunu şu adresteki Uygulama panelindeki Hizmet Çalışanları bölümünden yapabilirsiniz: Chrome Geliştirici Araçları. Periyodik Senkronizasyon alanı, tetiklemek ve onu istediğiniz kadar tetiklemek için gereklidir.

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

Chrome 81'den itibaren Geliştirici Araçları Uygulama paneli.