İlerici Web Uygulamaları (PWA)

Bu bölümde, bir PWA'ya nasıl basit çevrimdışı çalışma deneyimi ekleyeceğimizi inceleyeceğiz. Bölümü başarıyla tamamladığınızda hava durumu uygulamanızı kullanan çevrimdışı kullanıcıların, tarayıcının tipik çevrimdışı sayfası yerine uygulamanın özel sayfasını görüntülemesini sağlayacaksınız. Ayrıca, şu Lighthouse denetmeleme hatalarını ortadan kaldıracaksınız:

• Mevcut sayfa, çevrimdışı durumdayken 200 yanıtı vermiyor.
  Current page does not respond with a 200 when offline.
• start_url çevrimdışı durumdayken 200 yanıtı vermiyor.
  start_url does not respond with a 200 when offline.
• 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.

PWA'lara çevrimdışı çalışma deneyimi eklemek için hizmet çalışanı (service worker) olarak adlandırılan bir JavaScript dosyası kullanılır. Hizmet çalışanı; zengin çevrimdışı deneyimlerin yanı sıra periyodik arka plan senkronizasyonları ve anlık bildirimler gibi normalde yerel uygulama gerektiren işlevlerin web uygulamaları tarafından da kullanılabilmesini mümkün kılar. Hava Durumu PWA uygulamasının hizmet çalışanı dosyasını, public klasörünün içerisinde service-worker.js adıyla bulabilirsiniz.

Bir hizmet çalışanının temel yapısını ve çalışma mantığını daha detaylı incelemek için buraya tıklayınız.

UNUTMAYIN! Bir hizmet çalışanı yalnızca https protokolü üzerinden erişilen web uygulamalarında kullanılabilir. Uygulama geliştirme süreçlerinde kolaylık olması amacıyla yerel web sunucuları, https olmadan da hizmet çalışanlarını çalıştırabilir.

Hizmet Çalışanı Kayıt Etmek

İlk adım, hizmet çalışanı dosyamızı kayıt edeceğiz. Bunun için aşağıdaki işlem adımlarını sırasıyla takip edelim:

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: Hizmet çalışanı (service worker) kodlarını buraya ekle açıklama satırının altına şu kod satırlarını ekleyin:

   // CODELAB: Hizmet çalışanı (service worker) kodlarını buraya ekle 
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       navigator.serviceWorker.register('/service-worker.js')
           .then((reg) => {
             console.log('Hizmet çalışanı kaydedildi.', reg);
           });
     });
   }
   

   Bu kod, hizmet çalışanı API'sinin kullanılabilir olup olmadığını kontrol eder. Eğer hizmet çalışanı kullanılabilir durumda ise, /service-worker.js adresindeki hizmet çalışanı kaydedilir.

Bu örnekte olduğu gibi service-worker.js dosyasını uygulamanın kök dizinine yerleştirmek, hizmet çalışanının kapsamını belirlemek için kullanılabilecek en iyi yöntemdir. Çünkü bir hizmet çalışanının kapsamı, hizmet çalışanının uygulamanızdaki hangi dosyalara erişebileceğini belirler.

Çevrimdışı Sayfaları Önbelleğe Almak

Hizmet çalışanımızı kayıt ettik. Şimdi sıra, hangi dosyaların önbelleğe alınacağını belirlemekte. Bunun için; aşağıdaki işlem adımlarını sırasıyla takip edelim:

1. Glitch'in sol taraftaki dosya yöneticisini kullanarak public/service-worker.js dosyasını açın.
2. CODELAB: Buraya önbelleğe alınacak dosyaların listesini ekleyin açıklama satırının altında yer alan FILES_TO_CACHE dizi değişkenini şu şekilde güncelleyin:

   // CODELAB: Buraya önbelleğe alınacak dosyaların listesini ekleyin.
   const FILES_TO_CACHE = [
     '/offline.html',
   ];
   

3. CODELAB: Buraya statik kaynakları önbellekleyin açıklama satırının altına aşağıdaki kod satırlarını ekleyerek hizmet çalışanı yüklenirken (install) statik kaynakların önbelleğe almasını sağlayın:

   // CODELAB: Buraya statik kaynakları önbellekleyin.
   evt.waitUntil(
     caches.open(CACHE_NAME).then(cache => {
       console.log("[ServiceWorker] Statik dosyalar önbelleğe alındı.");
       return cache.addAll(FILES_TO_CACHE);
     })
   );
   

   Hizmet çalışanı, yükleme (install) olayını tetiklediğinde caches.open() metodu önbellekte static-cache-v1 isimli bir alan açar ve belirttiğimiz statik dosyaları orada saklar. Bir önbellek adı sağlamak, dosyaları güncellememize veya önbelleğe alınmış kaynaklardan verileri ayırmamıza olanak tanır. Statik dosyaları önbelleğe eklemek için cache.addAll() yöntemi kullanılır.

Şimdi, uygulamamızın son halini Google Chrome'da test edelim ve service-worker.js dosyasının tarayıcılar tarafından nasıl yorumlandığını inceleyelim:

1. Glitch'e dönün.
2. Show menüsünden In a New Windows seçeneğini tıklayarak hava durumu uygulamasını çalıştırın.
3. Chrome geliştirme araçlarını açın.
4. Application sekmesi altında yer alan Service Workers düğmesine tıklayın.
5. Açılan sayfada hizmet çalışanına ilişkin detayları (Şekil 1) görüntülebiliyorsanız: Tebrikler! Uygulamanın hizmet çalışanını doğru yapılandırmışsınız demektir.

Şekil 1. Chrome geliştirici araçlarında service-worker.js hata ayıklama

Önbellekteki Eski Verileri Temizlemek

Şimdi, önbelleğe almış olduğumuz veriler güncellendiğinde eski çevrimdışı dosyaları nasıl temizleyeceğimizi inceleyelim. Bu işlem için hizmet çalışanının activate olayını kullanacağız:

1. Glitch'e dönün.
2. Sol taraftaki dosya yöneticisini kullanarak public/service-worker.js dosyasını açın.
3. CODELAB: Önbelleğe alınmış önceki verileri sil açıklama satırının altında şu satırları ekleyin:

   // CODELAB: Önbelleğe alınmış önceki verileri sil.
   evt.waitUntil(
     caches.keys().then(keyList => {
       return Promise.all(
         keyList.map(key => {
           if (key !== CACHE_NAME) {
             console.log("[ServiceWorker] Önbellek siliniyor", key);
             return caches.delete(key);
           }
         })
       );
     })
   );
   

Yaptığınız değişiklikleri test etmek için Chrome geliştirici araçlarında açık olan Service Workers sekmesine geri dönün ve ardından sayfayı yenileyin. Yeni hizmet çalışanının yüklendiğini ve durum numarasının değiştiğini göreceksiniz (Şekil 2).

Şekil 2. Hizmet çalışanının güncel durumu

Sizinde deneyimlediğiniz gibi hizmet çalışanı üzerinde yaptığımız değişiklikler anında işlendi. Bunu sağlayan; install olayının son satırına eklediğimiz self.skipWaiting() ve activate olayının son satırına eklediğimiz self.clients.claim() methodlarıdır. Bunlar olmadan, eski hizmet çalışanı, sayfayı görüntüleyen açık bir tarayıcı sekmesi olduğu sürece uygulamayı kontrol etmeye devam edecektir.

Başarısız Ağ İsteklerini İşlemek

Bu bölümün sonunda hizmet çalışanının fetch yani getir olayına odaklanacağız ve başarısız ağ isteklerinde uygulamamızın takip edeceği stratejiyi yapılandıracağız (Şekil 3): Öncelikle hizmet çalışanı, kaynağı internetten almaya çalışır. Bu başarısız olursa, hizmet çalışanı çevrimdışı sayfayı önbellekten getirir.

Şekil 3. Hizmet çalışanının başarısız ağ isteklerini işleme stratejisi

Hizmet çalışanının fetch olayını yapılandırarak başarısız ağ isteklerini işlemek için şu işlem adımlarını sırasıyla takip edelim:

1. Sol taraftaki dosya yöneticisini kullanarak public/service-worker.js dosyasını açın.
2. CODELAB: Fetch olay işleyicisinin kodlarını ekleyin açıklama satırının altında şu kod satırlarını ekleyin:

   // CODELAB: Fetch olay işleyicisinin kodlarını ekleyin.
   if (evt.request.mode !== "navigate") {
     // Bu bir sayfa gezintisi değil
     return;
   }
   evt.respondWith(
     fetch(evt.request).catch(() => {
       return caches.open(CACHE_NAME).then(cache => {
         return cache.match("offline.html");
       });
     })
   );

Fetch olay işleyicisinin yalnızca sayfa gezinmelerini (navigate) yönetmesi gerekir. Böylece diğer istekler işleyiciden atılabilir ve tarayıcı tarafından yürütülebilir. Aksi durumda kaynağın güncel sürümü internetten istenir. İstek başarısız olursa, catch olay işleyicisi tetiklenir ve caches.open() methodu ile önbelleğe erişilir. Önbellekteki çevrimdışı sayfayı almak için cache.match('offline.html') methodu kullanır. Daha sonra sonuç, evt.respondWith() ile tarayıcıya geri gönderilir.

Her şeyin istediğimiz gibi çalıştığından emin olmak için Chrome geliştirici araçlarına geri dönün ve Service Worker sekmesi açıkken sayfayı yenileyin. Yeni hizmet çalışanının kurulmuş olduğunu ve durum numarasının değiştiğini göreceksiniz.

Önbelleği kontrol etmek için Cache bölümünün altında yer alan Cache Storage menüsü açın ve ardından static-cache-v1 seçeneğine tıklayın. Bu önbellek bölümde yer alan tüm dosyalar listelenecektir (Şekil 4).

Şekil 4. Uygulama önbelleği

Hadi şimdi uygulamanın çevrimdışı modunu test edelim.

1. Chrome geliştirici araçlarında Application bölümünde yer ala Service Workers panelini tekrar açın.
2. Offline seçeneğini işaretleyin. Uygulama çevrimdışı olduktan sonra Network panelinin hemen solunda sarı renkli bir uyarı simgesi görüntülenir. Bu simge uygulamanın çevrimdışı olduğunu belirtir.
3. Uygulamanızı yeniden yüklediğinizde, Chrome'un çevrimdışı dinazor simgesi yerine bizim pandamızı görmüş olacaksınız.

Şekil 4. Çevrimdışı

Tebrikler! Bir bölümün daha sonuna geldik. Bir sonraki bölümde görüşmek üzere...