WordPress için PWA: Aşamalı Web Uygulamasını Kolayca Kurun

Aşamalı web uygulamaları (PWA) web geliştirmedeki yeni yeniliklerden biridir. Bu, web siteniz için oluşturmadan bir mobil uygulamaya sahip olmak gibidir.

Aşamalı web uygulamaları, web sitenizin yerel bir uygulama gibi kullanıcının akıllı telefonlarında yer almasını sağlar.

Kullanıcıların internet bağlantısı olmadan web sitenizi yüklemelerini sağlar. Süper hızlı yüklenir ve gerçek bir yerel mobil uygulama hissi verir. PWA'lar son derece güvenilirdir, çünkü bir kullanıcı bağlantı sorunlarıyla karşılaşsalar bile asla ölü bir ekran görmez.

PWA, hızlı ve ilgi çekici oldukları için kullanıcılara daha kaliteli bir kullanıcı deneyimi sunar:

Eğer kullanıyorsanız WordPress, web siteniz veya blogunuz için progresif web uygulamaları deneyimini kolayca kurabilirsiniz. Bu derste, bunu nasıl yapacağınızı adım adım göstereceğim.

Bu eğitimde, size WordPress web siteniz için aşamalı bir web uygulamasının nasıl kurulacağını göstereceğim.

Tüm süreç basittir ve tek bir kod satırına dokunmanız gerekmez.

Bunu çok daha basit hale getirmek için kullanacağım WP için PWA WordPress'te aşamalı web uygulamasını etkinleştirmek için ücretsiz bir eklentidir.

WP için PWA nedir

WP için PWA, WordPress web sitenizi veya blog progresif web uygulamanızı uyumlu hale getirmenizi sağlayan ücretsiz bir eklentidir. Siteyi sizin için otomatik olarak optimize eder, böylece hiçbir şey yapmanıza gerek kalmaz.

Ayrıca özel "ana ekrana ekle" tetikleyicisi gibi önemli özellikler ekler, push bildirimleri, yerel UX ve önbellek sona erme ayarları.

WP için PWA aktif olarak geliştirilmiştir, böylece yakında yeni özelliklerin gelmesini bekleyebilirsiniz.

Adım 1: WP için PWA'yı yükleyin

WordPress kontrol panelinize gidin ve WP için PWA'yı arayın. Eklentiyi manuel olarak da şuradan indirebilirsiniz: WordPress eklenti deposu. Bulduktan sonra yükle düğmesine tıklayın ve ardından etkinleştir'e tıklayın.

Eklentiyi etkinleştirdikten sonra PWA ayarlarına tıklayın:

PWA'yı başlat düğmesine tıklayın. Ardından, eklenti ayarlarını açmak ve ayarları kaydetmek için durum onay kutusuna tıklayın.

💡İpucuHTTP kullanıyorsanız HTTPS'ye geçin. HTTPS güvenlidir ve güveni güçlendirir.

WP için PWA, kutudan çıktığı gibi çalışır, böylece hiçbir şeyi yapılandırmanız gerekmez, sitenize şimdi PWA olarak erişebilirsiniz.

Ancak, sayfalarınızın görünümünü markanıza uyacak şekilde özelleştirmek için ayarları değiştirebilirsiniz.

2. Adım: PWA Sayfalarınızın Görünümünü Nasıl Özelleştirirsiniz?

PWA ayarlarına gidin ve tema rengini değiştirmek için tasarım düğmesine tıklayın. Genel ayarlar bölümünde uygulama simgenizi ve açılış ekranı simgenizi ekleyebilirsiniz. Bir açılış ekranı ilk görüntü kullanıcılar uygulamanızı başlattıklarında görecekler.

Adım 3: Ön Önbelleğe Alma Kurulumu

PWA'lar ön önbelleğe alma nedeniyle son derece hızlı yüklenir. Eklenti bir önbellek Seçtiğiniz gönderi sayısı için dosya oluşturun ve bu, uygulamanın süper hızlı ve hatta internet olmadan yüklenmesine yardımcı olur.

Önbelleğe almayı etkinleştirmek için PWA eklenti ayarlarına gidin ve Ön Önbelleğe Alma ayarlar. Burada otomatik seçin, gönderi sayısını girin (iyi bir sayı 10 olacaktır) ve Kaydet düğmesine tıklayın.

Bu kadar! – web siteniz artık bir kullanıcı onu akıllı telefondan ziyaret ettiğinde bir "ana ekrana ekle düğmesi" gösterecek. Artık web sitenize aşamalı bir web uygulaması olarak hizmet verebilirsiniz.

Eklentiyi etkinleştirdikten sonra önbelleğinizi de temizlemelisiniz, böylece yeni ziyaretçiler için hızlı bir şekilde etkili olabilir.

Push Notification'ı PWA'ya Entegre Etme

Google'ın firebase'ini kullanarak PWA'nıza anında iletme bildirimleri ekleyebilirsiniz.

Eklenti ayarlarına gidin ve push bildirim düğmesine tıklayın. Burada FCM anahtarınızı ve JSON kodunuzu girmeniz gerekecek.

içinde yeni bir firebase projesi oluşturun ateş üssü konsol. Projeyi oluşturduktan sonra proje detayları bölümünde FCM Anahtarı ve JSON'u bulacaksınız.

Birisi akıllı telefonuna yüklediğinde uygulamanın nasıl görüneceği aşağıda açıklanmıştır:

Gelişmiş Ayarlar

Progressive web uygulamaları hakkında detaylı bilginiz yoksa gelişmiş ayarlara dokunmamanızı şiddetle tavsiye ederim. Gelişmiş ayarlarda gerçekten açmanız gereken yalnızca birkaç şey var:

  1. CDN uyumluluğu – kullanıyorsanız CDN Cloudflare gibi, bunu aç
  2. Çevrimdışı   - Google Analytics'in verileri almasını sağlamak için arka plan senkronizasyonu (hem çevrimiçi hem de çevrimdışı)
  3. UTM İzleme - bu, uygulamadan gelen trafiği tam olarak izlemenize yardımcı olur

Gelişmiş ayarlarda başka hiçbir şeye dokunmanız gerekmez.

PWA'nın web sitenizde çalışıp çalışmadığını test etmek için Google'ın resmi aracını kullanın. Deniz Feneri.

Herhangi bir sorunla karşılaşırsanız veya PWA'ya yeni bir özelliğin eklenmesini isterseniz, şu adresten destekleriyle iletişime geçebilirsiniz. WordPress forumu.

Yorumlarda PWA'nın sizin için nasıl çalıştığını bana bildirin.

Paylaş:

2 Yorumlar

  1. Sanjeev diyor ki:

    Aayush, PWA çok az kişinin bildiği bir şey ve benim gibi insanların bunu öğrenmesine yardımcı oldunuz. Teşekkür ederim, bu hafta bloguma eklemeye çalışacağım.

Yorum bırak

E-posta hesabınız yayımlanmayacak.