Münşeat Yayın Ekibi
WordPress PWA Eklentisiz !
WordPress site sahiplerinin en büyük yardımcısı gibi görünen eklentiler (plugins) aslında en büyük düşmanıdır. Daha önce bu konu ile ilgili wordpress site hızlandırma teknikleri yazımızda açıklamalar yapmış ve eklentilerin faydasından çok zararı olduğunu söylemiştik. Bu nedenle basit kodlarla yapılacak birçok işlem varken WordPress sahiplerinin kolaya kaçıp eklenti yükleme yoluna gittiklerini de açıklamıştık.
Webp – Svg gibi resim formatlarının kodsuz ve eklentisiz yüklenebilir olduğunu da ayrıca göstermiştik. Şimdiki yazımızda ise açıklayacağımız konu WordPress siteyi herhangi bir eklentiye ihtiyaç duymadan PWA’ya nasıl dönüştürebiliriz ?
PWA’yı bilenler bilir , bildiği için de araştırır bu nedenle PWA hakkında ayrıntılı bilgi verilmeden doğrudan konuya geçeceğiz.
WordPress PWA için Yapılması Gerekenler
# 1 Manifest.Json Dosyası oluşturma
Öncelikle manifest.json dosyası oluşturarak işe başlıyoruz. Bunun için json editör sitesini kullanabiliriz. Aşağıdaki kodları json editör sitesine yapıştırıp gerekli düzenlemeli yaparak kaydet diyerek indiriyoruz. Daha sonra inen dosyaya manifest ismini veriyoruz. Hazırladığımız manifest.json dosyasını cpanelde sitenin kök dizinine atıyoruz.
Burada dikkat edeceğimiz tek şey kullanacağınız iconların 192×192 ve 512×512 boyutlarında farklı seçeneklerde olmasıdır.
{
"name": "Münşeat",
"description": "Kültür,Sanat ve Edebiyat Sitesi",
"short_name": "Münşeat",
"icons": [
{
"src": "https://www.munseat.com/wp-content/uploads/2021/02/192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://www.munseat.com/wp-content/uploads/2021/02/512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "https://www.munseat.com/",
"display": "standalone",
"theme_color": "#1a1a1a",
"background_color": "#FFFFFF"
}# 2 Service-Worker.Js Dosyası oluşturma
2. aşamada yapacağımız şey ise service-worker adında bir .js dosyası oluşturarak aşağıdaki kodları herhangi bir değişiklik yapmadan içine atmak.
Bir dosya .js olarak nasıl kaydedilir derdine düşmeden sitemin kök dizininde yer alan herhangi bir .js dosyasını kopyalayıp not defterinde açarak içini aşağıdaki kodlarla değiştirip service-worker adıyla kaydettim. Sizde öyle yapabilirsiniz. Hazırladığımız service-worker.js dosyasını cpanelde sitenin kök dizinine atıyoruz.
// service-worker.js
self.addEventListener('install', function () {
console.log('Install!');
});
self.addEventListener("activate", event => {
console.log('Activate!');
});
self.addEventListener('fetch', function (event) {
console.log('Fetch!', event.request);
});# 3 Head Etiketine Eklenecek Kod
3. ve son aşamamıza geldik. Buradaki vereceğimiz kodları ise temamızın header.php dosyasının <head></head> kodları arasına yapıştırmaya dikkat ediyoruz ! Aşağıdaki kodlarda kalın puntolarla işaretlediğim kısımları kendi sitemize göre değiştirdikten sonra hiçbir şey yapmadan sadece <head>…..buraya….</head> arasına ekliyoruz.
Bu noktada dikkat edeceğimiz tek şey site iconunuzun apple touch iconu için 144×144 boyutunda düzenlemek
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Münşeat App">
<meta name="msapplication-TileImage" content="https://www.munseat.com/wp-content/uploads/2021/02/144.png">
<meta name="msapplication-TileColor" content="#1a1a1a">
<link rel="manifest" href="https://www.munseat.com/manifest.json">
<link rel="apple-touch-icon" href="https://www.munseat.com/wp-content/uploads/2021/02/144.png">
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('service-worker.js').then(function (registration) {
console.log('Registered!');
}, function (err) {
console.log('ServiceWorker registration failed: ', err);
}).catch(function (err) {
console.log(err);
});
});
} else {
console.log('service worker is not supported');
}
</script>Yapacağınız tüm işlemler bu kadar. Bu işlemlerin sonunda
Mobilde ;
1- Sitemize giren ziyaretçiye Uygulamayı Ana Ekrana Ekle uyarısı gelir.
2- Mobil cihazlarda Ana Ekrana Ekle sekmesi Uygulamayı Yükle adını alır.
3- Masaüstü tarayıcılarda aşağıdaki görselde de görebileceğiniz şekilde uygulamayı yükle iconu gelir.
PWA’nın daha profesyonel kodlamalarının da olduğu bilinmektedir. Örneğin push bildirimleri gönderilebilmekte ya da kullanıcı çevrim dışı da olsa sitenizi ziyaret edebilir. Ancak bunlarla ilgili kodlara bu yazımızda yer verilmemiştir.
