BlogTeknoloji

Progressive Web Apps (PWA) Nedir?

Merhaba arkadaşlar,

Bugün seo bloglarını okurken sıkça karşılaştığınız Pogressive Web App yani PWA’dan kısaca bahsedeceğim. Bu yazıyı okuduktan sonra bu konuda yeteri kadar fikir sahibi olabileceksiniz.

Progressive Web App nedir?

İnternet sitelerinin tıpkı cep telefonlarımızdaki mobil uygulamalara benzeyen görünüme getiren uygulamalara denir. Kısaltması PWA ve PWApp’dir.

Bir web sitesi mobil uygulama gibi kullanmamızı sağlayan bir teknoloji. Aşağı yukarı tüm tarayıcılar destekliyor.

Progressive Web Apps‘in çalışma mantığı:

Android telefonunuzdan Chrome’da Progressive Web Apps bir siteye girdiğiniz an Snackbar bu siteyi telefonunun home ekranına eklemek isteyip istemediğini soruyor,
Kabul edersen telefonuna uygulamalardaki gibi bir ikon ekleniyor. (Bu ikonu kısayol olarak düşünebilirsin.)
İkona bastığın an mobil browserdan kurtulup mobil uygulama gibi tam ekran Progressive Web Apps deneyimini yaşıyorsun.

Progressive Web App’ın özellikleri

SEO çalışması yaparken sıkça bahsettiğim kullanıcı deneyimi kavramı burada da karşımıza çıkıyor. PWA’nın asıl amacı kullancıya daha konforlu bir web deneyimi yaşatmak olduğunu düşünürsek bunun SEO’ya katkısını siz hesaplayın 🙂

Kullanıcı internet sitenize çevrimdışı olarakta girebilir. Web sitesini indirdip sonra okumak için geri döndüğünü düşünün.

Mobil uygulamalarda olduğu gibi ana ekrana kısayol simgesi ekleyebilirsiniz.

İnternet siteniz responsive yani duyarlı bir tasarıma sahip ise ekranın daha iyi dolmasını sağlar. Dolmaktan kastım şu; ekranın en verimli şekilde kullanılması.

Bildiğiniz gibi son bir kaç senedir Push notification yani “Web sitesi bildirimleri” bayağı popüler olmuş durumda. Bu özelliğe onay veren kullanıcılara bildirim gönderebiliyorsunuz.

PWA olarak hazırlanmış bir uygulamanın kullanımı

İnternet sitenizin PWA olarak algılanabilmesi için manifest denilen bir dosyaya ihtiyaç vardır. Bu dosya uygulamaya ait bilgileri saklar.

Örnek manifest dosyası

{
   "name": "Devnot – Yazılımcının Magazini",
   "short_name": "Devnot",
   "icons": [
      {
         "src": "devnot.png",
         "type": "image/PNG",
         "sizes": "144x144"
      }
   ],

   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#282828"
}

Manifest dosyası kullanımı

  • Aşağıdaki kodu header.php sitenizin üst bölümüne yapıştırın.
  • Çalışması için yukarıdaki manifest kodlarını kendinize göre düzenledikten sonra manifest.json olarak kaydedin.
  • href=”manifest.json” (href yazan yere sitenizin url adresini yazın.)
<link rel="manifest" href="manifest.json">

Pwa Kullanmak için neler gerekli?

PWA konusunda daha detaylı bilgi almak isterseniz kapsamlı bilgi almak isterseniz https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ adresini ziyaret edebilirsiniz.

Dünyadaki popüler PWA uygumalarını inceleyip test etmek isterseniz de  https://pwa.rocks/ bu adrese göz atabilirsiniz.

Buğra Yazar

Startup WordPress Kurucusu. 2010 yılından bu yana çeşitli web projelerinde yer aldım. Kendimi SEO, WordPress Sosyal Medya ve Dijital Pazarlama alanlarında geliştirdim ve geliştirmeye devam ediyorum. SEO Uzmanı olarak Arama motoru optimizasyonu ve Dijital Pazarlama konularında hizmet vermekteyim. Bildiklerimi blogumda paylaşıyorum.

Benzer Yazılar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı