Workbox ile esnek arama deneyimleri oluşturma

Demián Renzulli
Demián Renzulli
X GitHub Arıza
Jeff Posnick

Bu codelab'de, Workbox ile nasıl esnek bir arama deneyimi uygulayabileceğiniz gösterilmektedir. Kullanılan demo uygulama, bir sunucu uç noktasını çağıran ve kullanıcıyı temel bir HTML sayfasına yönlendiren bir arama kutusu içerir.

Ölçüm

Optimizasyon eklemeden önce, uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.

  • Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

Yeni açılan sekmede, web sitesinin çevrimdışıyken nasıl davrandığını kontrol edin:

  1. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  2. Ağ sekmesini tıklayın.
  3. Chrome Geliştirici Araçları'nı açıp Ağ panelini seçin.
  4. Düşürme açılır listesinde Çevrimdışı'nı seçin.
  5. Demo uygulamasında bir arama sorgusu girip Ara düğmesini tıklayın.

Standart tarayıcı hata sayfası gösterilir:

Tarayıcıdaki varsayılan çevrimdışı kullanıcı deneyiminin ekran görüntüsü.

Yedek yanıt sağlama

Hizmet çalışanı, çevrimdışı sayfayı ön önbelleğe alma listesine ekleme kodunu içerir. Bu sayede, hizmet çalışanı install etkinliğinde her zaman önbelleğe alınabilir.

Genellikle, kitaplığı tercih ettiğiniz derleme aracınızla (ör. webpack veya gulp) entegre ederek Workbox'a bu dosyayı derleme sırasında ön önbelleğe alma listesine eklemesini talimatlamanız gerekir.

Basitleştirmek için bu işlemi sizin için zaten yaptık. public/sw.js adresindeki aşağıdaki kod bunu yapar:

const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);

Ardından, çevrimdışı sayfayı yedek yanıt olarak kullanacak kodu ekleyin:

  1. Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.
  2. public/sw.js dosyasının altına aşağıdaki kodu ekleyin:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match(FALLBACK_HTML_URL);
      break;
    default:
      return Response.error();
  }
});

Kod şu işlemleri yapar:

  • Tüm istekler için geçerli olacak varsayılan bir Yalnızca Ağ stratejisi tanımlar.
  • Başarısız istekleri yönetmek için workbox.routing.setCatchHandler() çağrısı yaparak global bir hata işleyici tanımlar. İstekler dokümanlar için olduğunda yedek çevrimdışı HTML sayfası döndürülür.

Bu işlevi test etmek için:

  1. Uygulamanızı çalıştıran diğer sekmeye geri dönün.
  2. Düşük hız açılır listesini tekrar Online olarak ayarlayın.
  3. Arama sayfasına geri gitmek için Chrome'un Geri düğmesine basın.
  4. Geliştirici Araçları'ndaki Önbelleği devre dışı bırak onay kutusunun devre dışı olduğundan emin olun.
  5. Hizmet çalışanınızın güncellendiğinden emin olmak için Chrome'un Yeniden yükle düğmesine uzun basın ve Önbelleği boşalt ve yeniden yükle'yi seçin.
  6. Düşürme açılır listesini tekrar Çevrimdışı olarak ayarlayın.
  7. Bir arama sorgusu girip Ara düğmesini tekrar tıklayın.

Yedek HTML sayfası gösterilir:

Tarayıcıdaki özel çevrimdışı kullanıcı deneyiminin ekran görüntüsü.

Bildirim izni isteme

Basitlik sağlamak amacıyla, views/index_offline.html adresindeki çevrimdışı sayfada, alt kısımdaki bir komut dosyası bloğunda bildirim izinleri isteğinde bulunma kodu zaten mevcuttur:

function requestNotificationPermission(event) {
  event.preventDefault();

  Notification.requestPermission().then(function (result) {
    showOfflineText(result);
  });
}

Kod şu işlemleri yapar:

  • Kullanıcı Bildirimlere abone ol'u tıkladığında requestNotificationPermission() işlevi çağrılır. Bu işlev, varsayılan tarayıcı izni istemlerini göstermek için Notification.requestPermission() işlevini çağırır. Söz, kullanıcı tarafından seçilen izinle çözülür. Bu izin granted, denied veya default olabilir.
  • Çözüme ulaştırılan izni, kullanıcıya uygun metni göstermek için showOfflineText() öğesine iletir.

Çevrimdışı sorguları sürdürme ve internete tekrar bağlandığınızda yeniden deneme

Ardından, çevrimdışı sorguları sürdürmek için Workbox Arka Plan Senkronizasyonu'nu uygulayın. Böylece tarayıcı, bağlantının geri geldiğini algıladığında sorguların yeniden denenmesi sağlanır.

  1. Düzenlemek için public/sw.js dosyasını açın.
  2. Dosyanın sonuna aşağıdaki kodu ekleyin:
const bgSyncPlugin = new workbox.backgroundSync.Plugin('offlineQueryQueue', {
  maxRetentionTime: 60,
  onSync: async ({queue}) => {
    let entry;
    while ((entry = await queue.shiftRequest())) {
      try {
        const response = await fetch(entry.request);
        const cache = await caches.open('offline-search-responses');
        const offlineUrl = `${entry.request.url}&notification=true`;
        cache.put(offlineUrl, response);
        showNotification(offlineUrl);
      } catch (error) {
        await this.unshiftRequest(entry);
        throw error;
      }
    }
  },
});

Kod şu işlemleri yapar:

  • workbox.backgroundSync.Plugin, başarısız isteklerin daha sonra yeniden denenebilmesi için bir kuyruğa eklenme mantığını içerir. Bu istekler IndexedDB'de kalıcı olarak saklanır.
  • maxRetentionTime, bir isteğin yeniden denemeye uygun olduğu süreyi belirtir. Bu durumda 60 dakikayı seçtik (bu sürenin ardından veriler silinir).
  • onSync, bu kodun en önemli parçasıdır. Bu geri çağırma işlevi, bağlantı tekrar kurulduktan sonra çağrılır. Böylece, sıraya alınmış istekler alınır ve ağdan getirilir.
  • Ağ yanıtı, &notification=true sorgu parametresi eklenerek offline-search-responses önbelleğine eklenir. Böylece, kullanıcı bildirimi tıkladığında bu önbellek girişi alınabilir.

Arka plan senkronizasyonunu hizmetinizle entegre etmek için arama URL'sine (/search_action) yapılan istekler için NetworkOnly stratejisi tanımlayın ve daha önce tanımlanmış bgSyncPlugin değerini iletin. public/sw.js dosyasının altına aşağıdaki kodu ekleyin:

const matchSearchUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return url.pathname === '/search_action' && !(notificationParam === 'true');
};

workbox.routing.registerRoute(
  matchSearchUrl,
  new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
);

Bu, Workbox'a her zaman ağa gitmesini ve istekler başarısız olduğunda arka plan senkronizasyon mantığını kullanmasını söyler.

Ardından, bildirimlerden gelen istekler için bir önbelleğe alma stratejisi tanımlamak üzere public/sw.js'ün alt kısmına aşağıdaki kodu ekleyin. Bu öğelerin önbellekten sunulabilmesi için CacheFirst stratejisini kullanın.

const matchNotificationUrl = ({url}) => {
  const notificationParam = url.searchParams.get('notification');
  return (url.pathname === '/search_action' && (notificationParam === 'true'));
};

workbox.routing.registerRoute(matchNotificationUrl,
  new workbox.strategies.CacheFirst({
     cacheName: 'offline-search-responses',
  })
);

Son olarak, bildirimleri gösterecek kodu ekleyin:

function showNotification(notificationUrl) {
  if (Notification.permission) {
     self.registration.showNotification('Your search is ready!', {
        body: 'Click to see you search result',
        icon: '/img/workbox.jpg',
        data: {
           url: notificationUrl
        }
     });
  }
}

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(
     clients.openWindow(event.notification.data.url)
  );
});

Özelliği test etme

  1. Uygulamanızı çalıştıran diğer sekmeye geri dönün.
  2. Düşük hız açılır listesini tekrar Online olarak ayarlayın.
  3. Arama sayfasına geri gitmek için Chrome'un Geri düğmesine basın.
  4. Hizmet çalışanınızın güncellendiğinden emin olmak için Chrome'un Yeniden yükle düğmesine uzun basın ve Önbelleği boşalt ve yeniden yükle'yi seçin.
  5. Düşürme açılır listesini tekrar Çevrimdışı olarak ayarlayın.
  6. Bir arama sorgusu girip Ara düğmesini tekrar tıklayın.
  7. Bildirimlere abone ol'u tıklayın.
  8. Chrome, uygulamaya bildirim gönderme izni vermek isteyip istemediğinizi sorduğunda İzin ver'i tıklayın.
  9. Başka bir arama sorgusu girip Ara düğmesini tekrar tıklayın.
  10. Düşük Hız açılır listesini tekrar Online olarak ayarlayın.

Bağlantı tekrar kurulduktan sonra bir bildirim gösterilir:

Çevrimdışı akış sürecinin tamamının ekran görüntüsü.

Sonuç

Workbox, PWA'larınızı daha dayanıklı ve ilgi çekici hale getirmek için birçok yerleşik özellik sunar. Bu kod laboratuvarında, çevrimdışı kullanıcı sorgularının kaybolmamasını ve bağlantı tekrar kurulduktan sonra yeniden denenebilmesini sağlamak için Workbox soyutlaması aracılığıyla Arka Plan Senkronizasyonu API'sinin nasıl uygulanacağını incelediniz. Demo basit bir arama uygulamasıdır ancak sohbet uygulamaları, sosyal ağda mesaj yayınlama vb. gibi daha karmaşık senaryolar ve kullanım alanları için benzer bir uygulama kullanabilirsiniz.