Mobil web'in yaklaşan dalgasını hiç şüphesiz duymuşsunuzdur. Muhtemelen duyduğunuz en yaygın şey, mobil web erişiminin hızla artması ve tüm web trafiğinin yaklaşık yarısının artık telefon veya tablet üzerinden gerçekleşmesidir. Bir Pew Araştırma Merkezi'nden Şubat 2018 raporu Tüm Amerikalıların% 95'inin bir cep telefonuna sahip olduğunu, Amerikalıların akıllı telefonlarla payının% 77 olduğunu unutmayın.
Mobilin etkisini görmek için uzağa bakmanıza gerek yok. Kendi davranışınıza ve ailenizin davranışına bakın. Aralık 2016'da, comScore, 17 yaşın üzerindeki ortalama bir Amerikalının günde iki saat 51 dakikasını telefonunda geçirdiğini bildirdi (Englais).
Statcounter.com Global Web trafiğinin en az bir yıl boyunca çoğunlukla mobil cihazlardan geldiğini belirtti (Şubat ayında 51,95% 2018).
Mobil kullanıcılarınızın telefonlarında saklamaları için yerel bir uygulama geliştiremeyeceğinizi düşünseniz de, tüm işletmeler için harika bir alternatif var: Progresif Web Uygulamaları. Belki Progresif Web Uygulamalarını (PWA) ve insanların işlerini büyütmek için bunları nasıl kullandığını duymuşsunuzdur. Bu makalede, PWA'lar hakkında biraz daha fazla bilgi edinecek ve neden 2018'de kullanımları hakkında daha fazla düşünmeniz gerektiğini öğreneceksiniz.
Bazı tanımlar
Progresif Web Uygulamaları (PWA), mobil cihazlarda web sitesi performansını iyileştirmek için orijinal olarak Google tarafından geliştirilen bir web standartları koleksiyonudur. Bu nedenle, web siteleri, Apple'ın App Store veya Google Play'de bulabileceğiniz özel mobil uygulamalar gibi çalışır.
başka tanım Hintli otel zinciri Treebo için geliştiriciler: "PWA'lar, daha sürükleyici bir yerel deneyim sağlayan özelliklerle kademeli olarak geliştirilen tek sayfalık uygulamalardır. »
Bunu biraz azaltarak, mobil cihazlardaki PWA'lar, okuyucularınızın ve müşterilerinizin sitenizin ana sayfasını hızlı bir şekilde yüklemesine ve mobil cihazda yerel bir uygulamanın kullanacağı özelliklerin çoğunu kullanmasına olanak tanır. Cihaz internete bağlı olmasa bile siteniz tarayıcının dışında bulunabilir.
Diğer tanımlar
Bir PWA'nın temel teknik parçalarından bazıları şunları içerir:
Hizmetler İşçiler PWA'larla ilişkili anahtar teknolojidir. Bunlar, PWA'ların ağ dışında çalışmasına izin verir.
Manifest dosyaları cihazdaki uygulamayı cihaza bağlayan simgeyi ve adı içerir. Site Web. Geliştirici, müşteri deneyiminizi geliştirmek için buraya tasarım öğeleri de ekleyebilir.
Push bildirimleri Kullanıcılarınızla iletişim kurabilir (izinleriyle), böylece geri gelirler.
Bazı nedenler
Öyleyse siteniz neden bir PWA içermelidir? Oldukça basit.
Daha iyi performans - masaüstünde bile!
Kazanmak için sınırlı bir süreniz olduğunu biliyorsunuz ziyaretçi ilk kez - potansiyel bir müşteri ayrılmadan ve arama sonuçlarındaki bir sonraki siteyi ziyaret etmeden önce altı saniyelik yükleme. Mobil kullanıcılar daha da sabırsız; bir sitenin yüklenmesi 3 saniyeden uzun sürerse potansiyel kullanıcılarınızın yarısı siteden ayrılacak!
İyi haber: ilerici bir web uygulaması oluşturmak için yaptığınız değişiklikler sitenizi hızlandıracak!
Örnek: Hintli otel şirketi Treebo, PWA'larını oluşturarak mobil şarj süresini altı saniyeden 1,5 saniyeye düşürdü. Site artık bir saniye içinde masaüstüne yükleniyor! Teknik ekipleri, sitenin arama sıralamalarının arttığını ve aylık dönüşüm oranının iki katından fazla arttığını bildirdi!
Çevrimdışı kapasite
Bunu yapmak için PWA'nın İnternet'te olması gerekmez. Kullanıcılarınız, cihazlarından veya masaüstlerinden uygulamanın tüm içeriğine erişebilir.
Aslında, bir PWA ile ilgili en güzel şeylerden biri, müşterinizin siteyi cihazlarının ana sayfasına kaydedip daha sonra ürününüzü satın almak veya daha fazla bilgi almak için kullanabilmesidir. .
Örneğin, CNET Tech Bugün sitenin günlük ekmeği olan teknoloji ile ilgili haberlerin günlük bir özetini sunar. Siteyi bir Android cihazda Google Chrome ile açarsanız ve ekranın en altına kaydırırsanız şunu görürsünüz:
basın Ana ekrana ekle Tech Today aşamalı web uygulamasını cihazınıza indirmek için. Güncel en iyi 10 haberi yüklemek için simgeye dokunun. Her hikayeyi okumak için sola kaydırın. Tarayıcınızda CNET ana sayfasını açmak için CNET logosuna dokunun.
Not : Firefox'ta, PWA içeren sitelerin doğrudan adres çubuğunda "Giriş sayfasına ekle" simgesi (küçük bir kutuda artı işareti) bulunur. PWA zaten yüklüyse, adres çubuğundaki Android logosu sizi PWA'ya götürür.
Sitenizin ihtiyaç duymadığı bir şey var: "Uygulamamızı indirin" widget'ları sayfanızda yer kaplar (genellikle kullanıcıların dikkatini dağıtan iTunes ve Android logoları ile). Chrome, bir kullanıcının PWA sitenizi haftada birkaç kez açtığını fark ederse, sizden PWA'nızı eklemenizi ister. Güncellemeler de otomatiktir.
Karmaşık programlama dillerine gerek yok
İşletmeniz için yerel bir mobil uygulama oluşturmayı düşünmüş olabilirsiniz, ancak bir mobil uygulama oluşturmanın bir mobil uygulama oluşturmaktan farklı bir hayvan olduğunu gördünüz. Site Web. Sitenizi sürdürmek için bir web tasarım/geliştirme ajansıyla çalışıyorsanız, ana akım mobil satıcılar için bir uygulama oluşturma becerilerine sahip olmaları gerekmez.
Yazılımınızın Apple App Store'da görünmesi için geliştiricilerinizin Apple Developer Network'e kaydolması, Apple Developer Tool'u (yalnızca Mac'te çalışır) kullanması ve şu dilleri bilmeleri gerekir: Apple onaylı programlama: Swift veya Objective C.
Android için programlama biraz daha kolaydır (geliştirici onayı gerekmez), ancak Android uygulamalarının büyük çoğunluğu, öğrenmesi zor bir dil olabilen Java ile yazılmıştır.
Uygulamanın Apple veya Android çevrimiçi mağazalarında görünmesi için, tamamlanan uygulamanın ilgili mağazanın koruyucularından onay alması gerekir.
Buna karşılık, progresif web uygulamaları popüler web dilleri kullanılarak oluşturulur: HTML, CSS (Basamaklı Stil Sayfaları) ve JavaScript. Kısacası, yeni başlayan web geliştiricileri bile yüksek kaliteli PWA'lar oluşturabilir.
Özellikle, WordPress siteniz için bir PWA yapmak için çok fazla bilgisayar eğitimine ihtiyacınız yoktur. Alt tema kullanarak sitenizin biçimini zaten değiştirdiyseniz, bir PWA dosyası da oluşturabilirsiniz. Kodlama sorunlarını başka bir makalede ele alacağız.
Teknoloji devlerinin desteğini arttırın
Standartların standart haline gelmesi uzun zaman alır. Google, PWA'ları ilk kez 2015'te tanıttı.
Uzun bir süredir Chrome, PWA'ları destekleyen tek tarayıcıydı, ancak bu değişmek üzere. Son aylarda:
- Mozilla, Firefox 58’e PWA desteği ekledi
- Apple, yakın zamanda iOS’taki Web uygulamalarına destek verdiğini açıkladı
- Microsoft, PWA'yı bu yılın sonunda piyasaya sürülecek olan Windows 10'in bir sonraki sürümünde (2018) destekleyecektir.
Microsoft, diğer işletim sistemi satıcılarından daha ileri giderek, "yüksek kaliteli" PWA'ların yakında cep telefonlarında ve masaüstlerinde Windows 10 uygulama mağazasına entegre edileceğini söyledi.
WordPress ve PWA'lar
WordPress, temel uygulamada aşamalı web uygulamaları oluşturmayı henüz tam olarak desteklemiyor. Jetpack ekibi, gelecek yıl PWA işlevselliği eklemeye kararlıdır. Bu, WordPress'in Javascript yazılımı tarafından desteklenmektedir.
Geliştirici: Jetpack "PWA Özelliklerini Hazır Olduğu An Kademeli Olarak Sunar" Diyor Geliştirici WordPress VIP blogundaki bir makalede Dan Walmsley . Geliştiriciler, 5.6.0 sürümünden bu yana Jetpack'in manifest modülünü kullanarak manifest dosyaları ekleyebilirler ve aşamalı görüntü yüklemeyi başlattılar, bu da üzerinde çok sayıda görüntü olduğunda bile site yüklemesini daha hızlı hale getiriyor. sayfa. Bu yıl daha fazla özellik sunulacak.
Birkaç eklenti, PWA işlevselliği eklemeye çalışıyor, ancak yoğun bir şekilde benimsenmedi.
- WordPress Optimizasyon aracı, bir çalışma ve bildirim aracı sağlar.
- Super Progressive Web Apps, diğer özelliklerin yanı sıra bir bildirim ve ana ekrana bir Ekle düğmesi oluşturur.
- WordPress Mobile Pack ayrıca PWA özelliklerini de ekler
PWA'yı nasıl kullanacaksınız?
Bu eğitimde Progresif Web Uygulamaları hakkında biraz bilgi edindiniz ve neden bir tane eklemelisiniz? Site Web şirketinizin:
- Mobil cihaz trafiğinin büyüyen dalgası
- Web siteniz için daha iyi performans - mobil ve masaüstü
- Cihaz çevrimdışıyken bile kullanılabilirlik
- Standart web özelliklerini kullanır: HTML, CSS ve Javascript. İnşa etmesi daha ucuz
- Tarayıcılar ve işletim sistemleri için artan destek
Belki şimdi WordPress'te nasıl PWA yapılacağını bilmek istersiniz? Veya geliştiricilerinize nasıl yapılacağını gösterin? Bu başka bir öğreticinin konusu olacak.
