Progressive Web App Skorunun Yükseltilmesi

Progressive Web App, kısacası PWA, web uygulamalarının, mobil uygulama gibi çalıştırıldığı, yeni bir yöntemdir. Temelde, tarayıcıların gelişmesiyle birlikte, Service Worker ve manifest.json dosyası ile, internet sitelerinin, her kullanıcıya, online ve offline, kısacası her koşulda ve her platformda içerik sunabilmesini amaçlamaktadır. Benim ilgimi çekmedi diyebilirsiniz, ama genel olarak uygulamanızı PWA haline getirebilmek için yapmanız gereken şeylerin hepsi, uygulamanızı daha iyi hale getirecek şeyler. Dolayısıyla bu beklentileri ne kadar karşıladığınız önemli.

PWA skorunuzu öğrenmek ve düzeltmeniz gerekenleri öğrenmek için Chrome'da Lighthouse adlı eklentiyi kurabilirsiniz. PWA skorunu öğrenmek istediğiniz sayfada Lighthouse ikonuna basıp Generate Report'a basmanız yeterli olacaktır.

Alttaki şartlar, Lighthouse'un da belirttiği birçok şarttan en temelleri. Bunları kısmen sağlamanız durumunda uygulamanız PWA şartlarını sağlıyor kabul edilmekte, ve dolayısıyla PWA skorunuz da o kadar yüksek olmakta.

1. Sisteminiz HTTPS üzerinden çalışıyor olmalı.

Bu aslında direkt olarak yazılmasa da en temel beklenti. Çünkü sisteminiz HTTPS ile çalışmazsa Service Workerlar da çalışamıyor. Let's Encrpyt ile ücretsiz olarak SSL'e sahip olabilirsiniz. Nginx için Let's Encrypt kurulumunu daha önceden anlattım.

2. Sisteminiz Service Worker aracılığıyla offline durumda içerik sunabilmeli.

İnternetin olmadığı veya kesildiği durumlarda da uygulamanızın çalışması bekleniyor. Bunu kendiniz gerçekleyebileceğiniz gibi, çeşitli kütüphanelerden de faydalanabilirsiniz. UpUp bu konuda müthiş, alttaki gibi basit bir kullanımı mevcut. Offline erişim durumunda assets kısmındaki dosyaların kullanıldığı offline.html sayfasını yüklüyor.

<script src="/upup.min.js"></script>
<script>
UpUp.start({
'content-url': 'offline.html',
'assets': ['/img/logo.png', '/css/style.css', 'headlines.json']
});
</script>

3. Sayfalarınız olabildiğince hızlı yüklenmeli

Bunun için de Pagespeed skorunuzun yüksek olması gerekiyor. Bunu PageSpeed Tools aracılığıyla kontrol edebilirsiniz. Arttırmak için dikkat etmeniz gereken çeşitli şeyler var. Örneğin Gzip ve Browser Leverage Caching kavramlarını bilmeli ve dikkat etmelisiniz. CSS ve JavaScript dosyalarınız minified olmalı, ki mümkünse CDN kullanmalısınız. Son olarak da uygulamanızın ortasında JavaScript kodları havada uçuşmamalı. Ve mümkünse az sayıda resim sunmalı, mevcut resimlerin de boyutuna dikkat etmelisiniz.

4. Sisteminiz responsive olmalı

Buna zaten hep dikkat etmeniz lazım. 2017 yılında herkesin beklentisi bu yönde.

5. manifest.json dosyası ve doğru boyutlarda ikonlarınız olmalı

Bu dosyayı sunmazsanız, zaten uygulamanızın PWA olması söz konusu değil. Hiç uğraşmadan gereken her şeyi buradan oluşturabilirsiniz. Bu dosyayı head kısmında dahil etmeniz gerekiyor.

<link rel="manifest" href="/icons/manifest.json">

manifest.json dosyasının çıktısı da alttaki gibi.

{
"name": "Uygulamanız",
"icons": [
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

6. target="_blank" kullanımınıza dikkat etmelisiniz.

Bu baya sıkıntılı bir olay. PWA skoru haricinde de dikkat edilmesi gerekiyor. Eğer, yeni sekmede açılan bir linkiniz varsa, bu linki verirken rel="noopener noreferrer" diye belirtmeniz gerekiyor. Bunu belirtmezseniz, açılan yeni sekmede, tıklamış olduğunuz sekmedeki sayfayı referanslayan window.opener nesnesine ulaşılabiliyor. Dolayısıyla da, linke tıklamış olduğunuz sayfanın kontrolünü ele geçiriyor. Daha fazla detay için bu yazıyı inceleyebilirsiniz.

Sonuç olarak, üstte belirttiğim maddeleri uygularsanız, PWA skorunuz da yüksek oluyor. Hiçbirini yapmasanız bile, en azından manifest.json dosyası bulundurmayı unutmayın.