SEO

Progressive Web Apps (PWA) Nedir?

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ı

2progressive web apps

İ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.

Paylaş

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi yazın.
You need to agree with the terms to proceed

Öne çıkan web sitesi tasarım çalışmalarımıza bakın
1.000’den fazla müşteri için oluşturduğumuz güzel web sitelerinden bazılarına göz atın.
WordPress desteği ve bakımı sunuyoruz
WordPress uzmanlarından oluşan ekibimiz tarafından desteklenen planlarla devam eden bakımın stresinden kurtulun.
Google Değerlendirme Notu
5.0
207 yoruma göre
js_loader