Progresif Web Uygulamaları: Workbox ile Çalışma

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir hizmet çalışanı olan bir web sitesini Workbox kullanacak şekilde dönüştüreceksiniz. Bu, Progresif Web Uygulaması atölyesi için tamamlayıcı nitelikteki bir dizi kod laboratuvarının ikincisidir. Önceki codelab'in adı Going Offline idi. Bu seride altı codelab daha var.

Neler öğreneceksiniz?

  • Mevcut bir hizmet çalışanını Workbox kullanacak şekilde dönüştürme
  • PWA'ya çevrimdışı yedek ekleme

Bilmeniz gerekenler

  • Temel HTML ve JavaScript

İhtiyacınız olanlar

2. Hazırlanın

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

Depoyu klonlarsanız pwa03--workbox 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, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodunun 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

  • service-worker.js: Uygulamanın hizmet çalışanı dosyası
  • offline.html - Bir sayfa kullanılamadığında kullanılacak çevrimdışı HTML

3. Workbox'a geçiş

Mevcut service worker'a baktığımızda önbelleğe alma işleminin iki adıma ayrılabileceği görülüyor:

  • Hizmet çalışanı yüklenirken alakalı dosyaları önbelleğe alma
  • Bu dosyaları yalnızca önbellek stratejisiyle tekrar yayınlayın.

Bu web uygulamasının HTML'si çok fazla değişmeyeceğinden index.html dosyası ve / rotası önbelleğe alınmaya devam edebilir. Ancak CSS ve JavaScript gibi diğer dosyalar değişebilir ve her değiştiğinde tüm hizmet çalışanı yaşam döngüsünü geçirmek istemeyiz. Ayrıca, mevcut hizmet çalışanı yalnızca CSS ve JavaScript'imizin bir alt kümesini dikkate alıyor. Tümünün kapsanmasını istiyoruz. Bu öğeleri "yeniden doğrulama sırasında eski" stratejisiyle önbelleğe almak daha mantıklıdır. Bu strateji, gerektiğinde arka planda güncellenebilen hızlı yanıtlar sunar.

Önceden önbelleğe alma tekrar ele alındı

Workbox'a geçiş yaparken mevcut kodların hiçbirini tutmamız gerekmez. Bu nedenle, service-worker.js içindeki her şeyi silin. Önceki laboratuvarda, bu Service Worker'ın derlenmesini ayarladık. Bu nedenle, Workbox'ı NPM modüllerinden getirmek için burada ESModule Imports'u kullanabiliriz. Önceden önbelleğe alma konusunu tekrar ele alarak başlayalım. service-worker.js alanına aşağıdaki kodu ekleyin:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

Açıklama

/index.html ve / için önbelleğe alma özelliğini ayarlamak üzere kullanabileceğiniz beş modül vardır. Bu kod çok gibi görünse de daha önce yazılan koddan çok daha güçlüdür.

Bu işlem, gerektiğinde diğer sayfaların önbelleğe eklenmesine olanak tanımak için Yalnızca Önbellek stratejisi yerine seçilen yeni bir Önce Önbellek önbelleğe alma stratejisi oluşturarak başlar. page-cache adı verilir. Workbox stratejileri, içeriğin önbelleğe kaydedilmesi ve önbellekten alınması sürecini etkileyebilecek çeşitli eklentiler kullanabilir. Burada, yalnızca iyi sunucu yanıtlarının önbelleğe alınmasını ve önbellekteki her öğenin 30 gün sonra temizlenmesini sağlamak için Cacheable Response (Önbelleğe Alınabilir Yanıt) eklentisi ve Expiration (Geçerlilik) eklentisi kullanılır.

Ardından, sıcak strateji önbelleği Workbox tarifi kullanılarak /index.html ve / ile stratejinin önbelleği ısıtılır. Bu işlem, hizmet çalışanının yükleme etkinliği sırasında bu öğeleri önbelleğe ekler.

Son olarak, yeni bir rota kaydedilir. Sayfa gezinmesi olan tüm istekler, önce önbellekten veya ağdan çekilip ardından yanıt önbelleğe alınarak bu Cache First stratejisiyle yönetilir.

Öğeleri önbelleğe alma

Önceden rota önbelleğe alma işlemi tamamlandığına göre, sitenin öğeleri (CSS ve JavaScript) için önbelleğe alma işlemini yeniden uygulama zamanı geldi. Bunu yapmak için önce StaleWhileRevalidate öğesini workbox-strategies içe aktarma işleminize ekleyin, ardından aşağıdaki kodu Service Worker'ınızın en altına ekleyin:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

Açıklama

Bu rota, isteğin türünün CSS, JavaScript veya Web Çalışanları'na karşılık gelen bir stil, komut dosyası ya da çalışan olup olmadığını belirleyerek başlar. Bu durumda, öncelikle önbellekten sunmaya çalışan, kullanılamıyorsa ağa geri dönen ve mümkünse önbellekteki sürümü ağdan güncellemeye çalışan bir "yeniden doğrulama sırasında eski" stratejisi kullanılır. Sayfa stratejisi gibi bu strateji de yalnızca iyi yanıtları önbelleğe alır.

4. Çevrimdışı yedek ekleme

Orijinal hizmet çalışanı Workbox'a taşındıktan sonra, PWA'nın çevrimdışıyken kilitlenmesini önlemek için yapılması gereken bir işlem daha vardır: çevrimdışı yedek ekleme.

Çevrimdışı olduğunuzda kullanılamayabilecek her şey için çevrimdışı yedekler ayarlanabilir: sayfalar, yazı tipleri, CSS, JavaScript, resimler vb. En azından, tüm PWA'lar için bir sayfa geri dönüşü ayarlanmalıdır. Böylece, kullanıcı önbellekte olmayan bir sayfaya gittiğinde uygulamanızın bağlamında kalır.

Workbox tarifleri, tam olarak bunu yapmak için kullanılabilecek bir çevrimdışı yedek tarif sunar. Bu işlevi kullanmak için önce offlineFallback öğesini workbox-recipes içe aktarma işleminize ekleyin, ardından aşağıdaki kodu Service Worker'ınızın en altına ekleyin:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

Açıklama

Çevrimdışı yedek tarifi, sağlanan yedeklerle önceden doldurulan bir Yalnızca Önbellek stratejisi oluşturur. Ardından, başarısız yönlendirme isteklerini (önbellekte hiçbir şey yoksa ve ağda bir şeye ulaşılamıyorsa) yakalayan bir Workbox varsayılan yakalama işleyicisi ayarlar, ilgili dosyaların içeriğini önbellekten çeker ve istek başarısız olmaya devam ettiği sürece içerik olarak döndürür.

5. Tebrikler!

Workbox'ı kullanarak rotalar için önbelleğe alma stratejilerini ayarlamayı ve PWA'nız için çevrimdışı yedekler sağlamayı öğrendiniz.

Serideki bir sonraki codelab IndexedDB'dir.