Bazı internet sitelerinde görüyorum. Siteye cep telefonundan girince “… Uygulamasını Ana Ekrana Ekle” diye popup açılıyor. Tıkladığımda telefonuma web sitesinin ikonu ekleniyor. Tıkladığımda site uygulama gibi açılıyor. Bunu kendi siteme nasıl uygulayabilirim? Sitem wordpress bu arada.
1 İleti
Başlığa ileti girmek için yazar girişi yapmanız gerekmektedir.
Bahsettiğiniz uygulama PWA, yani prograssive web app olarak geçiyor. PWA, web siteniz için özel bir uygulama yazmadan, mobil cihazlarda sanki bir uygulamaymış gibi çalışmasını – görüntülenmesini sağlar.
Web sitenize pwa uyguladığınız zaman bir kullanıcı mobil cihazından Chrome veya Edge tarayıcı ile sitenize girdiğinde, “SİTEİSMİ” Uygulamasını Ana Ekrana Ekle popup penceresiyle karşılaşır. Kullanıcı kabul ederse mobil cihaz ekranına sitenizin ikonu eklenir. Bir nevi sitenizin mobil uygulaması kullanıcının cihazına kurulur.
Kullanıcı bu ikona bastığında siteniz bir mobil uygulamaymış gibi tam ekran olarak, tarayıcıdan bağımsız olarak açılır.
Şuradan PWA ile ilgili daha detaylı bilgilere ulaşabilirsiniz.
Peki tavsiye eder miyim?
Ederim. Şöyle ki PWA uygulamasının alternatifi web siteniz için webview uygulaması yazdırmak. Fakat bu uygulamalar gereğinden fazla boyutta oluyor ve mobil cihazlarda yer kaplıyorlar. Kullanıcı Google Play Store’a gidip uygulamanızı yüklemesi gerekiyor.
Fakat PWA uygulaması Sevice Worker üzerinden çalıştığı için hem yer kaplamıyor, hem de kurulum için kullanıcıyı Google Play Store’a yönlendirmiyor.
PWA ile web siteniz tarayıcı üzerinden görüntülemeye veya webview uygulamanıza göre daha yüksek hızda açılıyor.
Ayrıca webview uygulaması yazdırmak PWA’ya göre daha masraflı. WordPress altyapılı bir siteniz varsa eklentilerle bu işi daha ucuza halledebilirsiniz. Ya da birazdan anlatacağım kod uygulamaları ile tamamen ücretsiz fakat sınırlı özelliklerle web sitenize PWA uygulayabilirsiniz.
Yazının devamında eklentisiz olarak sitenize nasıl PWA uygulayacağınızı anlatacağım fakat önce WordPress altyapılı siteler için iki eklenti tanıtmak istiyorum.
WordPress PWA Eklentileri
# İlk eklentinin adı Instantify. Şuradan eklentiyi detaylıca inceleyebilirsiniz.
Instantify, size üç özellik sunuyor. Birincisi web sitenizin gelişmiş özelliklere sahip bir PWA uygulamasına sahip olmasını sağlıyor.
İkincisi, sitenize otomatik olarak Hızlandırılmış Mobil Sayfalar (Google AMP) işlevselliği ekliyor.
Son olarak Facebook’ta paylaştığınız site içeriğinizi Facebook uygulaması üzerinden anında açılmasını ve Facebook üzerinden para kazanmanızı sağlayan Facebook Instant Articles özelliği de eklentiyle birlikte geliyor.
Konumuz gereği bizim için önemli olan PWA desteği. Eklentinin PWA için sunduğu özellikler şöyle:
Çoğu projemde bu eklentiyi kullanıyorum. Tavsiyemdir.
# Diğer eklentimiz ise PWA for WordPress. Eklentiyi şuradan inceleyebilirsiniz.
Bu eklenti sadece PWA üzerine yoğunlaşmış. Artı olarak WooCommerce altyapılı E-Ticaret sitelerini de destekliyor.
Eklenti, önbellek ile offline modda çalışma, PWA için arka plan renklerini değiştirme, push bildirimleri gibi özellikler sunuyor. Detaylı kullanıcı kılavuzu ile eklentiyi çok kolay bir şekilde sitenize uygulayabiliyorsunuz.
# Bir de SuperPWA eklentisi var. Kullanmadığım için nedir ne değildir tam bilmiyorum. Şuradan inceleyebilirsiniz.
Ana ekrana ekle kodu, diğer bir değişle PWA uygulamasını eklentisiz, manuel olarak yapmak isterseniz, birkaç dosya ve kod uygulamasıyla kısa sürede sitenizin PWA uygulamasını yapabilirsiniz.
Eklentisiz PWA Uygulama ile Ana Ekrana Ekle Popup Kodu
Anlatacağım işlem sadece WordPress altyapılı siteler için değil tüm sitelerde sorunsuzca çalışacaktır. Tabi web sitenizin mutlaka responsive yani mobil uyumlu olması ve SSL sertifikasına (https) sahip olması gerekir.
Ayrıca bu işlem ile sadece ana ekrana ekle popup çalıştırabilir, sitenizin uygulama gibi mobil cihazlara kurulmasını sağlayabilir ve mobil cihazlarda uygulama gibi açılmasını sağlayabilirsiniz. Offline mod, push bildirimleri gibi özellikler bu anlatacağım yöntemde mevcut değil. Tabi kod bilginiz varsa bu özellikleri de ekleyebilirsiniz.
1- Eklentisiz PWA uygulamasına sahip olmak için öncelikle buraya tıklayarak gerekli dosyaları indirin.
2- İndirdiğiniz rar dosyasını arşivden çıkarın.
Dosya içerisinde “launcher-icon” ile başlayan png uzantılı 6 dosya göreceksiniz. Bu dosyalar sitenizin ikonları. Yani kullanıcı ana ekrana ekle popup penceresinden sitenizi mobil cihazına kurduğunda bu simgelerden biri gösterilecek.
Bu ikonların birden çok olmasının sebebi kullanıcının mobil cihazındaki çözünürlüğe göre farklı boyutlarda otomatik olarak seçilmesidir.
İndirdiğiniz dosya içerisindeki bu dosyaların boyutlarının ne olacağını içlerine yazdım. Siz de kendi sitenizin simgesini bu boyutlara göre herhangi bir resim işleme programıyla oluşturun. Oluşturduğunuz simgelerin isimleri verdiğim görsel dosya isimleriyle aynı olmalıdır.
3- Dosya içerisindeki “manifest.json” dosyasını herhangi bir editör ile açın. Ben düzenleme için Notepad++ programını kullanıyorum.
Dosyanın en başında bulunan
kısmındaki “Siteİsmi” yazan yerleri kendi sitenizin ismi ile değiştirin. Daha sonra aşağıda bulunan
kısmındaki “siteadresi.com” yerini kendi site adresiniz ile değiştirin. Dosyayı kaydedin.
Bu koddaki “?utm_source=webapp” kısmı nedir diye aklınıza takılabilir. Bu uzantı kaç kişinin sitenize PWA ile eriştiğini Google Analytics üzerinden görmenizi sağlıyor. Google Analytics hesabınızdan “Edinme > Tüm Trafik > Kaynak/Aracı” yolunu izleyerek bu bilgiye erişebilirsiniz.
4- Düzenleme işlemleri bittikten sonra indirdiğiniz tüm dosyaları (6 tane ikon dosyası, maifest.json, server,js, sw.js) sitenizin ana dizinine ftp ya da dosya yöneticisi aracılığı ile yükleyin.
5- Siteniz WordPress ise temanızın header.php dosyasını açın. Aşağıdaki kodu
<head>ve</head>etiketleri arasında herhangi bir yere yapıştırın.Daha sonra
<body>etiketinden sonra aşağıdaki kodu yapıştırın ve dosyayı kaydedin.<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js?v3', { scope: '.' // THIS IS REQUIRED FOR RUNNING A PROGRESSIVE WEB APP FROM A NON_ROOT PATH }).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } </script>6- Her şey tamamsa sitemizin PWA uygulaması çalışıyor mu çalışmıyor mu test edelim. Öncelikle cache eklentisi kullanıyorsanız cache temizliği yapın.
Sitenize mobilden giriş yapın. Ekran altında “xxxxx uygulamasını Ana ekrana ekle” popup kutusunu göreceksiniz.
Bir de sitenize masaüstü bilgisayarınızın Chrome veya Edge tarayıcısından girin. Adres çubuğunun sağ kısmında daire içerisinde artı işaretiyle birlikte “Yükle” yazısını göreceksiniz.
Bunları göremiyorsanız adımları uygularken yanlış bir şeyler yapmış olabilirsiniz. Kontrol edip tekrar deneyin.
İşlem bu kadar.
“Ben bunlarla uğraşamam, benim için hallediver.” derseniz de gurcaninan@gmail.com adresinden bana ulaşın, ücreti mukabilinde hallederiz 🙂 Yine de tavsiyem denemekten ve hata yapmaktan korkmayın 😉
Eklenti kullanmadan PWA uygulaması edinme işleminde kullanılan kodları şuradan aldım. Şuradaki sayfada da biraz daha değişik bir anlatım mevcut.
Şuradan da PWA için yabancı bir kaynağa ulaşabilirsiniz.
Ekleme:
Site açılınca ilk anda popup çıkmaz. Ekranı aşağı doğru kaydırınca çıkar, üste doğru kaydırınca popup yine kaybolur. Kullanıcı eğer “x”e tıkladıysa, çerezleri temizleyene kadar popup yine çıkmaz. Popup penceresine istenildiği gibi müdahale edilebilinmesi için ya kod bilmek gerek ya da ücretli eklentilerden edinmek gerekiyor.
Detaylı anlatım için çok teşekkürler hemen deniyorum.