İlerici Web Uygulamaları (PWA)

Bu bölümde adım adım bir PWA'ya nasıl kurulum deneyimi ekleyebileceğinizi öğreneceksiniz. Hadi, vakit kaybetmeden başlayalım!

Bir PWA kurulduğunda, diğer yerel uygulamalar gibi görünür ve davranır:

1. Kullanıcılar, kurdukları PWA'yı mobil işletim sistemlerinin uygulamalar menüsünü veya ana ekranını kullanarak başlatabilir.
2. PWA, tarayıcının adres çubuğu ve diğer arayüz bileşenleri olmadan aynı bir yerel uygulama gibi tam ekran görüntülenir.
3. Ve diğer tüm kurulu uygulamalar gibi işletim sisteminin görev yöneticinde en üst seviyede listelenir.

Google Chrome web tarayıcısında bir PWA'yı kurmak için kullanıcıların tercih edebileceği iki yöntem bulunur:

1. Chrome'un üç nokta bağlam menüsünden uygulama kısayolu oluşturmak
2. Geliştirici olarak sizin tarafınızdan sunulan bir yükleme arayüzünü kullanmak

Üç nokta bağlam menüsünün kullanımı, pek çok kullanıcı tarafından göz ardı edilebilme potansiyeli yüksek bir seçenek olduğundan PWA uygulamalarınızda mutlaka bir kurulum arabirimi oluşturmanızı öneririm.

Peki bunu nasıl yapacaksınız? Şimdi bunun yanıtını keşfedelim!

PWA'nızın kullanıcılar tarafından kurulabilmesi için şu Lighthouse denetim kriterlerini sağlaması gerekir:

• HTTPS protokolünün kullanımı
  Uses HTTPS
• Sayfayı ve start_url'i kontrol eden bir hizmet çalışanı kayıtlı değil.
  Does not register a service worker that controls page and start_url
• Web uygulama manifestosu kurulabilirlik gereksinimlerini karşılamıyor.
  Web app manifest does not meet the installability requirements
  

index.html'e install.js'i Eklemek

PWA'mıza kurulum deneyimi eklemek için gerçekleştireceğimiz ilk işlem, uygulamamızın ana sayfası olan index.html'e install.js dosyasını eklemek olacak. Bunun için;

1. Glitch'e giriş yapın ve Your Project bölümünden hava durumu uygulamanızı açın.
2. Sol taraftaki dosya yöneticisini kullanarak public/index.html dosyasını açın.
3. CODELAB: Kurulum kodunu buraya ekle açıklama satırının altına şu kod satırlarını ekleyin:

   // CODELAB: Kurulum kodunu buraya ekle 
   
   

   Bu kod ile, PWA'mızın kurulum sürecini yönetecek olan /scripts/install.js dosyasını ana sayfaya eklemiş olduk.

beforeinstallprompt Olay İşleyicisini Dinlemek

Eğer PWA'mız kurulum için gerekli kriterleri başarıyla sağlarsa install.js dosyası içerisinde tanımlanmış olan beforeinstallprompt olay işleyicisi tarayıcı tarafından tetiklenir. PWA'mızın kurulabilmesi için gerekli arayüzü oluşturmak için bu olay tetikleyicisini kullanacağız. Bunun için;

1. Glitch'e geri dönün.
2. Sol taraftaki dosya yöneticisini kullanarak public/scripts/install.js dosyasını açın.
3. CODELAB: beforeinstallprompt olay dinleyicisini ekleyin açıklama satırının altına şu kod satırlarını ekleyin:

   // CODELAB: beforeinstallprompt olay dinleyicisini ekleyin. 
   window.addEventListener('beforeinstallprompt', saveBeforeInstallPromptEvent);
   

   Bu kod satırı ile, beforeinstallprompt olay işleyicisi tetiklendiğinde saveBeforeInstallPromptEvent methodunun çağrılmasını sağlamış olduk.

Şimdi sıra geldi saveBeforeInstallPromptEvent methodunu kodlamaya:

install.js'in içerisindeki CODELAB: Etkinliği kaydetmek ve yükleme düğmesini göstermek için gerekli kodları ekleyin açıklama satırının altına şu kod satırlarını ekleyin:

// CODELAB: Etkinliği kaydetmek ve yükleme düğmesini göstermek için gerekli kodları ekleyin. 
deferredInstallPrompt = evt;
installButton.removeAttribute('hidden');

Bu kod, kullanıcılara, uygulamanın kurulumunu gerçekleştirmek için gerekli yönlendirmenin bulunduğu bir mesaj ve kurulumu yüklemeyi sağlayacak olan installButton isimli bir düğme görüntüler.

Kullanıcıdan Kurulum Onayı İstemek

Kullanıcı, PWA kurulumunu sağlayacak olan installButton düğmesine tıkladığında, ondan bir mesaj ile işlem onayı isteyeceğiz ve ardından kurulum düğmesini gizleyeceğiz. Bunun için;

install.js'in içerisindeki CODELAB: Kurulum istemini gösterin ve kurulum düğmesini gizleyin açıklama satırının altına şu kod satırlarını ekleyin:

// CODELAB: Kurulum istemini gösterin ve kurulum düğmesini gizleyin. 
deferredInstallPrompt.prompt();
evt.srcElement.setAttribute('hidden', true);

.prompt() methodu, PWA'nın cihazın ana ekranına eklemesini isteyen bir iletişim penceresinin gösterilmesini sağlar. Eğer kullanıcı EVET'i seçer ise PWA kurulumu gerçekleştirilir.

Kullanıcının Yanıtının Loglanması

Kurulum işleminin sonucunu yani kullanıcının yanıtını kontrol etmek veya kayıt alına almak için userChoice değişkenini kullanabilirsiniz. Bunun için install.js içerisindeki CODELAB: Kullanıcının yanıtını logla. açıklama satırının altına şu kod satırlarını ekleyin:

// CODELAB: Kullanıcının yanıtını logla. 
deferredInstallPrompt.userChoice.then(choice => {
  if (choice.outcome === "accepted") {
    console.log("Kurulum kabul edildi.", choice);
  } else {
    console.log("Kurulum red edildi.", choice);
  }
  deferredInstallPrompt = null;
});

PWA Kurulumunu Loglamak

Hatırlarsanız, bu dersimizin başlarında kullanıcıların PWA'ları kurmak için kullanabileceği birden fazla yoldan bahsetmiştim. Eğer kullanıcının hangi kurulum yöntemini seçtiğinden bağımsız olarak kurulum işleminin sonucunu loglamak isterseniz appinstalled olay işleyicisini kullanabilirsiniz.

Bunun için install.js içerisindeki CODELAB: appinstalled olay işleyicisini ekleyin. açıklama satırının altına şu kod satırlarını ekleyin:

// CODELAB: appinstalled olay işleyicisini ekleyin. 
window.addEventListener('appinstalled', logAppInstalled);

Şimdi, appinstalled olay işleyicisi tetiklendiğinde çalıştırılacak olan logAllInstalled methodunu oluşturalım. Bunun için; install.js içerisindeki CODELAB: Yükleme bilgilerini loglayın açıklama satırının altına şu kod satırlarını ekleyin:

// CODELAB: Yükleme bilgilerini loglayın. 
console.log('Hava Durumu uygulaması başarıyla yüklendi.', evt);

Evet, bu son işlem ile birlikte bölümün sonuna geldik. Harika bir iş çıkardınız! Bir sonraki bölümde görüşmek üzere, İyi çalışmalar...