Dayanıklı arama deneyimleri

Hızlı ağlara sahip konumlarda bile, bir kullanıcı günün bazı anlarında bağlantısını kaybedebilir veya düzensiz bir ağa bağlanabilir. Örneğin: metroda bir kullanıcı telefonda bir e-ticaret sitesinde ürün arıyor. Ürün adını yazarlar, “ara” düğmesini tıklarlar ve sonuçları beklerken bağlantı kesilir ve standart tarayıcı çevrimdışı sayfasına yönlendirilir.

Sonuç olarak, kullanıcı siteye daha sonra tekrar gelip aynı görevi tekrarlamaya karar vermediği takdirde site olası bir işlemi ve müşteriyi kaybedebilir.

Bu durumlarda daha dayanıklı bir arama deneyimi sağlamak için Arka Plan Senkronizasyon API’sı, bağlantı kurtarıldıktan sonra yeniden denenebilmeleri için başarısız sorguları sürdürür. Web Push Bildirimleri ile birlikte bu teknik, kullanıcıyı arama sonuçları hakkında bilgilendirmenizi sağlayarak, onları hizmetinizle meşgul tutmanıza olanak tanır.

Üretim durumu #

Bu tekniğin somut uygulaması için, Android’de Chrome için Google Arama’ya bir göz atalım. Google Arama web uygulamasını ziyaret ederken ve çevrimdışı olurken, standart ağ hatası sayfasını göstermek yerine, site özel bir çevrimdışı yanıt sunar, ancak kullanıcıların arama sorgularını hemen girmelerine olanak tanır. Sayfa ayrıca, bağlantı kurtarıldığında arama sonuçları sayfasına bir bağlantı almak için kullanıcıdan bildirimleri etkinleştirmesini ister.

Kullanıcı bir arama yaptığında, hizmet çalışanı sorgunun ertelenmesine ve cihaz tekrar çevrimiçi olur olmaz Google’ın sunucularına gönderilmesine izin verir. Arka Plan Senkronizasyon API’sıve kullanarak kullanıcıyı sonuç hakkında bilgilendirmek için API’yi itin.

Hizmet çalışanları, Google Arama’nın anlamlı bir çevrimdışı deneyim sunmasına ve kullanıcının ilgisini canlı tutarak görevlerini tamamlamasına izin verir.

Workbox ile esnek arama deneyimleri uygulayın #

Google Arama bu işlevi Workbox kullanmadan uygularken, çalışma kutusu kitaplığı sağlayarak kolaylaştırır. Arka Plan Senkronizasyonu modülübizim için birçok uygulama detayıyla ilgilenir.

Workbox’ta esnek bir arama deneyimi uygulamak için önce aşağıdaki modülleri servis çalışanınıza alın:

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

Ardından, örneğinin bir örneğini oluşturun workbox.backgroundSync eklentisidaha sonra yeniden denenebilmeleri için başarısız istekleri bir kuyruğa otomatik olarak eklemek için:

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}&ampnotification=true`;
cache.put(offlineUrl, response);
showNotification(offlineUrl);
} catch (error) {
await this.unshiftRequest(entry);
throw error;
}
}
},
});

Eklenti aşağıdaki parametreleri alır:

• offlineQueryQueue: Başarısız istekleri sürdürmek için kullanılacak kuyruğun adı IndexedDB.
• maxRetentionTime: Bir isteğin yeniden denenebileceği dakika cinsinden süre miktarı, bu noktadan sonra reddedilecektir.
• onSync: Bağlantı kurtarıldığında tetiklenecek olan geri arama. Bu noktada, başarısız olan her istek çağrılarak kuyruğa alınabilir ve işlenebilir. queue.shiftRequest().

Son olarak, bir tanımlayın sadece ağ arama URL’sine yönelik istekler için çalışma zamanı önbelleğe alma stratejisi (örn. /search_action) ve onu ilet bgSyncPlugin önceden tanımlanmış:

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

Bu, Workbox’a hizmet çalışanı arama uç noktası için bir isteği yakaladığında her zaman ağa gitmesini ve çevrimdışı senaryoları yönetme görevini Arka Plan Senkronizasyonu eklentisine devretmesini söyler.

Sonuç olarak, kullanıcı arama yaparken çevrimdışı olduğunda, sorgu otomatik olarak kaydedilir. Bağlantı kurtarıldığında, isteği işlemek ve kullanıcıyı sonuç hakkında bilgilendirmek için çevrimdışı mantık tetiklenir.

Çözüm #

Bu makalede, çevrimdışı senaryolara zarafetle yanıt verebilecek bir arama deneyiminin nasıl uygulanacağını öğrendiniz. Arka Plan Senkronizasyon API’sı ve API’yi itin. Süreci basitleştirdiği için bu özelliğin nasıl uygulanacağını göstermek için Workbox’ı kullandık, ancak aynısı normal servis çalışanı kodu yazarak da elde edilebilir.

Kod örneklerinde, özelliğin temel kısmına odaklandık: isteklerin hizmet çalışanı tarafından nasıl yakalandığı ve yönetildiği. Çevrimdışı sayfa ve bildirim mantığı da dahil olmak üzere bu işlevin nasıl uygulanacağına ilişkin adım adım kılavuz için bu makalenin sonundaki codelab’e göz atın.