Arka Planda Senkronizasyon, kullanıcının bağlantısı sabit olana kadar işlemleri ertelemenize olanak tanıyan yeni bir web API'sidir. Bu, kullanıcının göndermek istediği her şeyin gerçekten gönderilmesini sağlar.
Sorun
İnternet, zaman geçirmek için harika bir yerdir. İnternette vakit kaybetmeden kedilerin çiçekleri sevmediğini, bukalemunların baloncukları sevdiğini veya Eric Bidelman'ın 90'ların sonlarında mini golf şampiyonu olduğunu öğrenemezdik.
Ancak bazen, sadece bazen, zaman kaybetmek istemeyiz. İstenen kullanıcı deneyimi şu şekildedir:
- Telefon cebinizden çıkarıldığında.
- Küçük hedefe ulaşın.
- Telefon cebinizde.
- Hayata devam edin.
Maalesef bu deneyim, kötü bağlantı nedeniyle sık sık kesintiye uğrar. Hepimizin başına gelmiştir. Beyaz bir ekrana veya dönen bir imlece bakıyorsunuz. Vazgeçip hayatınıza devam etmeniz gerektiğini biliyorsunuz ancak her ihtimale karşı 10 saniye daha bekliyorsunuz. 10 saniye sonra? Hiç.
Ancak neden şimdi pes ediyorsunuz? Zaten zaman harcadığınız için hiçbir şey elde etmeden vazgeçmek istemiyorsunuz ve beklemeye devam ediyorsunuz. Bu noktada vazgeçmek istiyorsunuz ancak vazgeçtiğiniz anda, bekleseydiniz her şeyin yükleneceği saniyenin geldiğini biliyorsunuz.
Hizmet çalışanları, içerikleri önbellekten yayınlamanıza olanak tanıyarak sayfa yükleme sorununu çözer. Peki sayfanın sunucuya bir şey göndermesi gerektiğinde ne olur?
Bu aşamada, kullanıcı bir iletide "gönder"e bastığında, işlem tamamlanana kadar döner simgeye bakması gerekir. Kullanıcı, sekmeden çıkmaya veya sekmeyi kapatmaya çalışırsa onbeforeunload kullanarak "Hayır, bu döndürücüye daha fazla bakmanızı istiyorum. Üzgünüz". Kullanıcının bağlantısı yoksa "Maalesef siz daha sonra tekrar gelip denemelisiniz" deriz.
Bu çöp. Arka plan senkronizasyonu daha iyi performans elde etmenizi sağlar.
Çözüm
Aşağıdaki videoda, yalnızca emoji kullanan bir sohbet demosu olan Emojoy gösterilmektedir. Progresif web uygulaması olan bu uygulama, önce çevrimdışı olarak çalışır. Uygulama, push mesajları ve bildirimleri ile arka plan senkronizasyonunu kullanır.
Kullanıcı, bağlantısı olmadığında mesaj göndermeye çalışırsa bağlantısı olduğunda mesaj arka planda gönderilir.
Arka plan senkronizasyonu, Mart 2016'dan itibaren Chrome 49 ve sonraki sürümlerde kullanılabilir. Aşağıdaki adımları uygulayarak bu işlemin nasıl yapıldığını görebilirsiniz:
- Emojoy'u açın.
- Çevrimdışı olun (uçak modunu kullanarak veya yerel Faraday kafesinizi ziyaret ederek).
- Mesaj yazın.
- Ana ekranınıza geri dönün (isteğe bağlı olarak sekmeyi veya tarayıcıyı kapatın).
- İnternete bağlanın.
- İletiler arka planda gönderilir.
Bu şekilde arka planda gönderme yapabilmek de performansta bir iyileşme 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 her şeyi yapma özgürlüğü veren düşük düzey bir özelliktir. Kullanıcının bağlantısı olduğunda bir etkinliğin tetiklenmesini istersiniz. Kullanıcının zaten bağlantısı varsa bu işlem hemen gerçekleşir. Daha sonra o etkinliği dinliyor ve ne isterseniz yapacaksınız.
Push mesajlaşmada olduğu gibi, etkinlik hedefi olarak bir hizmet çalışanı kullanır. Bu sayede sayfa açık değilken de ç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! Yukarıdaki örnekte doSomeStuff(), yapmaya çalıştığı işlemin başarılı olup olmadığını belirten bir promise döndürmelidir. İşlem başarılı olursa senkronizasyon tamamlanır. Bu işlem başarısız olursa yeniden denemek için başka bir senkronizasyon planlanır. Yeniden deneme senkronizasyonları da bağlantı kurulmasını bekler ve eksponansiyel geri çekme uygular.
Senkronizasyonun etiket adı (yukarıdaki örnekte "ilkSenkronizasyonum") belirli bir senkronizasyon için benzersiz olmalıdır. Beklemede olan bir senkronizasyonla aynı etiketi kullanarak senkronizasyona kaydolduğunuzda bu senkronizasyon mevcut senkronizasyonla birleştirilir. Yani kullanıcı her ileti gönderdiğinde "gelen kutusunu temizleme" senkronizasyonuna kaydolabilirsiniz. Ancak kullanıcı çevrimdışıyken 5 ileti gönderirse çevrimiçi olduğunda yalnızca bir senkronizasyon alırsınız. 5 ayrı senkronizasyon etkinliği istiyorsanız benzersiz etiketler kullanın.
Minimum düzeyde işlem yapan basit bir demo burada verilmiştir. Bildirim göstermek için senkronizasyon etkinliği kullanılır.
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 sayfaya gitse veya sekmeyi kapatsa bile sunucuya ulaşmasını istediğiniz her şey. Sayfa bunları indexedDB'deki bir "giden kutusu" mağazasında depolayabilir. Hizmet çalışanı da bu verileri alır ve gönderir.
Ancak küçük veri parçaları almak için de kullanabilirsiniz...
Başka bir demo!
Bu, Sayfa Yüklemeyi Güçlendirme için oluşturduğum çevrimdışı wikipedia demosudur. O zamandan beri arka plan senkronizasyonu özelliğini ekledim.
Bunu kendiniz de deneyebilirsiniz. Chrome 49 veya sonraki bir sürümü kullandığınızdan emin olun ve ardından:
- Chrome ile ilgili bir makaleye gidin.
- Çevrimdışı olun (uçak modunu kullanarak veya benim gibi kötü bir mobil operatöre katılarak).
- Başka bir makalenin bağlantısını tıklayın.
- Sayfanın yüklenemediği size bildirilir (sayfanın yüklenmesi biraz zaman alıyorsa da bu mesaj gösterilir).
- Bildirimleri kabul edin.
- Tarayıcıyı kapatın.
- Çevrimiçi ol
- 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ı, telefonunu cebine koyup istediği şeyi bulduğunda kendisini uyaracağını bilerek hayatına devam edebilir.
İzinler
Gösterdiğim demolar, izin gerektiren web bildirimleri kullanıyor. Ancak arka plan senkronizasyonunun kendisi bunu desteklemiyor.
Senkronizasyon etkinlikleri genellikle kullanıcının sitenin açık olduğu bir sayfası varken tamamlanır. Bu nedenle, kullanıcı izni istemek kötü bir deneyim olur. Bunun yerine, kötüye kullanımı önlemek için senkronizasyonların ne zaman kaydedilebileceğini ve tetiklenebileceğini sınırlıyoruz. Örneğin:
- Senkronizasyon etkinliğine yalnızca kullanıcının sitenin açık olduğu bir penceresi olduğunda kaydolabilirsiniz.
- Etkinlik yürütme süresi sınırlıdır. Bu nedenle, bir sunucuya x saniyede bir ping göndermek, bitcoin madenciliği yapmak veya başka bir şey yapmak için bunları 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
Özellikle Safari ve Edge henüz servis çalışanlarını desteklemediğinden, tüm tarayıcıların arka plan senkronizasyonunu desteklemesi biraz zaman alacaktır. Ancak aşamalı geliştirme bu konuda yardımcı olur:
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();
}
Hizmet çalışanları veya arka plan senkronizasyonu kullanılamıyorsa sayfadaki içeriği bugün yaptığınız gibi yayınlamanız yeterlidir.
Kullanıcının iyi bir bağlantısı olsa bile arka plan senkronizasyonunu kullanmak faydalıdır. Bu sayede, veri gönderme sırasında gezinme ve sekme kapatma işlemlerine karşı korunursunuz.
Gelecek
2016'nın ilk yarısında Chrome'un kararlı bir sürümünde arka plan senkronizasyonunu kullanıma sunmayı planlıyoruz. Bu sırada "periyodik arka plan senkronizasyonu" varyantı üzerinde de çalışıyoruz. Düzenli arka plan senkronizasyonu ile zaman aralığına, pil durumuna 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'in avantajlarını koruyarak Android ve iOS'teki başarılı modelleri web'e kademeli olarak taşıyoruz.