Arka Plan Senkronizasyonu, kullanıcı kararlı bir bağlantıya sahip olana kadar işlemleri ertelemenize olanak tanıyan yeni bir web API'sidir. Bu, kullanıcının göndermek istediği şeyin gerçekten gönderilmesini sağlar.
Sorun
İnternet zaman kaybı için harika bir yerdir. İnternette zaman harcamadan kedilerin çiçekleri sevmemesi, bukalemunların baloncukları sevmesi veya bizim Eric Bidelman'ın 90'ların putt vuruşunun golf kahramanı olduğunu bilemezdik.
Ama bazen, zaman kaybetmek gibi bir amacımız yok. İstenen kullanıcı deneyimi şuna benzer:
- Telefon cebinden.
- Küçük bir hedefe ulaşmak.
- Telefon cebinde.
- Yaşamı sürdür.
Maalesef bu deneyim genellikle zayıf bağlantı nedeniyle bozuluyor. Hepimizin başına gelmiştir. Beyaz bir ekrana veya dönen bir simgeye bakıyorsunuz. Vazgeçip hayatınıza devam etmeniz gerektiğini biliyorsunuz ancak her ihtimale karşı buna 10 saniye daha veriyorsunuz. 10 saniyeden sonra mı? Hiç.
Ama neden şimdi pes etesiniz? Çoktan zaman harcadınız. Hiçbir şey olmadan uzaklaşmak israf olmaz, dolayısıyla beklemeye devam edersiniz. Bu noktaya kadar pes etmek istiyorsunuz. Ancak bıraktığınız anda, yalnızca siz bekleseydiniz her şey yüklenmeden önce ikinci kez yüklenir.
Hizmet çalışanları, bir önbellekten içerik sunmanıza olanak tanıyarak sayfa yükleme kısmını çözer. Peki ya sayfanın ne zaman sunucuya bir şey göndermesi gerek?
Şu anda, kullanıcı bir mesajda "gönder"i tıkladığında, mesaj tamamlanana kadar dönen işarete bakması gerekiyor. Sayfadan çıkmaya veya sekmeyi kapatmaya çalışırlarsa "Hayır, bu döner simgeye biraz daha bakmanız gerekiyor.onbeforeunload Üzgünüm" mesajını görürsünüz. Kullanıcının bağlantısı yoksa kullanıcıya "Maalesef daha sonra geri gelip tekrar denemeniz gerekir" diyoruz.
Bu çöp. Arka plan senkronizasyonu daha iyi performans gösterir.
Çözüm
Aşağıdaki videoda yalnızca emojilerin kullanıldığı bir sohbet demosu olan Emojoy gösterilmektedir. Progresif web uygulamasıdır ve çevrimdışı olarak çalışır. Uygulama push mesajları ve bildirimleri, arka plan senkronizasyonunu da kullanır.
Kullanıcı, internet bağlantısı olmadığında ileti göndermeye çalışırsa bağlantı kurulduğunda ileti arka planda gönderilir.
Mart 2016'dan itibaren Arka Plan senkronizasyonu, Chrome'da 49 ve üzeri sürümlerde kullanılabilir. Aşağıdaki adımları uygulayarak nasıl çalıştığını görebilirsiniz:
- Emojoy'u açın.
- Çevrimdışı olun (uçak modunu kullanarak veya bulunduğunuz yerdeki Faraday kafeslerini ziyaret edin).
- Bir 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.
- Mesajlar arka planda gönderilir.
Arka planda bu şekilde gönderi yapabilmek de performans artışı algısı oluşturur. Uygulamanın, ileti gönderme konusuna çok fazla önem vermesi gerekmez. Bu nedenle uygulama, mesajı doğrudan çıkışa ekleyebilir.
Arka planda senkronizasyon isteğinde bulunma
Gerçek genişletilebilir web stilinde bu, ihtiyacınız olan şeyi yapma özgürlüğü sunan düşük seviyeli bir özelliktir. Kullanıcı bağlantı kurduğunda bir etkinliğin tetiklenmesini istersiniz. Kullanıcı zaten bağlantısı varsa bu işlem hemen gerçekleşir. Sonra etkinliği dinliyor ve ne gerekiyorsa yapıyorsunuz.
Push mesajlaşmasında olduğu gibi, etkinlik hedefi olarak bir Service Worker kullanılır. Böylece, sayfa açık olmadığında ç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ıda doSomeStuff(), yapmaya çalıştığı işlemin başarılı/başarısız olduğunu belirten bir vaat döndürmelidir. Başarısız olursa başka bir senkronizasyon işleminin yeniden denenmesi planlanır. Yeniden deneme senkronizasyonları da bağlantıyı bekler ve üstel geri yükleme 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 kaydolursanız bu etiket mevcut senkronizasyonla birleşir. Yani, kullanıcının her ileti gönderişinde "giden kutusu temizleme" senkronizasyonu için kaydolabilirsiniz 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 istiyorsanız benzersiz etiketler kullanmanız yeterlidir.
En az düzeyde bilgi veren basit bir demoyu burada bulabilirsiniz. Bu demoda, bildirim göstermek için senkronizasyon etkinliği kullanılmaktadır.
Arka plan senkronizasyonunu ne için kullanabilirim?
İdeal olarak, önem verdiğiniz verilerin sayfanın ömrü dışında gönderilmesini planlamak üzere bu aracı kullanmanız önerilir. Sohbet mesajları, e-postalar, doküman güncellemeleri, ayar değişiklikleri, fotoğraf yüklemeleri... Kullanıcı sayfadan ayrılsa veya sekmeyi kapatsa bile sunucuya ulaşmak istediğiniz her şey. Sayfa, bunları indexDB'deki bir "giden kutusu" deposunda saklayabilir ve hizmet çalışanı bunları alıp gönderir.
Bununla birlikte, küçük veri parçalarını getirmek için de kullanabilirsiniz...
Bir demo daha!
Bu, Sayfa Yüklemeyi Güçlendirme için oluşturduğum çevrimdışı wikipedia demosudur. Ben de bu uygulamaya arka planda senkronizasyon özelliği ekledim.
Bunu kendiniz deneyin. Chrome 49 veya sonraki bir sürümü kullandığınızdan emin olun, ardından:
- Herhangi bir makaleye (örneğin Chrome) gidin.
- Çevrimdışı olun (uçak modunu kullanarak veya benim gibi kötü bir cep telefonu operatörüne katılın).
- 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 bu mesaj da görünür).
- Bildirimleri kabul edin.
- Tarayıcıyı kapatın.
- İnternete bağlan
- 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 modeli kullanarak telefonunu istediği zaman geldiğinde uyaracağını bilerek telefonunu cebine atıp hayatına devam edebilir.
İzinler
Gösterdiğim demolar izin gerektiren web bildirimlerini kullanıyor ancak arka plan senkronizasyonunun kendisi bunu yapmıyor.
Senkronizasyon etkinlikleri genellikle kullanıcının siteye açık bir sayfası olduğunda tamamlandığından, kullanıcı izni istemek kötü bir deneyim olur. Bunun yerine, kötüye kullanımı önlemek için senkronizasyonların kaydedilebileceği ve tetiklenebileceği zamanları sınırlıyoruz. Örneğin:
- Senkronizasyon etkinliğine yalnızca kullanıcının siteye açık bir penceresi varsa kaydolabilirsiniz.
- Etkinlik yürütme süresi sınırlı olduğundan x saniyede bir sunucuyu pinglemek, bitcoin veya başka bir para kazanmak için bunları kullanamazsınız.
Elbette bu kısıtlamalar gerçek kullanım durumuna göre gevşetilebilir veya daha sıkı hâle getirilebilir.
Progresif geliştirme
Özellikle Safari ve Edge henüz hizmet çalışanlarını desteklemediğinden tüm tarayıcıların arka plan senkronizasyonunu desteklemesi biraz zaman alacaktır. Ancak progresif geliştirme özelliği şu durumlarda 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 şu anda yaptığınız gibi sayfada içeriği yayınlamanız yeterlidir.
Kullanıcının bağlantısı iyi görünüyor olsa bile arka planda senkronizasyon özelliğini kullanmak iyi bir fikirdir. Çünkü veri gönderimi sırasında sizi gezinmelere ve sekmelerin kapanmasına karşı korur.
Gelecek
2016'nın ilk yarısında, "periyodik arka plan senkronizasyonu" varyantı üzerinde çalışırken arka planda senkronizasyonu Chrome'un kararlı bir sürümüne göndermeyi amaçlıyoruz. Periyodik arka plan senkronizasyonu ile zaman aralığı, pil durumu ve ağ durumuna göre kısıtlanmış bir etkinlik isteyebilirsiniz. Bu işlem için elbette kullanıcı izni gerekir ve bu etkinliklerin ne zaman ve ne sıklıkta tetikleneceği de tarayıcıya bağlıdır. 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 tetiklenir. Bu fikir, tek seferlik senkronizasyondan biraz daha uzak, ama yakında kullanıma sunulacak.
Web'i harika kılan özellikleri koruyarak Android ve iOS'teki başarılı kalıpları adım adım web'e taşıyoruz.