Progressive Web Apps (Aşamalı Web Uygulamaları) ile web site kullanıcılarının çevrimdışı olsa dahi sitenizde gezinebileceğini biliyor muydunuz?
Bu içerikte önemi tam olarak keşfedilmemiş olan PWA konusunu ele aldık. O halde PWA’nın ne olduğunu ve bir web sitesinin PWA kullanıp kullanmadığını nasıl anlayacağınızı incelemeye başlayalım.
PWA Nedir?
PWA, Aşamalı/Kademeli web uygulamaları anlamına gelen Progressive Web Apps teriminin kısaltmasıdır. Bu terim ilk kez Google tarafından 2015 yılında kullanılmıştır. Kullanıcılar bir web sitesine girdiği zaman, mobil uygulamaya giriş yapmış gibi deneyim yaşamasını sağlayan teknolojiye PWA denir.
PWA kullanıcıların hem uygulama hem de web site işlevlerini bir arada kullanmalarını sağlayan ve mobil uygulama deneyimi yaşatan bir teknolojidir.
PWA ile normal mobil uygulamalara özel tüm işlevleri gerçekleştirebilir. Bu işlevsel özellikler kamera ve mikrofon, GPS bilgisi, çevrimdışı kullanım, dosya erişimi ve daha birçok erişimi kapsar.
Progressive Web Apps hakkında bilmeniz gereken şey, bunun bir mobil uygulama değil web uygulaması olduğudur. Modern web teknolojisi sayesinde geliştirilen PWA ile kullanıcılar web sitelerini mobil uygulama gibi görür ve hisseder. PWA bir uygulamaya benzer, çünkü indirilebilir ve bildirim gönderilebilir.
PWA, başta Google olmak üzere pek çok şirketin son dönemde en çok yaygınlaştırmaya çalıştığı bir teknolojidir. AliExpress, Tinder, Uber, Starbucks ve İnstagram’a kadar bir çok dünya devi bu web teknolojisine dahil olmuştur.
Bir Web Sitesinin PWA Olup Olmadığını Nasıl Anlarım?
Web geliştirici değilseniz ve bir web sitesinin kaynak kodunu okuyamıyorsanız, bu web sitesinin PWA teknolojisi üzerine kurulup kurulmadığını tam olarak anlamayabilirsiniz.
Bununla birlikte, kesin bir sonucu garanti etmese de, belirli bir web sitesinin bir PWA olup olmadığına dair size ipucu verecek bazı yöntemler vardır.
Tek Sayfalık Web Sitesi
PWA teknik olarak tek sayfalık bir web sitesidir. Yani tek sayfalık web siteleri PWA’nın doğasına dayanmaktadır. Ancak bu, PWA üzerine kurulmuş bir web sitesinin yalnızca tek bir sayfası olduğu anlamına gelmez.
Bu tarz web sitelerde kullanıcı web sitesini ilk kez yüklediğinde yükleme yalnızca bir kez gerçekleşir. Diğer tüm sayfa yüklemeleri daha sonra Javascript tarafından işlenir. Bu işlem her sayfa değişikliğinde bir sayfanın tüm HTML kaynağıyla birlikte yeniden yüklenmesinin gerçekleştiği normal web sitelerinden farklıdır.
Peki bunu nasıl anlarsınız? Cevap çok basit: tarayıcınızdaki etkin sekmeye bir göz atın. Site bir PWA ise, sayfalar arasında geçiş yaptığınızda site yeniden yüklenmez. Yani tarayıcı sekmesinde yükleme animasyonu yoktur. Bu nedenle PWA sayfaları çok hızlı ve düzgün yüklenir.
Siteyi ilk ziyaret ettiğinizde tüm sayfalar öncen yüklenir ve daha sonradan kullanıma sunulur. Hatta siz çevrimdışı olsaniz dahi bu sayfalar çalışmaya devam eder.
Hizmet Çalışanları (Service Workers)
Hizmet çalışanları terimi insanları değil push bildirimleri ve kaynak önbelleğe almayı destekleyen aşamalı web uygulamalarının arkasındaki teknolojinin adıdır.
Google’a göre hizmet çalışanları PWA teknolojinin merkezinde yer alır. Bir web sitesi bu teknolojiyi kullanıyorsa, PWA olma ihtimali çok yüksektir.
Chrome tabanlı tarayıcılar kullanıyorsanız, Inspector Tool’u kullanarak bunu kolayca kontrol edebilirsiniz.
Bu yöntem belirli bir web sitesinin PWA olma olasılığı hakkında ipucu verir.
HTTPS Protokolü
PWA teknolojisi sadece HTTPS olan web sitelerinde çalışır. Yani bir web sitesinin URL’si http:// ile başlıyorsa PWA olma ihtimali yoktur.
Önemli: Https Bağlantısı, Service Workers (Servis Çalışanları) ve SSL Sertifikası PWA için bir web sitesinde bulunması gereken zorunlu gereksinimlerdir.
PWA Nasıl Çalışır?
PWA beş ana bileşenden oluşur. Bunlar HTTPS, Web Apps Manifest, Service Workers, Responsivenes (Duyarlılık) ve Performans.
HTTPS: PWA için mutlaka web siteleri tarafından kullanılmalıdır ve zorunludur. Web sitenizin PWA testinden geçebilmesi için tüm altyapısında (görsel, css vs) HTTPS kullanması gerekmektedir.
Web App Manifest: Tarayıcıya uygulama hakkında bilgi veren ve yüklendiğinde nasıl davranması gerektiğini söyleyen bir dosya türüdür. PWA’nın olmazsa olmaz bileşenlerindendir. Somut bir şekilde anlatmak gerekirse, uygulamada “ana ekrana ekle” özelliğini kullanabilmek için bu dosya türü mutlaka kullanılmalıdır.
Wep app manifest için farklı cihaz ve tarayıcı boyutlarına göre birden fazla ikon imajı eklenmelidir.
Service Workers: En önemli bileşen diyebiliriz. PWA’nın offline kullanılması, bildirim gönderilmesi ve önbellek teknolojisi bu yapı sayesinde elde edilmektedir.
PWA’nın düzgün bir şekilde kurgulanması için Service Workers’a mutlaka ihtiyaç duyulur. Dolayısıyla PWA’nın gücünü aldığı en önemli kısım service workers kısmıdır.
PWA bir siteye giriş yaptığınıza web sitesini ana ekrana ekle ya da ana sayfaya kısayol oluştur gibi özellikli seçeneklerle karşılaşırsınız. Bu özelliği kullanarak PWA’yı indirebilir ve çevrimdışı olsanız dahi kullanabilirsiniz. Bununla birlikte PWA aracılığı ile web yöneticileri size bildirimde bulunabilirler.
Aşamalı Web Uygulamaları, Google Play Store uygulama pazarından Windows platformuna kadar önemli rekabetlere yön veren teknolojidir. Bu teknolojiyi diğer web site ve uygulamalarından ayıran özellikleri aşağıdaki tabloda inceleyelim.
PWA aşağıdaki nedenlerden dolayı da diğer web sitelerinden üstündür:
- Hız:Aynı içerik göz önüne alındığında, PWA normal web sitelerinden daha hızlı yüklenir. Tüm yükleri önbelleğe aldığı ve gerektiğinde teslim ettiği için ilk yüklemede hızlı, ikinci yüklemede daha da hızlıdır.
- Çevrimdışı Mod: PWA’da çevrimdışı kullanılabilirlik de mümkündür. PWA’yı ilk ziyaretinizde tüm içerikler önceden yüklenir ve daha sonra Javascript kullanılarak ek yüklemeler yapılır, bu da PWA’yı kesintisiz deneyim sunan bir alternatif haline getirir.
- Ana Ekrana Ekleme: Bu işlev mobil kullanıcılardan PWA’yı “yüklemelerini” ister. Kullanıcı istemi kabul ettikten sonra, PWA mobil ana ekranına eklenir ve yüklü diğer tüm uygulamalar gibi çalışır.
- Çapraz Platform: PWA teknolojisi Android, iOS veya Windows gibi herhangi bir mobil platform üzerinden kullanılabilir. Çünkü PWA işletim sistemi tabanlı değil tarayıcı tabanlıdır.
- Güncellik: Kullanıcılar sayfayı yenilediğinde PWA’da yapılan değişiklikler hemen güncellenir.
- İndekslenebilirlik: PWA hala teknik olarak bir web sitesi olduğundan, içeriği Google gibi arama motorlarında dizine eklenebilir ve bulunabilir.
- Yayınlama Zorunluluğu Yoktur: Normal mobil uygulamalar kullanıcılara ulaşmak amacıyla uygulama mağazalarında yayınlanmalıdır. PWA ile uygulama yayınlanma gereksinimi yoktur. Ancak bu PWA’yı Apple Appstore ve Google Play Store gibi uygulama platformlarında yayınlayamayacağınız anlamına gelmez.
- Düşük Geliştirme Maliyeti: PWA geliştirme maliyeti diğer mobil uygulamalara göre nispeten daha düşüktür. Bunun nedeni bir kez geliştirildiğinde onu destekleyen herhangi bir mobil platform ve tarayıcı tarafından sürekli kullanılabilir olmasıdır. Diğer bir neden ise PWA’nın daha yaygın kullanılan ve daha büyük geliştirici tabanına ahip olan programlama dillerini ve teknolojisini kullanmasıdır.
PWA ve SEO İlişkisi
PWA teknolojisinin doğrudan SEO ile bir bağı bulunmamaktadır. Yani PWA’nın bir sıralama faktörü olmadığını (en azından şimdilik) söylemek mümkündür. Hatta PWA Javascript teknolojisini kullandığı için SEO açısından zorlukları da beraberinde getirir.
PWA ile ilgili Jonh Mueller’in yaptığı açıklama ise şu şekildedir:
“PWA’ların şu anda Google Arama’da herhangi bir avantajı yoktur ve bildiğim kadarıyla bunu değiştirmeye yönelik bir plan da yok. Hızlı ve etkileşimli web siteleri oluşturmak için harika yollar olabilir ve çevrimdışı erişim ve bildirimler gibi harika işlevler sağlayabilir. Ancak arama sonuçlarında doğal bir avantajları yoktur.
Ne olursa olsun, geleceğin bu tür sitelerden daha fazlasını getireceğinden eminim, bu yüzden bir SEO’cu olarak bu çalışmaları erken anlamaya başlamak harika bir adım olabilir. Önümüzdeki dönem bu teknolojiyi yapabilme tecrübesi talep göreceğinden çok önemli olmayan bir web sitesi üzerinden bu çalışmaları yapmanızı tavsiye ederim.”
PWA doğrudan arama sonuçlarını etkilemese bile kullanıcı deneyimi ve dönüşüm açısından birçok artıları vardır. Bu da dolaylı yoldan SEO için olumlu etkileri beraberinde getirir.
Ayrıca ana ekrana ikon ekleme özelliği sayesinde de kullanıcılara daha hızlı ulaşabilir ve marka dominasyonunuzu bu sayede artırabilirsiniz.
Özellikle hız konusunda sunduğu avantajları iyi değerlendirmek gerekir. Ancak JS kullanımına dayalı olarak indekslenme problemleri yaşayabilirsiniz. Bu nedenle dikkat edilmesi gereken en önemli nokta bizce burasıdır.
PWA teknolojisini kullanırken SEO açısından dikkat edilmesi gerekenler şunlardır:
- Tüm meta etiketlerin, içeriğin ve linklerin Google tarafından indekslenebilir olması gerekir.
- Her bir sayfanın kendine özel URL yapısı olmalıdır.
- Her sayfada “canonical URL” olduğuna emin olun.
- Sayfa URL’leri ve kaynakların HTTPS kullanması gerekmektedir.
- Sayfaların yüklenme hızı en üst seviyeye çıkarılmalıdır.
PWA Geliştirme Araçları
PWA hızla popülerlik kazanırken E-ticaret geliştiricilerinin çok daha iyi PWA deneyimi yaşatmak için kullanabileceği çeşitli araçlar bulunmaktadır.
Aşağıdaki araçlarla çarpıcı bir PWA oluşturabilir ve E-Ticaret mağazanız için yetkili bir varlık oluşturabilirsiniz.
1.CHROME DEV TOOLS
Chrome DevTools, web uygulamasını incelemenize, sorunları anında belirlemenize ve gidermenize olanak tanıyan hata ayıklama araçları da dahil olmak üzere doğrudan Chrome tarayıcısında yerleşik bir geliştiricidir.
Bir PWA oluşturmak için Service Workers (Servis Çalışanları), Web Uygulaması Bildirimi, Önbellek Depolama ve Anında Bildirim gibi çeşitli teknolojiler gerekir. Chrome DevTools, Uygulama sekmesinde bu temel teknolojilerin her biri için denetçileri koordine eder.
Geliştiriciler uygulama panelini kullanarak, herhangi bir PWA için manifest web uygulaması, servis çalışanları, önbellek dosyalarını inceleyebilir, değiştirebilir ve hata ayıklayabilir:
- Uygulama manifest görünümü, uygulama adı, başlangıç URL’si, renkler, simgeler gibi ilgili bilgileri gösterir. Ayrıca, geliştiricilere “Ana Ekrana Ekle” olaylarında ekle‘yi tetikleme seçeneği de sunar.
- Hizmet Çalışanları bölmesinden, bir hizmetin kaydını silme veya güncelleme, push (bildirim) olaylarını optimzie etme, çevrimdışı gibi çeşitli görevleri gerçekleştirebilirsiniz.
- Önbellek depolama bölmesi, hizmet çalışanlarının önbelleğine bir görünüm sağlar. Geliştiriciler tek bir tıklama ile tüm önbellekleri temiz depolama bölmesinden temizleyebilir.
Tüm optimizasyonlar tamamlandığında PWA sitenizi test etmek için de Chrome DevTools aracını kullanabilirsiniz.
Audit sekmesi altında Progressive Web App’i tıklayarak denetimi başlatabilirsiniz. Test sonucunda hata olup olmadığını da bu sayede analiz etmiş olursunuz.
2.REACT
React platformu, GitHub’da 117.000’den fazla yıldızla en popüler web geliştirme platformudur. Facebook tarafından desteklenen geliştime kütüphanesi, bileşen merkezli bir yaklaşım kullanarak kullanıcı arayüzleri oluşturma esnekliği sağlar.
Mümkün olan en iyi oluşturma performansını sağlamaya odaklanan React, web geliştiricilerinin karmaşık kullanıcı arayüzünü basit bileşenlere ayırmalarını sağlar.
Her bir bileşen JavaScript ile oluşturulmuştur, böylece tüm uygulamayı sıfırdan geliştirmek yerine kodu kullanıcı arayüzlerini oluşturmak için yeniden kullanabilirsiniz.
React gerçek tarayıcı ile geliştirici arasında aracı görevi gören sanal bir tarayıcı (sanal DOM olarak bilinir) oluşturmak için JavaScript’in gücünü kullanır. Herhangi bir görünüm değişikliği ilk olarak bellekte tutulan sanal DOM’a yansıtılır. Bu, yüksek kullanıcı etkileşimi ve görünüm güncellemelerine sahip bir web uygulaması için kullanıcı deneyimini geliştirmek için çok önemlidir.
React, yüksek basitlik ve esnek kullanımı nedeniyle büyük web uygulamaları için çok uygundur. Kullanıcı arayüzüne odaklanarak e-ticaret mağazanız için zengin, ilgi çekici PWA oluşturmanın hızlı ve etkili bir yolunu sunar.
React, Facebook, Instagram, Twitter, Paypal, gibi en iyi şirketler tarafından kullanılarak büyük bir güvenilirlik kazandı.
3.REDUX
React, JavaScript kitaplıklarıyla tek yönlü bir veri akışında dahili olarak yönetildiğinden ileri düzey çalışmalarda uygulamayı takip etmek zor olabilir.
Uygulama büyüdükçe, çok seviyeli bileşenler arasında veri aktarımı yönetilemeyecek kadar karmaşık hale gelebilir. Bu sorunu çözmek için, React, Redux olarak bilinen çözümü sunmuştur.
Redux çoğunlukla React ile birlikte kullanılsa da, başka herhangi bir JavaScript çerçevesi veya kitaplığıyla da entegre edilebilir.
Redux, tutarlı davranan JavaScript uygulamaları yazmak için öngörülebilir bir durum deposu olarak tanımlanır.
Redux ile uygulamanın tüm durumu Mağaza adı verilen tek bir yerde tutulur. Mağaza, tüm uygulama verileri için tek bir kaynak görevi görür, bu da herhangi bir bileşenin durumuna doğrudan erişmesini kolaylaştırır.
Redux, geliştiriciler için güçlü yetenekler sağlar. Sonsuz geri alma veya yineleme, verilerdeki değişiklikleri günlüğe kaydetme, sayfa yüklemeleri arasında durumun devam etmesi ve çok daha fazlası gibi görevleri Redux ile gerçekleştirebilirsiniz.
Redux önceki durumlar arasında ileri geri hareket etme ve görünümü gerçek zamanlı olarak güncelleme yeteneği, test ve hata ayıklama için zaman yolculuğu gibi kullanışlı özellikler sunar. Kullanıcı dostu mimarisi sayesinde Redux, React uygulamaları için durumun korunmasında büyük avantaj sağlar.
4.WEB PACK
React topluluğu arasında, Webpack, JavaScript uygulamaları için en çok kullanılan modül paketleyicisidir.
Paket oluşturucular olmadan, JS’i bir tarayıcıda çalıştırmak, özellikle büyük projeler için büyük çok fazla komut dosyası yüklenmesinde sorunlara neden olabilir.
Webpack, bağımlılık grafiklerini kolayca oluşturmanıza ve yönetmenize izin verdiği için karmaşık PWA mağazası için ölçeklendirme sorunlarını çözmek için önerilir.
Webpack’i kullanarak, geliştiriciler resim, yazı tipi ve stil sayfası gibi her türlü özellik de dahil olmak üzere uygulama kaynaklarını bir araya getirebilirler. Bu, sayfa yükleme hızı ve performansı açısından PWA projeniz için büyük faydalar sağlar.
Geliştiriciler Webpack ile varlıkların nasıl işlendiği üzerinde daha iyi kontrole sahip olurlar.
5.MATERİAL-UI
Google tarafından 2014 yılında geliştirilen Material, web ve mobil uygulamalar için en çok kullanılan tasarım aracıdır.
Malzeme tasarımı PWA projeniz için harika bir başlangıç noktası olsa da, yönergeler sebebiyle yine de uygulamanızın tüm yönlerini veya ihtiyaçlarını karşılayamaz.
Google’ın Materyal Tasarımının uygulamasını sağlayan Material UI, React uygulamaları için en popüler ve aktif olarak bakımı yapılan kullanıcı arayüzü çerçevelerinden biridir.
Açık kaynak kütüphanesi, PWA ihtiyaçlarınız ve daha fazlası için kullanılabilen React özellikli tüm bileşenleri sağlar. UI kitleri, tanımlanmış renk paleti ve uygulamanız için özel renk teması ile son derece kullanışlıdır.
Özelleştirme özellikleri, kullanıcılara harika kullanıcı arayüzü gönderirken PWA’yı markanızla eşleştirmenizi sağlar. Sadece React’a odaklanan Material UI, bu kütüphane üzerine inşa edilen PWA mağazası için iyi bir seçimdir. Basit kurulum işlemi, düşük yükleme süresi ve çalışma zamanında dinamik stiller ile PWA için harika bir stil çözümü sunar.
6.LIGHT HOUSE
Google, PWA performansını, erişilebilirliğini ve daha fazlasını ölçmek için bir analiz aracı sunar: Light House (Deniz Feneri).
Deniz Feneri, uygulamayı test etmek ve kullanıcılarınız için tam bir uygulama gibi PWA oluşturmanıza rehberlik etmek için bir dizi metrik sunar. Araç, Chrome DevTools’un Denetimler sekmesinden çalıştırılabilir veya komut satırından otomatikleştirilebilir veya ihtiyaçlarınıza en uygun olan bir chrome uzantısı olarak çalıştırılabilir.
Lighthouse, web uygulamanızı PWA özellikleri açısından denetlemek için manuel test yapma ihtiyacını ortadan kaldırır. Bu araçla, geliştiriciler belirli bir URL’ye karşı bir dizi testi otomatikleştirebilir ve sonuçlarının hızlı bir şekilde kapsamlı bir raporunu oluşturabilirler.
Geliştiriciler PWA’nın ne kadar iyi performans gösterdiğine dair yararlı verilere erişebilirler.
SONUÇ
Kullanıcılara harika deneyimler yaşatmak için hızla gelişen teknolojiye ayak uydurmak zorunluluktur. PWA gibi teknolojileri kullanarak hem kullanıcıları memnun edebilir hem de marka dominasyonunuzu üst seviyelere çıkarabilirsiniz.
