Arka Plan Senkronizasyonu, kullanıcının bağlantısı sabit olana kadar işlemleri ertelemenize olanak tanıyan yeni bir web API'sidir. Bu sayede kullanıcının göndermek istediği her şey gerçekten gönderilir.
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.
- Telefonu tekrar cebe koydu.
- Hayata devam edin.
Maalesef bu deneyim, zayıf 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?
Şu anda kullanıcı bir mesajı "gönder" dediğinde, işlem tamamlanana kadar bir dönen imleci izlemek zorunda kalıyor. Kullanıcılar sekmeden çıkmaya veya sekmeyi kapatmaya çalışırsa onbeforeunload kullanarak "Hayır, bu döndürücüye daha fazla bakmanızı istiyorum. Üzgünüm". Kullanıcının bağlantısı yoksa "Maalesef siz daha sonra gelip tekrar denemeniz gerekiyor" deriz.
Bu saçmalık. Arka plan senkronizasyonu, daha iyi sonuçlar almanızı sağlar.
Çözüm
Aşağıdaki videoda, yalnızca emoji kullanılan 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 ileti göndermeye çalışırsa bağlantısı olduğunda ileti 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 özelliğin nasıl çalıştığını görebilirsiniz:
- Emojoy'u açın.
- Çevrimdışı olun (uçak modunu kullanarak veya yerel Faraday kafesinizi ziyaret ederek).
- 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.
- Mesaj arka planda gönderilir.
Bu şekilde arka planda gönderme yapabilmek de performansta bir iyileşme sağlar. Uygulamanın, mesaj gönderme konusunda bu kadar büyük bir sorun yaşamaması gerekir. Bu nedenle, mesajı hemen çı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. Ardından, bu etkinliği dinler ve yapmanız gerekeni yaparsı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. Senkronizasyonların yeniden denenmesi de bağlantıyı bekler ve üstel geri yükleme kullanır.
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 ömrünün ötesinde önemsediğiniz tüm veri gönderme işlemlerini planlamak için bu özelliği 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 Hızlandırma 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 demolarda, izin gerektiren web bildirimleri kullanılıyor ancak arka plan senkronizasyonu için izin gerekmiyor.
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 sunucuyu x saniyede bir pinglemek, 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 elbette 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 edilme isteğinde bulunabilir ancak tarayıcı bu siteyi yalnızca 07:00'de okuduğunuzu biliyorsa senkronizasyon her gün 06:50'de tetiklenir. Bu fikir, tek seferlik senkronizasyondan biraz daha uzakta olsa da yakında kullanıma sunulacak.
Web'in avantajlarını koruyarak Android ve iOS'teki başarılı modelleri web'e kademeli olarak taşıyoruz.