Progresif Web Uygulamaları: Çevrimdışı Çalışma

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasını çevrimdışı çalışacak şekilde ayarlayacaksınız. Bu codelab, Progresif Web Uygulaması atölyesi için hazırlanan bir dizi yardımcı codelab'in ilkidir. Bu seride yedi codelab daha var.

Neler öğreneceksiniz?

• Hizmet çalışanını manuel olarak yazma
• Mevcut bir web uygulamasına Service Worker ekleme
• Kaynakları çevrimdışı kullanılabilir hale getirmek için Service Worker ve Cache Storage API'yi kullanma

Bilmeniz gerekenler

• Temel HTML ve JavaScript

Gerekenler

• Hizmet çalışanlarını destekleyen bir tarayıcı

2. Hazırlanın

Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:

Depoyu Klonlama

file_downloadZip dosyasını indir

Depoyu klonlarsanız starter dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.

Bu kod tabanı için Node.js 14 veya sonraki bir sürüm gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, codelab için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:

Önemli Dosyalar

• js/main.js - Ana uygulama JavaScript dosyası
• service-worker.js: Uygulamanın hizmet çalışanı dosyası

3. Çevrimdışı Test Etme

Herhangi bir değişiklik yapmadan önce, web uygulamasının şu anda çevrimdışı çalışmadığını göstermek için test edelim. Bunu yapmak için bilgisayarınızın internet bağlantısını kesin ve web uygulamasını yeniden yükleyin veya Chrome kullanıyorsanız:

1. Chrome Geliştirici Araçları'nı açma
2. Uygulama sekmesine geçin.
3. Service Workers (Servis Çalışanları) bölümüne geçin.
4. Çevrimdışı onay kutusunu işaretleyin.
5. Chrome Dev Araçları'nı kapatmadan sayfayı yenileme

Site test edildi ve çevrimdışı yüklenemedi. Şimdi biraz çevrimiçi işlevsellik ekleme zamanı. Çevrimdışı onay kutusunun işaretini kaldırın ve sonraki adıma geçin.

4. Diğer platformlarda da aktif olun.

Temel bir hizmet çalışanı eklemenin zamanı geldi. Bu işlem iki adımda gerçekleşir: hizmet çalışanını kaydetme ve kaynakları önbelleğe alma.

Hizmet çalışanı kaydetme

Boş bir hizmet çalışanı dosyası zaten var. Bu nedenle, değişikliklerin gösterildiğinden emin olmak için bu dosyayı uygulamamıza kaydedelim. Bunun için js/main.js dosyasının en üstüne aşağıdaki kodu ekleyin:

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

Açıklama

Bu kod, sayfa yüklendikten sonra ve yalnızca site hizmet çalışanlarını destekliyorsa boş service-worker.js hizmet çalışanı dosyasını kaydeder.

Kaynakları önceden önbelleğe alma

Web uygulamasının çevrimdışı çalışması için tarayıcının ağ isteklerine yanıt verebilmesi ve bu istekleri nereye yönlendireceğini seçebilmesi gerekir. Bunun için service-worker.js bölümüne aşağıdakileri ekleyin:

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

Şimdi tarayıcıya dönün, önizleme sekmenizi kapatıp tekrar açın. Hizmet çalışanındaki farklı etkinliklere karşılık gelen console.log simgelerini görmelisiniz.

Ardından tekrar çevrimdışı moda geçin ve siteyi yenileyin. Çevrimdışı olsanız bile sayfanın yüklendiğini görürsünüz.

Açıklama

Hizmet çalışanının yükleme etkinliği sırasında, Cache Storage API kullanılarak adlandırılmış bir önbellek açılır. precacheResources içinde belirtilen dosyalar ve rotalar, cache.addAll yöntemi kullanılarak önbelleğe yüklenir. Bu işleme önbelleğe alma adı verilir. Bunun nedeni, dosyaların gerektiğinde veya istendiğinde önbelleğe alınması yerine yükleme sırasında dosya grubunun önceden önbelleğe alınmasıdır.

Hizmet çalışanı siteyi kontrol etmeye başladığında, istenen kaynaklar proxy gibi hizmet çalışanından geçer. Her istek, bu hizmet çalışanında önbellekte eşleşme arayan bir getirme etkinliğini tetikler. Eşleşme varsa önbelleğe alınmış kaynakla yanıt verir. Eşleşme yoksa kaynak normal şekilde istenir.

Kaynakların önbelleğe alınması, ağ isteklerinden kaçınarak uygulamanın çevrimdışı çalışmasına olanak tanır. Artık uygulama çevrimdışıyken 200 durum koduyla yanıt verebilir.

5. Tebrikler!

Service worker'ları ve önbellek depolama API'sini kullanarak web uygulamanızı nasıl çevrimdışı hale getireceğinizi öğrendiniz.

Serideki bir sonraki codelab, Workbox ile Çalışma'dır.