UX, şimdi bir süredir modern web geliştirmenin odak noktası olmuştur. Bu, sayfa yükleme hızı, okunabilirlik, kullanılabilirlik ve tasarım gibi çeşitli faktörlerden etkilenir. Ama şimdi daha fazla kullanıcı mobil web taramasını tercih et Masaüstü bilgisayarları kullanarak, herhangi bir web sitesi - bu bir niş blog veya bir e-ticaret mağazası olsun - mobil uyumluluğa öncelik vermeye başlamalıdır.
Günümüzde, mobil duyarlı bir tema uygulamak ve Google gibi araçlar kullanmak çok kolay. Mobil Uyumluluk Testi Sitenizi nasıl optimize edeceğiniz konusunda ek öneriler almak için Ancak, bir sonraki seviyeye geçmek istiyorsanız, mobil kullanıcılarınıza yeni ve akılda kalıcı yeni deneyimler sunmak için bir Progresif Web Uygulaması (PWA) geliştirebilirsiniz.
Bir PWA, uygulamaya benzer özellikleri etkinleştirmek için modern web teknolojilerini kullanır. Geleneksel mobil web sitelerinin aksine, bir PWA'nın yeni içeriği yüklerken sayfanın tamamını yenilemesi gerekmez. Ayrıca, erişilebilir olması için İnternet bağlantısına da ihtiyaç duymaz. Ayrıca kurulabilirler, yani kullanıcılar ana ekran kısayolu ekleyerek bunları kolayca yeniden kullanabilirler.
İlerici web uygulamaları, mobil web için bir sonraki büyük şey olma potansiyeline sahiptir. Bu, aslında 2015 yılında Google tarafından birkaç yıl önce önerildi. Ancak, kısa bir süre içinde, zaten oldukça ilgi çekiciydi, çünkü uygulamanın geliştirilmesi ve uygulamanın kullanıcı deneyimi için nispeten kolay.
-Rahul Varshneya, uygulama geliştirme şirketinin kurucu ortağı Arkenea .
PWA, gelecekte mobil web varlığınızın yönünü yönlendirebilecek büyük bir projedir. Ancak PWA'lara tamamen yeniyseniz, sizi doğru yola koyacak 7 araç ve kaynak:
Bir PWA geliştirmeye gelince, neler yapabileceğine dair daha derin bir anlayışa sahip olmanız gerekir.
PWA'ları çalışırken görmek için PWA.rocks iş, oyun, alışveriş ve sosyal gibi çeşitli kategorilerdeki örnekler için. Bu, gelecekteki PWA'nızın nasıl görüneceğini görselleştirmenize yardımcı olacaktır. Ayrıca, PWA'nızın mobil kullanıcılara neler sunacağını kavramsallaştırırken mevcut örneklerden ilham alabilirsiniz.
Nakavt Model-Görünüm-Görünüm Modeli veya MVVM bağlamaları ile size yardımcı olabilecek ücretsiz, açık kaynak bir araçtır. Bu, viewmodel özellikleri tarafından kontrol edilen görünümleri ve bildirim bağlantılarını tanımlamanıza izin vererek JavaScript kullanıcı arayüzlerini kodlama işlemini basitleştirmenizi sağlar.
Platform, tüm önemli tarayıcılarda ve herhangi bir web çerçevesinde çalışan JavaScript’te çalışır. Nakavt kütüphanesi, kapsamlı yeniden yazmalar olmaksızın mevcut web siteleriyle kolayca entegre edilebilir.
PWA oluşturmanın en hızlı yolu PWABuilder ve hızlı bir şekilde çevrimdışı işlevsellik için bir hizmet görevlisi oluşturun; bu, kullanıcıların internet bağlantısını kaybederken web sunucunuzdan “offline.html” dosyasını çekip sunarak çalışır. Ayrıca, PWA'nızı Android ve iOS cihazlar için uygulama mağazasına da gönderebilirsiniz.
PWABuilder'ı kullanmak için tek yapmanız gereken, web sitenizin URL'sini eklemek ve adınız, site açıklamanız ve tercih edilen simgeniz gibi ek bilgileri doldurmaktır. Ayrıca, PWA ekran yöneliminiz, diliniz ve arka plan renginiz gibi belirli özellikleri kolayca değiştirebilirsiniz. Platform, sağladığınız bilgilere göre otomatik olarak bir bildirim oluşturacaktır.
JavaScript genellikle web geliştirmeyi öğrenmek isteyen öğrenciler tarafından öğrenilen tanıtım dilidir. Tecrübeli bir Java veya .NET geliştiricisiyseniz, o zaman angularjs web uygulamaları için kullanabileceğiniz en iyi JavaScript çerçevelerinden biridir. Öyle olsa bile, web siteleri, platform etrafında yolunuzu öğrenmenize yardımcı olacak bir dizi rehber, eğitici ve kaynak sunar.
En son sürüm olan Angular v4.0, mobil veya masaüstü için geliştirdiğinizde aynı ortamı sağlar. Angular'ın ihtiyaçlarınız için çok karmaşık olduğunu düşünüyorsanız, bunun yerine Tepki - UI geliştirmeye uyarlanmış bir JavaScript kitaplığı. Başka bir alternatif Polimer PWA geliştirme sürecini hızlandırabilecek şablonlar ve diğer yeniden kullanılabilir bileşenler sağlayabilir.
Bir PWA, kendinden emin blogcular veya bağlı pazarlamacılar için tam olarak bir DIY projesi değildir, ancak yine de doğru kaynaklarla yapılabilir. İçerik yönetim sistemlerinde tecrübeniz varsa, ancak web uygulamalarını geliştirmek konusunda clueless değilseniz, temel bilgileri aşağıda bulabilirsiniz. Google Geliştiricileri Kod yazmayı öğrenmenize yardımcı olabilecek bir kaynak kütüphanesi.
Google Developers'ın, PWA'ların nasıl çalıştığı, nasıl oluşturulacağı ve doğru şekilde nasıl çalıştırılacağı konusunda kapsamlı bir eğitici var. Ayrıca “ana ekran banner'ına ekle” özelliğini etkinleştirmek ve HTTPS'yi kullanmak gibi diğer temel konuları da kapsamaktadır.
webpack yazı tipi ve resim gibi kod olmayan varlıklar dahil olmak üzere JavaScript uygulama kaynaklarınızı paketlemek için son derece kullanışlı bir araçtır. Bunlar, daha hızlı yüklenmelerine izin veren JavaScript nesneleri olarak ele alınacaktır. Platform ayrıca bağımlılıkları yönetmeyi önemli ölçüde kolaylaştırıyor.
Webpack'in dik öğrenme eğrisine sahip olduğunu unutmayın, bu da dersler ve rehberler için tarama saatlerine bakmanız anlamına gelir. Ancak, web sitelerinde bulunan öğrenme kaynakları ve dokümantasyon yeni başlayanlar için uygun değildir. İyi haber ise, Webpack, Angular 4.0'ın dokümantasyon bölümü de dahil olmak üzere diğer sitelerde yaygın olarak kullanılıyor.
En sonunda, GitHub Projelerin depolarını sürdüren topluluk odaklı bir web sitesidir. JavaScript ve PWA servis çalışanları da dahil olmak üzere geniş bir dizi programlama ile ilgili konuları kapsar. Aslında PWA.rocks ve Webpack depolarını platformda bulabilirsiniz. Bu, anlayışınızı derinleştirmenize ve hatta daha fazla gelişime katkıda bulunmanıza yardımcı olacaktır.
Bugün, GitHub'da PWA'lar içeren bir avuç dolum deposu var. Bu projelerden öğrenebilir veya ilk PWA'nızı denerken kendi deponuzu başlatabilirsiniz. GitHub artık, diğer geliştiricilerle uzaktan sorunsuzca işbirliği yapmanıza olanak tanıyan proje yönetimi özelliklerine de sahiptir.
Aşamalı Web Uygulamaları, mobil web deneyimlerinin geleceği olup, şu anda bunları kullanan pek çok marka değildir. Yukarıdaki araçlarla, artık tam bir PWA oluşturma ve yetkili bir varlık oluşturma yeteneğine sahip olursunuz. Sadece PWA araçlarının, kaynaklarının ve uygulamalarının, büyük çevrimiçi tarayıcıların sürekli gelişen teknolojileriyle birlikte geliştiğini unutmayın .