WordPress Sitenizi PWA'ya Dönüştürme: Trend ile Açık

Yayınlanan: 2021-02-17

İçindekiler

PWA hareketi o kadar dönüştürücü ve anıtsal bir hareket ki, teknoloji dünyasını süpüren ve yolundaki her şeyi daha iyiye doğru değiştiren dev bir dalga gibi oldu.

Dünyanın en etkili markalarından bazıları, yani ünlü Twitter Lite'ları ile Twitter, artık PWA'yı gelecekteki gelişmeleri için resmi olarak temel haline getirdi.

 Önerilen okuma: İlhamınız için 12 Aşamalı Web Uygulaması Örneği

WordPress veya daha spesifik olmak gerekirse, Automattic - WordPress'in arkasındaki insanlar, Progresif Teknolojileri WordPress gibi platformların iş akışına entegre etme konusundaki devam eden çalışmalarını duyurarak Chrome Dev Summit 2017'de WordPress PWA hareketini başlattı.

O zamandan beri, WordPress ortamı o kadar çok değişti ki, WordPress'inizi bir PWA'ya dönüştürmemek , izleyici memnuniyetinde neredeyse garantili bir kayıptır .

PWA'yı Anlamak

Google'ın belirttiği gibi, Aşamalı Web Uygulamaları

  • Güvenilir – Anında yükleyin ve belirsiz ağ koşullarında bile asla downasaur'u göstermeyin.
  • Hızlı – İpeksi pürüzsüz animasyonlarla ve sarsıntılı kaydırma olmadan kullanıcı etkileşimlerine hızla yanıt verin.
  • İlgi Çekici – Etkileyici bir kullanıcı deneyimi ile cihazda doğal bir uygulama gibi hissedin.

Basitçe söylemek gerekirse, PWA'lar web'de gezinme deneyiminin geleceğidir. PWA'lar hakkında daha fazla bilgi için makalemize göz atın: PWA nedir?.

Neden WordPress için PWA?

Web sayfanızın yüklenmesini bekleyerek izleyicilerinizin ölesiye sıkılmasını istemiyorsanız, artırılmış site performansı, işlevsellik ve UX ile çözüm her zaman daha iyi bir seçimdir.

Jetpack'te PWA deneyleri
WordPress PWA Optimizasyonlarından Önce ve Sonra

Örneğin, ünlü Twitter Lite'ı ele alalım. Bir vaka çalışması, Twitter Lite'ın piyasaya sürülmesiyle Twitter'ın kullanıcı davranışlarında muazzam bir değişiklik yaşadığını gösterdi.

Twitter Lite'ın Mühendislik Lideri Nicolas Gallagher şunları söylüyor:

Twitter Lite artık Twitter'ı kullanmanın en hızlı, en ucuz ve en güvenilir yoludur. Web uygulaması, yerel uygulamalarımızın performansıyla rekabet eder ancak Android için Twitter'a kıyasla cihaz depolama alanının %3'ünden daha azını gerektirir.

Ve harekete katılan sadece Twitter değil, Spotify gibi büyük markalar da yakın zamanda geliştirdikleri Spotify PWA ile bunu yaptı. PWA'ların getirdiği değişikliklerle ilgili istatistikler ve haberler her yerdedir ve neredeyse görmezden gelinemeyecek kadar büyüktür, bu nedenle Web'in PWA destekli geleceği iddiasını yapmak her zamankinden daha gerçekçi görünüyor.

PWA istatistikleri
Kaynak: PWAstats

WordPress'te PWA Kurmak için Ön Koşullar

  • Aşamalı Web Uygulamaları, WordPress web sitenizin güvenli bir kaynaktan sunulmasını gerektirir, yani web siteniz HTTP değil HTTPS olmalıdır .
  • WordPress sürümü: 3.5.0'dan yüksek
  • PHP sürümü: 5.3'ten yüksek

WordPress Sitenizi PWA'ya Nasıl Dönüştürürsünüz?

Yukarıda belirtilen ön koşullar yerine getirildiğinde, WordPress site sahipleri iki yoldan birini kullanarak PWA'ya dönüştürmeyi seçebilir: Elle veya Eklentilerle .

1. PWA'nızı Manuel Olarak Geliştirin

PWA'nın geliştirilmesi - diğer geliştirme türlerinden daha az maliyetli olmasına rağmen - hala önemli miktarda kodlama bilgisi ve geliştiricisinin yaygın Javascript çerçeveleri ve kitaplıklarında, özellikle de Angular ve React'te kendi yolunu bilmesi gerekir. Bu nedenle, deneyimsiz site sahiplerinin eklentileri (ücretsiz ve/veya ücretli olanlar) denemeleri veya bir PWA oluşturma süreci kolay olmadığı için profesyonel bir geliştirici tutmaları önerilir.

Bir PWA'yı manuel olarak oluşturmaya çalışırken, mümkün olan en iyi kullanıcı deneyimi için Google'ın Aşamalı Web Uygulaması Kontrol Listesini izlemeyi ve web sayfanızı Deniz Feneri aracıyla test etmeyi unutmayın.

2. Eklentilerle

Merak etmeyin, geliştirici olmayan site sahipleri! WordPress, kullanıcılarının seçmesi için ağır yüklerin çoğunu yapan çok çeşitli eklentiler sunar. Bu eklentiler 2 tipte gelir: Ücretsiz ve Ücretli Eklentiler.

Ücretsiz Eklentiler

1. SüperPWA

SuperPWA banner'ı

WordPress için Ücretsiz PWA Eklentilerinin başında, uzun süredir devam eden mükemmel hizmet ve kalite geleneği ile SuperPWA yer almaktadır.

SuperPWA'nın yapılandırılması kolaydır, Aşamalı Web Uygulamanızı kurmak bir dakikadan az sürer. SuperPWA, oluşturduğu her veritabanı girişini ve dosyasını kaldırarak temiz bir kaldırma işlemi gerçekleştirir. Aslında, siz ilk kez manuel olarak kaydedene kadar varsayılan ayarların hiçbiri veritabanına kaydedilmez.

Etkin yüklemeler: 30000+
Yıldız derecelendirmesi: ★★★★★

2. PWA

PWA afişi

PWA, temaların ve eklentilerin tekerleği yeniden icat etmemeleri ve birbirleriyle çelişmemeleri için PWA yapı taşları ve koordinasyon mekanizması sağlamayı amaçlamaktadır.

Bir servis çalışanı içeren bir eklenti veya tema geliştiriyorsanız, bu PWA eklentisine güvenmeyi düşünün veya en azından yerleşik uygulamayı yalnızca PWA eklentisi mevcut olmadığında yedek olarak kullanın.

Son güncelleme: 5 ay önce
Aktif kurulumlar: 20.000+
Yıldız derecelendirmesi: ★★★★

3. WP ve AMP için PWA

WP başlığı için PWA

Ücretsiz bir teklif olarak, WP & AMP için PWA, yaptığı işte mükemmeldir. İyidir, kullanımı kolaydır ve olağanüstü müşteri hizmetleri sunar; ancak, belgeleri biraz eksik geliyor ve bu da her şeyin işe yaramasını zorlaştırabilir.
Aktif kurulumlar: 8,000+
Yıldız derecelendirmesi: ★★★★★

4. Web Paketi PWA

WebSuit WordPress PWA Eklentisi

WebSuite PWA, web sitenizi entegre AMP desteği ile bir PWA'ya dönüştürmek için eksiksiz bir eklentidir. Eklenti, PWA'nıza uygulama benzeri bir görünüm kazandırmak için Ana Ekrana Ekle, Anında Bildirimler, CDN, Analitik Entegrasyonu vb. gibi birçok özelliğin yanı sıra çeşitli temalarla birlikte gelir.

Aktif kurulumlar: 30+

Yıldız derecelendirmesi: ★★★★★

5. Webkul tarafından WordPress için Basit PWA

WordPress için Webkul PWA

Yalnızca 49 ABD doları ile WordPress sitenizi tüm özellikleri ve avantajlarıyla tam işlevsel bir PWA'ya dönüştürebilirsiniz; hepsi bu kadar değil. Eklenti tüm WordPress temalarıyla uyumludur, ayrıca temayı, uygulama adını ve uygulama simgesini yönetici arka ucundan fazla çaba veya teknik bilgi gerektirmeden değiştirebilirsiniz.

Etkin kurulumlar: bilgi mevcut değil

Yıldız derecelendirmesi: bilgi mevcut değil

PWA Eklentileri Nasıl Yüklenir

WordPress PWA Eklentileri için kurulum süreci oldukça basit ve akıcıdır. Aşağıda örnek olarak SuperPWA kullanacağız :

WordPress Kurulumu :

  • WordPress Admin > Eklentiler > Yeni Ekle'yi ziyaret edin
  • ' Süper Aşamalı Web Uygulamaları ' için arama yapın
  • Şimdi Yükle ”yi ve ardından Süper Aşamalı Web UygulamalarınıEtkinleştir ”i tıklayın.

Manuel olarak kurmak için:

  • Süper aşamalı web uygulamaları klasörünü şuraya yükleyin: sunucunuzdaki /wp-content/plugins/ dizini
  • WordPress Yöneticisi > Eklentiler'e gidin
  • Listeden Süper Aşamalı Web Uygulamaları eklentisini etkinleştirin.

Çözüm

Bu PWA hareketi yakın zamanda yavaşlayacak gibi görünmüyor ve en iyi seçeneğiniz, geride kaldığını fark etmeden hemen harekete geçmek.

Teknoloji konusunda bilgiliyseniz ve kendiniz ve siteniz için daha fazla özgürlük istiyorsanız, PWA'nın manuel olarak geliştirilmesi sizin için tercih edilen bir seçenek olmalıdır. Ancak, o kadar deneyimli olmayan ve daha güvenli, denenmiş ve test edilmiş bir yöntem isteyen site sahipleri için WordPress için PWA Eklentileri o kadar da kötü bir fikir değil. Eklentiler, bir PWA oluşturma süreciyle uğraşırken size zaman kazandırabilir ve ara sıra baş ağrısından kurtarabilir, böylece daha iyi kaynak tahsisi sağlar.


Daha fazla okuma:

  • Magento PWA Studio: Vue Storefront ile Ayrıntılı Bir Karşılaştırma
  • Magento WordPress Entegrasyonu: Adım Adım Kılavuz