Web uygulamalarının ve yerel uygulamaların geleceği
Yerel uygulamalar ile web uygulamaları arasındaki fark giderek daralıyor. Öyleyse, web uygulamalarının gelişen dünyasını keşfedelim ve uygulamalarımızı nasıl daha üst seviyelere taşıyabileceklerini görelim.
Statik sayfaların ilk günlerinden bu yana web siteleri ve uygulamalardaki özellikler önemli ölçüde değişti. Son zamanlarda bile, aşağıdakiler de dahil olmak üzere önemli gelişmeler gördük:
Yerel animasyonlar, basit ve esnek düzenler, gerçekçi 3B grafikler ve video akışları yükselişte. "Ama çok az" adına. Ama hâlâ yapılacak çok şey var. Özellikle de web'in yerel işletim sistemleriyle etkili bir şekilde rekabet edebilmesi için.
Uzman yazarlar ve tarayıcı mühendisleri, yerel işletim sistemini ve uygulamalarını daha popüler hale getirecek özellikler arıyorlardı. Şimdi web'in nasıl bir duruş sergileyerek işletim sisteminin yeteneklerindeki boşlukları doldurmaya çalıştığını görüyoruz. Bu durum, temel olarak, bazıları kolayca uygulanabilen, bazıları ise pek de kolay olmayan birkaç özelliğe odaklanılmasına yol açtı. Aşağıdaki başlıklar kapsamlı bir liste olmasa da, ana noktaları kapsıyor.
Yerel programlar şunları içerir:
- Bağlantı: Verilen bir URL ile web uygulamasına yönlendirilmeniz mümkündür.
- Reaktif: Medya sorguları gibi araçlarla, çeşitli biçimlerde (yönlendirme, çözünürlük, ekran boyutu vb.) çalışan karmaşık düzenler oluşturabilirsiniz. Aslında, varsayılan web düzeni modeli doğası gereği duyarlıdır, bu da onu özellikle metin düzenleme için ideal kılar.
- Veri odaklı: HTML ile anlam ve yapı sağlayabilirsiniz ve web, verileri işlemede en iyisidir.
- Gelişmiş: Modern tarayıcılara en son özellikleri sunarken, eski tarayıcılarda da kabul edilebilir bir deneyim sağlayan web uygulamaları tasarlayabilirsiniz.
- Güvenlik: Web, tek kaynaklı güvenlik modeli ve HTTPS kullanarak uygulamaları güvenli tutabilen özellikler sunar. Hadi Şifreleyelim Web uygulamalarının güvenliğini sağlamak artık daha da kolaylaştı.
Ancak web'in bazı avantajları da var, örneğin:
- Kurulum yeteneği: Cihazda uygulama kullanılabilirliği ve işletim sistemiyle tam entegrasyon, iyi bir his için - hatta ana ekranda uygulamalar için küçük bir simge olsaydı ve uygulamalar tam ekran veya küçük bir pencerede açılsaydı daha da iyi olurdu. Bunlar basit şeyler. Değil mi?
- Keşfedilebilirlik: ABD'li internet meraklıları kapalı bir uygulama mağazasına büyük ölçüde karşı çıkıyor. Ancak, uygulama bulma yöntemlerini iyileştirdiklerini inkar edemeyiz; ancak bazıları en iyi kapalı uygulama mağazalarının bile aşırı kalabalık nedeniyle başarısız olduğunu iddia ediyor.
- Çevrimdışı olmak: İnternet bağlantısı dünyanın her yerinde mevcut. Ancak 100%'ye güvenemezsiniz. Çevrimdışı olduğunuz ve başka bir yolunuz olmadığı için bir uygulamayı kullanamamanızdan dolayı sıkıntı çekersiniz.
- Cazibe: Bir kullanıcıyı uygulamanızı kullanmaya ikna ettiğinizde, işin yarısını tamamlamış olursunuz. Peki onları nasıl etkileşimde tutar ve güncel tutarsınız? Yerel uygulama geliştiricileri, kullanıcıları bilgilendirmek için anlık bildirimlerin kullanılabilirliğinden uzun zamandır yararlanıyor.
- Hızlı: Birçok kişi yerel kodun web kodundan daha iyi performans gösterdiğine inanıyor, ancak daha sonra okuyacağınız gibi bu fark hızla kapanıyor.
Pokedex.org sitesi, eğlenceli bir hobi olmasının yanı sıra gelişmiş bir web uygulamasının da en güzel örneğidir.
√Web'i, yerel uygulamalardaki faydalı uygulamalara erişim sağlayacak şekilde tasarlamak istiyoruz; ancak bunu, halihazırda test edilmiş temel özelliklerden ödün vermeden yapmak istiyoruz. Bu harekete, Mozilla ve Google gibi şirketler öncülük ediyor ve Web Uygulaması Devrimi adı veriliyor. Google Destekleniyorlar.
√Bu tür gelişmeleri mümkün kılan yeni teknolojilere daha sonra bakacağız, ancak öncelikle yerel uygulamaların önüne geçebilmek için web'e biraz daha yaklaşalım.
√Not: Yerel işletim sistemlerinin kendileriyle web arasındaki boşluğu kapatmak için üzerinde çalıştığı ilginç şeyler nelerdir? Örneğin, daha derin bağlantılara olanak tanıyan Rube Goldberg benzeri girişim.
Daha önce ne vardı?
Öncelikle çevrimdışı olmanız önemlidir.
Deneyimli hayranlar çevrimdışı çalışan ve yalnızca güncellemeler için varsayılan olarak internete bağlanan web uygulamaları oluşturmak istiyor.
Yerel yeteneklere sahip uygulamalar hiç de yeni bir kavram değil. Başlangıçta, çeşitli yerlerde (örneğin Chrome uygulamasında) ortaya çıkan ve onaylı paketlerin çevrimdışı kullanım için cihaza yüklenmesine ve donanıma erişime vb. olanak tanıyan birçok "web" paketi ve uygulama şablonu vardı.
Cordova ve Electron gibi "hibrit uygulamalar" terimiyle sıkça karşılaşıyoruz. Bunlar, geliştiricilerin web teknolojilerini kullanarak uygulamalar yazmalarına ve ardından bunları iOS ve Android'de çalışan yerel uygulamalara aktarmalarına olanak tanır. Bu tür uygulamalar oldukça popülerdir. Ancak aynı uygulamanın birden fazla sürümünün derlenip dağıtılmasını gerektirirler ve bu tür uygulamaların destekleyebileceği işlevsellik konusunda sınırlamalar vardır. Hepimizin bildiği gibi, "Bir kez yaz, her yerde çalıştır" ifadesi tamamen doğru değildir.
Her şeyden önce, tek sayfalık uygulamaların da değinmeye değer olduğunu söylemeye gerek yok. Tek bir HTML sayfası, uygulamanın ana sayfası olarak kullanılabilir ve XHR (veya benzeri) kullanarak farklı görünümleri dinamik olarak yükleyerek web uygulamalarını daha hızlı ve daha duyarlı hale getirebilir. Bu tür uygulama modelleri, Ember gibi popüler framework'ler tarafından desteklenir. JS ve AngularJS'nin yanı sıra çevrimdışı öncelikli uygulamalar, gelişmiş web uygulamalarının büyük bir bölümünün temelini oluşturur.
Kurulum ve kurulum yetenekleri
Gelişmiş Web Uygulamaları'nın ilk bölümünde kurulum ve yapılandırmaya bakacağız. Bu, web uygulaması hakkında simgeler, ad ve uygulama açıldığında kullanılacak görüntüleme modu gibi bilgileri içeren bir JSON dosyası oluşturan web uygulaması görünümünü kullanmanıza olanak tanır:
Bu tür kodlar, uygulamanın ana işletim sistemiyle daha fazla bütünleşmesini (ana ekranda simge, tarayıcı yerine tam ekran açılması vb.) sağlamak için kullanılabilir ve ayrıca uygulama listesinde daha iyi bulunabilirlik sağlar; örneğin, arama motoru sonuçlarında görünür.
Bu bilgi halihazırda telefonlardaki Opera ve Chrome'da platformlar arası entegrasyon için kullanılıyor; yakında Firefox desteği de gelecek.
Çevrimdışı
Ve günümüze hızlıca ilerleyelim; Firefox, Chrome ve Opera'da geliştiricilerin AppCache ve daha birçok özellik gibi çalışan çevrimdışı uygulamalar yazmalarına olanak tanıyan yeni bir teknoloji olan hizmet uygulamalarımız var. Bu, en düşük API seviyesi ve dolayısıyla çok daha karmaşık bir yapı. Ancak geliştiricilere, hizmetlerinin ne yapmasını istedikleri konusunda daha fazla güç sağlıyor.
Öte yandan Varlık Depolama bambaşka bir konu. Bir süreliğine AppCache gibi bir çözüm sorunu çözecek gibi görünüyordu, ancak bir uygulamayı başlatmanın bir yolu olduğu varsayımı çok fazlaydı ve geliştiricilerin olup bitenler üzerinde yeterli kontrolü yoktu.
Çevrimdışı web sorunu, ilk bakışta ne kadar basit görünse de, inanılmaz derecede uzun süredir devam ediyor. Sorun şu ki, etkili bir çevrimdışı teknoloji seti uygulamak kolay değil. Büyük miktarda veriyi çevrimdışı depolamak da sorun değil. Modern tarayıcılar bir süredir IndexedDB gibi API'lere (uygulama programı arayüzleri) sahip ve Web Depolama desteği IE8'den beri mevcut.
Sunucu uygulaması, belirli bir iş parçacığında çalışan, ayrı bir dosyada yazılmış bir JavaScript parçasıdır. İnternet ile uygulamalarınız (ve tarayıcınız) arasında bir proxy sunucusu görevi görür. Bir istek yapıldığında, sunucu uygulaması isteği yakalayabilir ve kullanım için tarayıcıya gönderilmeden önce özelleştirebilir.
Servis programını kullanmak için öncelikle şunu çalıştırmanız gerekir: () gezgin. hizmet Çalışanı. kayıt olmak Ana sayfadan kayıt olun.
gezgin.hizmet çalışanı.kayıt olmak(‘'sw.js'’)
.Daha sonra(işlev(kayıt) {
// Uygulamayı başlatmak için bir şey yapın
});
Ardından, yardımcı programlar bölümündeki yükleyiciyi kullanarak kurulumu gerçekleştirdim. Bazen bu temel dosyalar, Cache API'yi kullanan tüm uygulamalar tarafından depolanır (bu API, iletişim uygulamalarından bağımsız olarak kullanılır).
Bu.addEventListener(‘'düzenlemek'’, işlev(etkinlik) {
etkinlik.waitUntil(
önbellekler.açık(‘'v1'’).Daha sonra(işlev(önbellek) {
geri dönmek önbellek.Tümünü ekle([
‘'/sw-testi/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
Ve bir olay dinleyicisi yanıtından sonra, servis uygulaması, oluşan isteklere yanıt olarak kod gönderir ve geliştiricilerin yanıttaki sonucu özelleştirmesine olanak tanır. Böylece bir geliştirici, çok fazla değişmemiş dosyaların (örneğin kullanıcı arayüzü görünümü) kurulumda depolanmasını isteyebilir ve gerektiğinde depoda depolanan sürümleri (çevrimiçi sürüm yerine) kullanabilir. İşte, çevrimdışı uygulamalar.
Bu.addEventListener(‘'gidip getirmek'’, işlev(etkinlik) {
değişken cevap;
etkinlik.cevaplaİle(önbellekler.kibrit(etkinlik.rica etmek).yakalamak(
// İstenen dosyanın bulunduğu durumu ele almak için kod yazın
// önbellekte çevrimdışı olarak depolanmamıştır
);
});
Servis uygulamalarının yalnızca HTTPS iletişimiyle çalıştığına dikkat edilmelidir.
↑ Yukarıdaki diyagram bir servis uygulamasının kurulum döngüsünü göstermektedir ↑
Kullanıcıyla yeniden etkileşim kurun
Yerel işletim sistemleri uzun zamandır anlık bildirimlere (uygulama kapalıyken bile) güveniyor. Bu, bir sunucunun istemci sisteme kullanıcıyı değişikliklerden haberdar etmek için mesaj gönderme yeteneğidir. Belki bir haber uygulaması kullanıcıya yeni bir güncelleme göndermek istiyordur? Ya da belki Pokémon oyununuz güncelliğini yitirmiştir ve bakıma ihtiyacı vardır? Artık web uygulamaları için de bu özelliklere sahibiz.
Bu programı kullanmak için, daha önce açıklandığı gibi, programlar sayfasından bir servis programı yüklenip etkinleştirilmelidir. Daha sonra, programa abone olarak programı kullanabilirsiniz. Formülü kullanabilirsiniz: () ServiceWorkerRegistration.pushManager.subscribe İşi yapmak için kullanılır:
gezgin.hizmet çalışanı.hazır.Daha sonra(işlev(kayıt) {
kayıt.pushManager.abone({userVisibleOnly: doğru})
.Daha sonra(işlev(abonelik) {
// Aboneliğe bağlı olarak kullanıcı arayüzünü vb. güncelleyin
// Sunucudaki mevcut kullanıcıyı abone etmek için durumu güncelle
değişken uç nokta = abonelik.uç nokta;
değişken anahtar = abonelik.Anahtar al(‘'p256dh'’);
güncelleme durumu(uç nokta,anahtar,‘'abone'’);
})
});
Bu yöntem, paylaşım sorununu çözmek için kullanılan bir tür teminat gönderir. Bir uç nokta özelliğine (sunucuya işaret eden benzersiz bir URL içerir) ve bir yönteme sahiptir. getKey(), Şifreleme amacıyla genel bir anahtar oluşturmak için kullanılır. Her ikisinden de izin almanız gerekir ve ardından sonuçlar uygulama sunucusuna gönderilir.
Sunucuya bir uyarı mesajı göndermek için uç nokta adresine bir istekte bulunun. Bu, sunucudan servis uygulamalarına bir mesaj gönderecektir. İsterseniz, mesajla birlikte veri de gönderebilirsiniz; bu, bir şifreleme anahtarı kullanılarak yapılmalıdır. Veri tabanlı uyarı mesajları yalnızca Firefox'ta çalışır, ancak diğer tarayıcılar da çok geride kalmamalıdır.
Servis uygulaması, bir push olay işleyicisi kullanarak bir uyarı mesajı dinler. Bir uyarı olayı gönderildiğinde, olay nesnesinin veri özelliğini kullanarak olaya erişebilirsiniz. Ardından, mesaja istediğiniz şekilde yanıt verebilirsiniz; örneğin, bir haber öğesi gönderebilir veya uygulamanızı herhangi bir şekilde güncelleyen ana sayfaya bir mesaj gönderebilirsiniz.
kendi.addEventListener(‘'itmek'’, işlev(e) {
değişken nesne = e.veri.json();
// İtme mesajına bir şekilde yanıt verin
// örneğin bir bildirim veya kanal mesajı
});
Not: Birçok teknoloji hizmeti ailesi (uyarılar vb.) Chrome ve Firefox'ta makul düzeyde destek görmektedir, ancak diğer tarayıcılar da bunları dikkate almaktadır. Uyarı verileri, bu makalenin yazıldığı sırada yalnızca Firefox'ta çalışmaktadır.
Mozilla'nın bu programı, tarayıcılarda modern web uygulama arayüzlerinin uygulanmasındaki ilerleme hakkında bilgi sağlar.
Performans
Performans, web uygulamaları ile yerel uygulamalar arasında uzun zamandır hassas bir nokta olmuştur ve yerel geliştiriciler web'in performans olanaklarından vazgeçmiştir. Ancak son günlerde, tarayıcılarda çok daha hızlı Java motorları ve web içinde animasyon ve 3B grafikler gibi mevcut GPU gücünden giderek daha fazla yararlanabilen öğeleri çalıştırmak için daha hızlı kodlar sayesinde bu fark önemli ölçüde daralmıştır.
Ayrıca, Emscripten gibi teknolojileri kullanarak yerel uygulama kodlarını (C++ gibi) Java'ya dönüştürebiliyoruz. Burada Java'dan bahsettiğimizde, esasen yerele yakın performans için AOT derleme tekniklerinden yararlanabilen, Java'nın son derece optimize edilmiş bir alt kümesi olan asm.js'den bahsediyoruz. O kadar popüler hale geldi ki, yalnızca Firefox'ta değil, Chrome ve Edge'de de destekleniyor ve web, popüler 3B motorları Unity ve Unreal için bir yayınlama hedefi olarak asm.js'yi ekledi.
Ve yeni nesil geliyor; bazı tarayıcı satıcıları, Emcscripten'e benzer bir şey yapacak olan WebAssembly'yi kurmak ve uygulamak için ortaklıklar kuruyor. Ancak daha hızlı, daha iyi standartlar ve daha yüksek performansla.
Bu, wasm formatıyla (asm.js) yerine kullanılır, çünkü daha iyi ayarlara sahiptir, geçerli wasm çıktısı üreten derleyicilere güvenebilmeliyiz ve tarayıcılar, hangi derleyicinin ürettiğinden bağımsız olarak, bunu tutarlı bir performansla çalıştırmalıdır.
Sonuç
Gördüğünüz gibi, web gelişiyor ve sevdiğimiz platformların geleneksel olarak sıkıntı çeken bazı eksikliklerini gidermek için tasarlanmış heyecan verici yeni teknolojiler ortaya çıkıyor. Ancak performansları, abartılanların çok ötesinde. Bu, web uygulamalarının yerel uygulamalarla gururla yan yana durmasını sağlıyor. Tabii web'i başlangıçta harika yapan şeyleri gözden kaçırmazsak.
