Arka Plan Senkronizasyonu ile tanışın

Jake Archibald
Jake Archibald
X Ana sayfa

Arka Plan Senkronizasyonu kullanıcı kararlı hale gelene kadar işlemleri ertelemenize olanak tanıyan yeni bir web API'sidir yardımcı olur. Bu, kullanıcının göndermek istediği her şeyin gerçekten gönderilmesini sağlar.

Sorun

İnternet, zaman harcamak için harika bir yerdir. İnternette zaman harcamadan kedilerin çiçekleri sevmediğini, bukalemunların balonlara bayıldığını veya Eric Bidelman'in 90'ların sonunda bir putt golf kahramanı olduğunu anlayamayız.

Ancak bazen, zaman kaybetmek istemiyoruz. İstenen kullanıcı şuna benzer bir deneyimdir:

  1. Telefon cebinizde.
  2. Küçük hedefe ulaşın.
  3. Telefon cebinde.
  4. Çalışmayı sürdürün.

Ne yazık ki bu deneyim, zayıf bağlantı nedeniyle sıklıkla bozuluyor. Hepimizin başına gelmiştir. Beyaz bir ekrana ya da döner simgeye bakıyorsunuz ve vazgeçip hayatınıza devam etmeniz gerektiğini biliyorsunuz, ama her ihtimale karşı 10 saniye daha verin. 10 saniyeden sonra mı? Hiç.

Peki şimdi neden vazgeçesiniz? Halihazırda zamanınızı yatırım yaptınız, bu yüzden hiçbir şey olmadan gidip gelmek israfa neden olmaz, bu yüzden beklemeye devam edersiniz. Bu noktada pes etmek istiyorsunuz fakat bunu yaptığınızda her şey yüklenmeden önceki saniye kadar bekliyorsunuz.

Service Worker'lar, önbellekten içerik sunmanızı sağlayarak sayfa yükleme kısmını çözer. Peki sayfanın sunucuya bir şey göndermesi gerektiğinde ne olur?

Şu anda, kullanıcı "gönder" düğmesine basarsa bir sonraki mesaja bakması gerekir. Kullanıcılar sekmeden çıkmaya veya sekmeyi kapatmaya çalışırsa onbeforeunload simgesini kullanarak "Hayır, bu döner simgeye biraz daha bakmanız gerekiyor. Üzgünüz". Kullanıcının bağlantısı yoksa kullanıcıya "Maalesef siz daha sonra geri dönüp tekrar denemeniz gerekiyor" söyleriz.

Bu çöp. Arka plan senkronizasyonu daha iyi performans elde etmenizi sağlar.

Çözüm

Aşağıdaki videoda yalnızca emojilerden oluşan bir sohbet demosu olan Emojoy gösterilmektedir. Bu bir progresif web uygulamasıdır ve çevrimdışına öncelik verir. Uygulama, push mesajlarını ve bildirimleri kullanıp arka planda senkronizasyonu kullanır.

Kullanıcı, internet bağlantısı yokken mesaj göndermeye çalışıyorsa neyse ki bağlantı kurulduğunda mesaj arka planda gönderiliyor.

Mart 2016'dan itibaren, Arka Plan senkronizasyonu Chrome'da 49 ve sonraki sürümlerde kullanılabilmektedir. Aşağıdaki adımları uygulayarak bu işlemin nasıl yapıldığını görebilirsiniz:

  1. Emojoy'u açın.
  2. Çevrimdışı olun (uçak modunu kullanarak veya yerel Faraday kafenizi ziyaret edin).
  3. Bir mesaj yazın.
  4. Ana ekranınıza geri dönün (isteğe bağlı olarak sekmeyi veya tarayıcıyı kapatın).
  5. İnternete bağlanın.
  6. İletiler arka planda gönderilir.

Arka planda bu şekilde e-posta gönderebilmek de performans artışı sağlar. Uygulamanın, gönderilen mesajı çok fazla dikkate alması gerekmez. Dolayısıyla mesajı doğrudan çıkışa ekleyebilir.

Arka plan senkronizasyonu isteğinde bulunma

Gerçek genişletilebilir web tarzında bu, size ihtiyacınız olan şeyi yapma özgürlüğü veren düşük seviyeli bir özelliktir. Sizden bağlantısı olduğunda tetiklenecek etkinlik. zaten bir bağlantısı var. Daha sonra o etkinliği dinliyor ve istediğiniz yardımcı olur.

Push mesajlarında olduğu gibi, etkinlik hedefi olarak bir service Worker kullanılır. Bu hizmet, sayfa açık olmadığında da çalışmasını sağlar. Başlamak için bir sayfadan senkronizasyona kaydolun:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

Hepsi bu kadar! Yukarıda doSomeStuff(), yapmaya çalıştığı şeyin başarılı/başarısız olduğunu belirten bir vaat döndürmelidir. İstek yerine getirilirse senkronizasyon tamamlanmıştır. Başarısız olursa, yeniden denemek için başka bir senkronizasyon programlanır. Yeniden deneme senkronizasyonları da bağlantı kurulmasını bekler ve eksponansiyel geri çekme uygular.

Senkronizasyonun etiket adı (yukarıdaki örnekte 'myFirstSync') belirli bir senkronizasyon için benzersiz olmalıdır. Beklemedeki bir senkronizasyonla aynı etiketi kullanarak bir senkronizasyona kaydederseniz bu senkronizasyon, mevcut senkronizasyonla birleşir. Bu, bir "giden kutusu" için kaydolabilirsiniz. kullanıcı her ileti gönderdiğinde senkronize edilir. Ancak çevrimdışıyken 5 ileti gönderirse çevrimiçi olduğunda yalnızca bir senkronizasyon alırsınız. 5 ayrı senkronizasyon etkinliği isterseniz benzersiz etiketler kullanmanız yeterlidir!

Minimum performansa sahip basit bir demoyu burada bulabilirsiniz: senkronizasyon etkinliğini kullanarak bir bildirim görüntüleyebilirsiniz.

Arka plan senkronizasyonunu ne için kullanabilirim?

İdeal olarak, sayfanın kullanım süresinden sonra sizi önemsediğiniz verilerin gönderimini planlamak için bu sayfayı kullanırsınız. Sohbet mesajları, e-postalar, doküman güncellemeleri, ayar değişiklikleri, fotoğraf yüklemeleri... kullanıcı başka bir yere gitse veya sekmeyi kapatsa bile sunucuya ulaşmak istediğiniz her şey. Sayfa, bunları bir "giden kutusu" içinde depolayabilir dizinde depolar. Hizmet çalışanı bunları alıp gönderir.

Bununla birlikte, küçük veri parçalarını getirmek için de kullanılabilir...

Bir demo daha!

Bu, Sayfa Yüklemesini Büyütme için oluşturduğum çevrimdışı Wikipedia demosudur. O zamandan bu yana arka plan senkronizasyonu sihri de ekledim.

Bunu kendiniz deneyin. Chrome 49 veya sonraki bir sürümünü kullandığınızdan emin olun. Ardından:

  1. Herhangi bir makaleye (ör. Chrome) gidin.
  2. Çevrimdışı olun (uçak modunu kullanarak veya benim gibi kötü bir mobil sağlayıcıya katılın).
  3. Başka bir makalenin bağlantısını tıklayın.
  4. Sayfanın yüklenemediği size bildirilmelidir (bu bilgi, sayfanın yüklenmesi biraz zaman alıyorsa da görünür).
  5. Bildirimleri kabul edin.
  6. Tarayıcıyı kapatın.
  7. Çevrimiçi ol
  8. Makale indirildiğinde, önbelleğe alındığında ve görüntülenmeye hazır olduğunda bildirim alırsınız.

Kullanıcı bu deseni kullanarak telefonunu cebine koyabilir ve istediği gibi alındığında telefonun onu uyaracağını bilerek günlük hayatına devam edebilir.

İzinler

Gösterdiğim demolar, izin gerektiren web bildirimlerini kullanıyor. Ancak arka plan senkronizasyonunun kendisi bunu desteklemiyor.

Senkronizasyon etkinlikleri genellikle kullanıcının siteye açık bir sayfası varken tamamlanır. Bu nedenle, kullanıcı izni gerektirmek kötü bir deneyime yol açar. Bunun yerine, kötüye kullanımı önlemek için senkronizasyonların ne zaman kaydedilebileceğini ve tetiklenebileceğini sınırlandırıyoruz. Örneğin:

  • Senkronizasyon etkinliğine yalnızca kullanıcının siteye açık bir penceresi olduğunda kaydolabilirsiniz.
  • Etkinlik yürütme süresi sınırlı olduğundan bunları her x saniyede bir sunucuyu pinglemek, bitcoin madenciliği yapmak veya başka bir şey için kullanamazsınız.

Elbette bu kısıtlamalar gerçek dünyadaki kullanıma bağlı olarak gevşetilebilir veya sıkılaştırılabilir.

Progresif geliştirme

Tüm tarayıcıların arka plan senkronizasyonunu desteklemesi biraz zaman alacaktır. Özellikle de Safari ve Edge'in henüz hizmet çalışanlarını desteklemediğinden. Ancak progresif geliştirme burada işe yarar:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Service Worker'lar veya arka plan senkronizasyonu kullanılamıyorsa içeriği yayınlayın olduğu gibi kaldırın.

Kullanıcı iyi bir bağlantıya sahip gibi görünse bile arka plan senkronizasyonunu kullanmanız önerilir. Bu özellik, veri gönderimi sırasında gezinme ve sekme kapatma işlemlerine karşı sizi korur.

Gelecek

2016'nın ilk yarısında arka plan senkronizasyonunu Chrome'un kararlı bir sürümüne göndermeyi hedefliyoruz. Bu sırada "periyodik arka plan senkronizasyonu" varyantı üzerinde çalışıyoruz. Düzenli arka plan senkronizasyonu ile zaman aralığı, pil durumu ve ağ durumuna göre kısıtlanmış bir etkinlik isteyebilirsiniz. Bunun için kullanıcı izninin alınması gerekir. Ayrıca, bu etkinliklerin ne zaman ve ne sıklıkta tetikleneceğini de tarayıcıya göre belirler. Diğer bir deyişle, bir haber sitesi saatte bir senkronizasyon isteğinde bulunabilir ancak tarayıcı bu siteyi yalnızca 07:00'de okuduğunuzu bilebilir; bu nedenle senkronizasyon her gün 06:50'de etkinleşir. Bu fikir bir defaya mahsus senkronizasyondan biraz daha uzaktır, ancak yakında uygulamaya çıkacaktır.

Web'i harika kılan özellikleri korurken, Android ve iOS'ten web'e adım adım başarılı kalıpları ekliyoruz.