Arka Plan Senkronizasyonu ile tanışın

Jake Archibald

Yayınlanma tarihi: 8 Aralık 2015

Arka planda senkronizasyon, kullanıcının bağlantısı sabit olana kadar işlemleri ertelemenize olanak tanıyan bir web API'sidir. Bu sayede, kullanıcıların göndermek istedikleri dosyaları mümkün olan en kısa sürede göndermelerine yardımcı olabilirsiniz.

Sorun

İnternet, zaman geçirmek için harika bir yerdir. İnternette zaman geçirmeseydik kedilerin çiçeklerden hoşlanmadığını, bukalemunların baloncukları sevdiğini veya Eric Bidelman'ın 90'lı yılların sonlarında mini golf kahramanı olduğunu bilemezdik.

Ancak bazen, sadece bazen, zaman kaybetmek istemeyiz. İdeal kullanıcı deneyimi şuna benzer:

1. Telefon cebinizde değilse
2. Küçük bir hedefe ulaşın.
3. Telefonu tekrar cebinize koyun.
4. Hayata devam et.

Maalesef bu deneyim, kötü bağlantı nedeniyle sık sık kesintiye uğruyor. Hepimizin başına gelmiştir. Beyaz bir ekrana veya dönen bir daireye bakıyorsunuz. Pes edip hayatınıza devam etmeniz gerektiğini biliyorsunuz ancak ihtimallere karşı 10 saniye daha bekliyorsunuz. 10 saniye sonra ne olur? Hiç.

Peki neden şimdi pes ediyorsunuz? Zaten zaman ayırdığınız için hiçbir şey elde etmeden ayrılmak istemezsiniz ve beklemeye devam edersiniz. Bu noktada pes etmek istersiniz ancak pes ettiğiniz anın, biraz daha bekleseydiniz her şeyin yükleneceği andan hemen önce olduğunu bilirsiniz.

Hizmet çalışanları, önbellekten içerik yayınlamanıza olanak tanıyarak sayfa yükleme sorununu çözer. Peki sayfanın sunucuya bir şey göndermesi gerektiğinde ne olur?

Şu anda kullanıcılar, gönderdikleri mesajın tamamlanmasını beklerken dönen bir çarka bakmak zorunda kalıyor. Kullanıcılar sayfadan ayrılmaya veya sekmeyi kapatmaya çalışırsa onbeforeunload kullanarak "Hayır, bu yükleme çubuğuna biraz daha bakmanız gerekiyor. Üzgünüm". Kullanıcının bağlantısı yoksa "Üzgünüz, siz daha sonra tekrar gelip denemelisiniz" mesajını gösteririz.

Arka plan senkronizasyonu sayesinde daha iyi bir deneyim yaşayabilirsiniz.

Çözüm

Aşağıdaki videoda, yalnızca emoji'lerin kullanıldığı bir sohbet demosu olan Emojoy gösterilmektedir. Progresif web uygulaması olan bu uygulama, öncelikle çevrimdışı çalışır. Uygulama, push mesajlarını ve bildirimlerini kullanır ve arka plan senkronizasyonunu kullanır.

Kullanıcı bağlantısı yokken ileti göndermeye çalışırsa bağlantı sağlandığında ileti arka planda gönderilir.

Bu şekilde arka planda gönderme yapabilmek, algılanan performansı da iyileştirir. Uygulamanın mesaj gönderme konusunda bu kadar büyük bir sorun çıkarmasına gerek yoktur. Bu nedenle, mesajı doğrudan çıkışa ekleyebilir.

Arka plan senkronizasyonu, Chrome 49'dan itibaren kullanılabilir.

Arka plan senkronizasyonu isteğinde bulunma

Gerçek bir genişletilebilir web stiliyle bu, ihtiyacınız olanı yapma özgürlüğü veren düşük seviyeli bir özelliktir. Kullanıcı bağlantıya sahip olduğunda bir etkinliğin tetiklenmesini istersiniz. Kullanıcı zaten bağlantıya sahipse bu işlem hemen gerçekleşir. Ardından, bu etkinliği dinleyip yapmanız gerekenleri yaparsınız.

Push mesajlaşma gibi, etkinlik hedefi olarak hizmet çalışanı kullanır. Bu sayede, sayfa açık değilken çalışabilir. 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! doSomeStuff(), yapmaya çalıştığı işlemin başarılı veya başarısız olduğunu belirten bir söz döndürmelidir. Söz yerine getirilirse senkronizasyon tamamlanır. Başarısız olursa yeniden denemek için başka bir senkronizasyon planlanır. Yeniden denenen senkronizasyonlar da bağlantı için bekler ve eksponansiyel geri yükleme kullanır.

Senkronizasyonun etiket adı (örnekteki "myFirstSync") belirli bir senkronizasyon için benzersiz olmalıdır. Beklemede olan bir senkronizasyonla aynı etiketi kullanarak senkronizasyon kaydettirirseniz bu senkronizasyon, mevcut senkronizasyonla birleştirilir. Bu, kullanıcı her ileti gönderdiğinde "giden kutusunu temizleme" senkronizasyonu için kaydolabileceğiniz anlamına gelir. Ancak kullanıcı çevrimdışıyken 5 ileti gönderirse internete bağlandığında yalnızca bir senkronizasyon alırsınız. 5 ayrı senkronizasyon etkinliği elde etmek için benzersiz etiketler kullanın.

Senkronizasyon etkinliğini kullanarak bildirim gösteren bir demo.

Arka plan senkronizasyonunun kullanım alanları

İdeal olarak, sayfada kalma süresinin ötesinde önem verdiğiniz tüm veri gönderme işlemlerini planlamak için kullanırsınız. Kullanıcı başka bir sayfaya gitse veya sekmeyi kapatsa bile sunucuya ulaşmasını istediğiniz sohbet mesajları, e-postalar, doküman güncellemeleri, ayar değişiklikleri, fotoğraf yüklemeleri veya diğer içerikler. Sayfa, bunları indexedDB'deki bir "giden kutusu" deposunda saklayabilir. Hizmet çalışanı da bunları alıp gönderebilir.

Ancak küçük veri parçalarını getirmek için de kullanabilirsiniz.

Çevrimdışı Wikipedia demosu

Bu, Supercharging Page Load için oluşturduğum çevrimdışı Wikipedia demosudur. O zamandan beri arka plan senkronizasyonuyla ilgili bazı sihirli dokunuşlar ekledim.

Kendiniz deneyin:

1. Tarayıcınızı bu sekmede açık tutun.
2. Uçak modunu kullanarak veya kablosuz bağlantıyı kapatarak çevrimdışı kalabilirsiniz.
3. Başka bir makalenin bağlantısını tıklayın.
4. Sayfanın yüklenemediği size bildirilir (bu mesaj, sayfanın yüklenmesi biraz zaman aldığında da gösterilir).
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.

Bu kalıbı kullanan kullanıcılar, telefonlarını ceplerine koyup hayatlarına devam edebilir. Telefon, istedikleri getirildiğinde onları uyarır.

İzinler

Gösterdiğim demolar web bildirimlerini kullanıyor. Bu bildirimler için izin gerekir ancak arka plan senkronizasyonu için izin gerekmez.

Senkronizasyon etkinlikleri genellikle kullanıcı sitede bir sayfa açıkken tamamlanır. Bu nedenle, kullanıcı izni gerektirmek kötü bir deneyim olur. Bunun yerine, kötüye kullanımı önlemek için senkronizasyonların kaydedilebileceği ve tetiklenebileceği zamanı sınırlıyoruz. Örneğin:

• Yalnızca kullanıcı sitede bir pencere açıkken senkronizasyon etkinliğine kaydolabilirsiniz.
• Etkinlik yürütme süresi sınırlıdır. Bu nedenle, bunları her x saniyede bir sunucuya ping göndermek, Bitcoin madenciliği yapmak vb. 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

Arka plan senkronizasyonunun temel özellik olmasını beklerken bu özelliği aşamalı iyileştirme olarak kullanabilirsiniz:

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 planda senkronizasyon kullanılamıyorsa sayfadaki içeriği bugün yaptığınız gibi yayınlayın.

Kullanıcının bağlantısı iyi görünse bile arka plan senkronizasyonunu kullanmak, veri gönderme sırasında gezinme ve sekme kapatma işlemlerine karşı sizi koruduğu için faydalıdır.

Gelecek

"Periyodik arka plan senkronizasyonu" adlı bir varyant üzerinde çalışırken 2016'nın ilk yarısında arka plan senkronizasyonunu Chrome'un kararlı bir sürümünde kullanıma sunmayı hedefliyoruz. Periyodik arka plan senkronizasyonu ile zaman aralığı, pil durumu ve ağ durumu ile kısıtlanmış bir etkinlik isteğinde bulunabilirsiniz. Elbette bu işlem için kullanıcı izni gerekir. Ayrıca, bu etkinliklerin ne zaman ve ne sıklıkta tetikleneceği tarayıcıya bağlıdır. Diğer bir deyişle, bir haber sitesi her saat senkronize etmeyi isteyebilir ancak tarayıcı, bu siteyi yalnızca 07:00'de okuduğunuzu bildiği için senkronizasyon her gün 06:50'de başlatılır. Bu özellik, tek seferlik senkronizasyona kıyasla biraz daha geç kullanıma sunulacak ancak yakında kullanılabilecek.

Android ve iOS'teki başarılı kalıpları web'e taşıyoruz ancak web'i harika yapan özellikleri korumaya devam ediyoruz.