Progresif Web Uygulamaları: Çevrimdışı Olma

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasını alıp çevrimdışı çalışacak şekilde ayarlayacaksınız. Bu, Progresif Web Uygulaması atölyesinde tamamlayıcı codelab'ler serisinin ilki. Bu seride yedi tane codelab daha var.

Neler öğreneceksiniz?

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

Bilmeniz gerekenler

  • Temel HTML ve JavaScript

Gerekenler

2. Ayarlamalarınızı Yapın

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

Depoyu klonlarsanız starter dalında olduğunuzdan emin olun. ZIP dosyası söz konusu dalın kodunu da içerir.

Bu kod tabanı, Node.js 14 veya sonraki bir sürümü gerektirir. Kodu edindikten sonra, ihtiyaç duyacağınız tüm bağımlılıkları yüklemek için npm ci adlı kodu code\u39;s klasöründeki komut satırından çalıştırın. Ardından, codelab'in geliştirme sunucusunu başlatmak için npm start komutunu çalıştırın.

Kaynak kodun README.md dosyası, dağıtılan tüm dosyalar için açıklama sağlar. Ayrıca, bu codelab boyunca üzerinde çalışacağınız temel mevcut dosyalar aşağıda belirtilmiştir:

Önemli Dosyalar

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

3. Çevrimdışı Test

Herhangi bir değişiklik yapmadan önce web uygulamasının çevrimdışı çalışıp çalışmadığını test edelim. Bunun için, bilgisayarınızı çevrimdışına alıp web uygulamasını yeniden yükleyebilir veya Chrome kullanıyorsanız:

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

Chrome Geliştirici Araçları Uygulama sekmesi, Çevrimdışı onay kutusu işaretli olarak Hizmet Çalışanları'na açıldı

Site test edilince ve çevrimdışı olarak başarıyla yüklenemediğinde, internette bazı işlevler eklemenin zamanı geldi! Çevrimdışı onay kutusunun işaretini kaldırın ve sonraki adıma geçin.

4. Çevrimdışına al

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

Hizmet Çalışanı Kaydetme

Boş bir hizmet çalışanı dosyası zaten var. Bu nedenle, değişikliklerin gösterildiğinden emin olmak için dosyayı uygulamamıza kaydedin. Bunu yapmak için aşağıdaki kodu js/main.js öğesinin üst kısmına ekleyin:

import swURL from 'sw:../service-worker.js';

// 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 {
      const reg = await navigator.serviceWorker.register(swURL);
      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 bunları nereye yönlendireceğini seçmesi gerekir. Bunu yapmak için aşağıdakileri service-worker.js klasörüne 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 geri dönün, önizleme sekmenizi kapatın ve tekrar açın. Hizmet çalışanındaki farklı etkinliklere karşılık gelen console.log'ler görmeniz gerekir.

Ardından, tekrar çevrimdışı olun ve siteyi yenileyin. Çevrimdışı olsanız bile yüklendiğini göreceksiniz.

Açıklama

Hizmet çalışanı yükleme etkinliği sırasında, Önbellek Depolama API'sı 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 sütun gerektiğinde adlandırılır. Bunun nedeni, ihtiyaç duyulduğunda veya istendiğinde dosya grubunu, yükleme sırasında önbelleğe almak yerine önleme amaçlı olarak önbelleğe almasıdır.

Servis çalışanı siteyi kontrol ettikten sonra, istenen kaynaklar hizmet çalışanı aracılığıyla bir proxy gibi iletilir. Her istek, bu hizmet çalışanı içinde önbellekte eşleşme (eşleşme varsa) arayan ve önbelleğe alınan kaynakla yanıt veren bir getirme etkinliği tetikler. Eşleşme yoksa kaynak normal şekilde istenir.

Kaynakları önbelleğe almak, ağ isteklerinden kaçınarak uygulamanın çevrimdışı çalışmasına olanak tanır. Artık uygulama, internete bağlı değilken 200 durum koduyla yanıt verebilir!

5. Tebrikler!

Servis çalışanları ve önbellek depolama API'sini kullanarak web uygulamanızı çevrimdışına nasıl alabileceğinizi öğrendiniz.

Dizideki bir sonraki codelab'de Workbox ile çalışma bölümü yer almaktadır.