Home Blog PWA ( Progressive Web Apps ) Nedir ?

PWA ( Progressive Web Apps ) Nedir ?

Erdi Bozkurt

Günümüzde hemen hemen herkesin artık bir akıllı cep telefonu var diyebiliriz artık. Bu durumda kullanıcıların çoğu cep telefonu ile  internete giriyor. Ve şu bir gerçek, cep telefonlarında uygulama ile kullanıcıya daha iyi bir hizmet sunuluyor. Eğer  web sitenizin bir uygulaması yoksa, bu sorunu PWA ile giderebilirsiniz. Gelin neymiş şu PWA bir inceleyelim.

PWA Nedir ?

PWA’ nın açılımı; Progressive Web Apps. Bunun Türkçesi ve anlamı ; ileri web uygulamaları anlamına geliyor. PWA 2015 yılında Google tarafından duyuruldu. Progressive Web Apps,  HTML CSS ve JavaScript gibi web teknolojilerinden oluşmuş bir  web uygulama türüdür. Progressive Web Apps Sayesinde web sitenizi kolay bir şekilde mobil uygulama haline getirebilirsiniz.

Özetle PWA, web sitesini mobil uygulama haline getiren işlemler topluluğudur. En önemli özelliklerinden bir tanesi, kullanıcı web sitenizi PWA yöntemi ile telefonuna uygulama halinde indirdiğinde, bu uygulamaya internet bağlantısı olmadığında bile ulaşabiliyor olacak.

PWA’ nın Olmazsa Olmaz Bileşenleri

PWA'nın En Önemli Bileşenleri

PWA’ nın Önemli Bileşenleri

PWA’ nın tamamlayıcı parçaları,olmazsa olmaz bileşenleri vardır.Bu bileşenler olmadan PWA olmaz. O zaman sırayla neymiş bu bileşenler bir göz atalım;

Web App Manifest ( Bildirim Dosyası ) :

Web app manifest bir JSON dosyasıdır. Web sitelerimizi mobilde yada masa üstünde ana ekrana eklememizi sağlar.Burada kullanıcı PWA’ nızı ana ekrana eklediğinde veya eklerken nasıl görünmesi ve nasıl çalışması hakkında bilgiler girebilirsiniz. Örneğin PWA’ nızın adı, renkleri, tasarımı, simgeleri gibi bilgileri burada belirliyorsunuz.

HTTPS Kuralı :

PWA SSL Kuralı

PWA Https Özelliği

PWA’ lar sadece güvenli sitelerde çalışıyor. Google bunu açıkça belirtti; SSL’ i olmayanlara PWA da yok diyor! Bu aynı zamanda kullanıcılar açısından da önemli bir güven faktörüdür.

Service Workers ( Servis Çalışanları ) :

Service workers için PWA’ nın en önemli yapı taşıdır diyebiliriz. Çünkü bu service workers sayesinde internetimiz olmadığı zamanlarda da web sitelerin PWA’ sını kullanılabilir hale getiriyor. Bu durumu da cache leme ile yapıyor. İnternet varken web sitenin içeriğini ön belleğe alıyor ve offline olduğunuzda da kullanılabilir hale geliyor.

PWA’ nın Önemli Özellikleri

İleri Web Uygulamaları, basit olmalarına rağmen bir çok özellikle beraber kendini gösteriyor.En önemli özelliklerini sizler için aşağıda belirttim.

Progressive Olması ( İleri Düzey )

Progressive Olması özelliği sayesinde her kullanıcı için tüm tarayıcılarda ekstra bir işlem yapmadan kullanılabiliyor olması durumudur. Ayrıca tüm ekran boyutlarına kendini adapte edebiliyor ve uygun bir görüntü ile web sitenizi kullanıcı karşısına çıkartıyor.

Bağlantı Olmadan Çalışabilir Olması

PWA Çevrimdışı

PWA Çevrimdışı Çalışması

Tanımda da belirttiğim gibi en önemli özelliklerinden biri internet bağlantısı olsun olmasın çalışabiliyor olması.Bu özelliği cache leme sayesinde yapıyor. Web sitesinin içeriğini cache leme (ön belleğe kaydediyor) yapıyor.Diyelim bir blog sitesinde içerik okuyacaksınız ve bu blog sitesi PWA tekniğini kullanıyor,bu siteye girip dilediğiniz içeriğin içine girdiğinizde, bu durumda o içerik cache lenmiş olacak ve  bu durumda metro gibi internetin çekmediği yerlerde bu siteye girip içeriği okuyabilirsiniz.Ya da web tabanlı bir oyun geliştirdiğinizi varsayalım.Kullanıcıların internet olmadığı bir yerde sizin oyununuzu oynamasını istiyorsunuz. Bu durumda Progressive Web Apps sayesinde bu kullanıcıları yakalamış oluyorsunuz. İnternetin olmadığı yerlerde de kullanıcılar web tabanlı oyununuzu oynayabiliyor.

Anlık Bildirim ( Push Notification ) Özelliği

PWA Anlık Bildirim

PWA Push Notifications

Progressive Web Apps sayesinde anlık bildirim özelliği kolayca yönetilebilir, ve anlık bildirim özelliği ile kullanıcıya anlık bildirimler gönderilebilir.

Basit Kullanılabilir Olması

Aynı gerçek bir mobil uygulama gibi olduğu için, uygulamalar kadar basit olması özelliğini gösteriyor. Telefonunuza bir uygulama indirmiş gibi düşünün, telefonunuza indirip adeta bir uygulama kullanıyor gibi basit bir kullanım sunuyor.

Güvenilir Olması

PWA’ nın ana bileşenlerinden biri olan web sitesinde SSL olma zorunluluğu. Bu sayede Web sitenizde SSL olmadığı taktirde PWA’ nın kolaylıklarından ve güzelliklerinden yararlanma şansınız şu an için yoktur.

Bu arada SSL Hakkında bilgi almak isterseniz, SSL sertifikası nedir başlıklı yazımızı inceleyebilirsiniz.

Güncel Olması

Progressive Web App sayesinde web siteniz daima güncel olucak. Web tabanlı olduğu için siz web sitenize ne zaman yeni bir şey eklerseniz veya web sitenizden herhangi bir şey silerseniz bu durumda PWA sayesinde uygulamada da silinmiş ve eklenmiş olacak.

Paylaşılabilir Olması

Paylaşılabilir olması özelliği ile web sitenizin PWA  halini bağlantı biçimine getirebilir, bir link ile paylaşabilirsiniz.Bu linke tıklayarak kullanıcı telefonuna web sitenizi indirebilir.

Ana Ekrana Eklenebilir Olması

PWA yöntemi ile web siteniz cep telefonların ve tabletlerin  ana ekranlarına simge olarak eklenebiliyor.

PWA ve SEO İlişkisi

PWA ve SEO ilişkisinden bahsedecek olursak, önce bir alıntı yapmak istiyorum. Google’ dan John Mueller bu konu hakkında şunu söylemiş; “PWAs currently don’t have any advantage in Google Search.” sonra birde bunu eklemiş ; “and as far as I know, there are no plans to change this.” Türkçesi ; Web sitenin PWA’ sı olması google sıralamalarında bir avantaj değildir. Ve sonrada şunu eklemiş, bildiğim kadarıyla bu durumun değişmesi için bir planımız yok. John Mueller’ in yazısına buradan bakabilirsiniz. Fakat kullanıcılara güzel bir deneyim sunduğu için, kullanıcı deneyimi tarafına baktığımızda SEO için olumlu etkisi olduğunu düşünüyorum.

Wordpress’ de PWA

Eğer sitenizin alt yapısı WordPress ise, sizin işiniz çok daha basit. WordPress’ de PWA kurulumu oldukça kolay.Gerekli eklentiyi sitenize kurduktan sonra ve eklenti ayarlarını yaptıktan sonra artık sizin sitenizin bir PWA’ sı olmuş olacak.Aşağıda doğru eklenti ve eklenti ayarlarını sizler için paylaşıyorum;

Eklenti İsmi : Super Progressive Web Apps

Wordpress ile PWA

Wordpress’ de PWA Eklentisi

Resimde belirttiğim eklentiyi kurduktan sonra, sırasıyla aşağıda ki görselde  gördüğünüz ayarları yapalım ;

Wordpress de PWA Eklenti Kurulumu

Wordpress PWA Eklenti Kurulum Örneği

Ve ardından aşağıdaki resimdeki ayarları yapabilirsiniz.

wordpressde pwa eklenti kurulumu

Evet WordPress’ de PWA kurulumu bu kadar basit. Yapmanız gerekenleri sırasıyla görsellerde belirttim.

Bu arada  en iyi 3 WordPress üyelik eklentisi  başlıklı yazımıza da  göz atabilirsiniz.

 

PWA ne işe yarar ?

PWA sayesinde web sitenizi aynı bir uygulama haline getirebilir ve kullanıcılar akıllı telefonlarında, tabletlerinde, bu web sitenizin uygulama halini kolayca kullanabilirler. En önemli özelliklerinden biri internet olmadığı zaman bile web sitenizin PWA’ sına erişebilecekler.

PWA site nedir ?

PWA site, web sitenize PWA metodu uygulandıktan sonra, web sitenizin uygulama haline gelmiş durumudur.

PWA açılımı nedir ?

PWA’ nın açılımı, progressive web apps’ dir. Ve bunun türkçe anlamı; ileri web uygulamaları anlamına gelir.

Önerilenler

Yorum Yap