Bu codelab'de, Workbox'la esnek bir arama deneyiminin nasıl uygulanacağı açıklanmaktadır. Kullandığı demo uygulama, sunucu uç noktasını çağıran ve kullanıcıyı temel bir HTML sayfasına yönlendiren bir arama kutusu içerir.
Ölçüm
Optimizasyonları eklemeden önce, ilk olarak uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.
- Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.
Yeni açılan sekmede, web sitesinin çevrimdışı durumdayken nasıl davrandığını kontrol edin:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Chrome Geliştirici Araçları'nı açın ve Ağ panelini seçin.
- Kısıtlama açılır listesinden Çevrimdışı'nı seçin.
- Demo uygulamada bir arama sorgusu girip Ara düğmesini tıklayın.
Standart tarayıcı hata sayfası gösterilir:
Yedek yanıt sağlayın
Service Worker, çevrimdışı sayfayı önbellek listesine eklemek için gereken kodu içerir. Böylece bu kod, dilediğiniz zaman Service Worker install etkinliğinde önbelleğe alınabilir.
Genellikle, kitaplığı derleme aracınızla (ör. webpack veya gulp) entegre ederek bu dosyayı derleme sırasında ön önbellek listesine eklemesi için Workbox'a talimat vermeniz gerekir.
Kolaylık olması açısından bu işlemi sizin yerinize yaptık. public/sw.js adresinde bulunan aşağıdaki kod bunu yapar:
const FALLBACK_HTML_URL = '/index_offline.html';
…
workbox.precaching.precacheAndRoute([FALLBACK_HTML_URL]);
Daha sonra, çevrimdışı sayfayı yedek yanıt olarak kullanacak kodu ekleyin:
- Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.
public/sw.jskodunun altına şu 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 şunları 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()yöntemini çağırarak genel bir hata işleyici tanımlar. Dokümanlar için istekler olduğunda, çevrimdışı bir yedek HTML sayfası döndürülür.
Bu işlevi test etmek için:
- Uygulamanızı çalıştıran diğer sekmeye geri dönün.
- Kısıtlama açılır listesini tekrar Çevrimiçi olarak ayarlayın.
- Arama sayfasına geri dönmek için Chrome'un Geri düğmesine basın.
- Geliştirici Araçları'ndaki Önbelleği devre dışı bırak onay kutusunun devre dışı olduğundan emin olun.
- Hizmet çalışanınızın güncellenmesini sağlamak için Chrome'un Yeniden yükle düğmesine uzun basın ve Önbelleği boşalt ve tam yeniden yükle'yi seçin.
- Kısıtlama açılır listesini tekrar Çevrimdışı olarak ayarlayın.
- Bir arama sorgusu girin ve Ara düğmesini tekrar tıklayın.
Yedek HTML sayfası gösterilir:
Bildirim izni iste
Basitlik sağlaması açısından, views/index_offline.html adresindeki çevrimdışı sayfa, en alttaki komut dosyası bloğunda bildirim izni istemek için gereken kodu zaten içermektedir:
function requestNotificationPermission(event) {
event.preventDefault();
Notification.requestPermission().then(function (result) {
showOfflineText(result);
});
}
Kod şunları yapar:
- Kullanıcı bildirimlere abone ol'u tıkladığında, varsayılan tarayıcı izni istemini göstermek için
requestNotificationPermission()işlevi çağrılır veNotification.requestPermission()işlevi çağrılır. Vaat, kullanıcının seçtiği izinle (granted,deniedveyadefaultolabilir) çözüme ulaştırılır. - Kullanıcıya uygun metni göstermek için çözümlenen izni
showOfflineText()öğesine iletir.
Çevrimdışı sorguları sürdür ve internete tekrar bağlandığında yeniden dene
Ardından, tarayıcı bağlantının geri geldiğini algıladığında yeniden denenebilmesi için, çevrimdışı sorgularda kalmak amacıyla Çalışma Kutusu Arka Plan Senkronizasyonu'nu uygulayın.
- Düzenlemek için
public/sw.jsuygulamasını açın. - 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}¬ification=true`;
cache.put(offlineUrl, response);
showNotification(offlineUrl);
} catch (error) {
await this.unshiftRequest(entry);
throw error;
}
}
},
});
Kod şunları yapar:
workbox.backgroundSync.Plugin, başarısız istekleri bir sıraya ekleme mantığını içerir. Böylece bu istekleri daha sonra yeniden deneyebilirsiniz. Bu istekler IndexedDB'de kalıcı olacak.maxRetentionTimebir isteğin ne kadar süre yeniden denenebileceğini belirtir. Bu örnekte süre 60 dakika olarak belirlenmiştir (bu süre silinir).onSync, bu kodun en önemli parçasıdır. Bu geri çağırma, bağlantı tekrar kurulduğunda çağrılacak. Böylece sıraya alınan istekler ağdan getirilecek.- Bir kullanıcı bildirimi tıkladığında bu önbellek girişinin alınabilmesi için ağ yanıtı
offline-search-responsesönbelleğine¬ification=truesorgu parametresiyle birlikte eklenir.
Arka planda senkronizasyonu hizmetinize entegre etmek için arama URL'sine (/search_action) yönelik istekler için NetworkOnly stratejisi tanımlayın ve daha önce tanımlanan bgSyncPlugin değerini iletin. public/sw.js kodunun altına şu 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 aşağıdaki kodu public/sw.js öğesinin altına ekleyin. Önbellekten sunulabilmeleri için bir CacheFirst stratejisi 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östermek için 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
- Uygulamanızı çalıştıran diğer sekmeye geri dönün.
- Kısıtlama açılır listesini tekrar Çevrimiçi olarak ayarlayın.
- Arama sayfasına geri dönmek için Chrome'un Geri düğmesine basın.
- Hizmet çalışanınızın güncellenmesini sağlamak için Chrome'un Yeniden yükle düğmesine uzun basın ve Önbelleği boşalt ve tam yeniden yükle'yi seçin.
- Kısıtlama açılır listesini tekrar Çevrimdışı olarak ayarlayın.
- Bir arama sorgusu girin ve Ara düğmesini tekrar tıklayın.
- Bildirimlere abone ol'u tıklayın.
- Chrome, uygulamanın bildirim göndermesine izin vermek isteyip istemediğinizi sorduğunda İzin ver'i tıklayın.
- Başka bir arama sorgusu girin ve Ara düğmesini tekrar tıklayın.
- Kısıtlama açılır listesini tekrar Çevrimiçi olarak ayarlayın.
Bağlantı tekrar sağlandığında bir bildirim gösterilir:
Sonuç
Workbox, PWA'larınızı daha dayanıklı ve ilgi çekici hale getiren birçok yerleşik özellik sunar. Bu codelab'de çevrimdışı kullanıcı sorgularının kaybolmadığından ve bağlantı tekrar kurulduğunda yeniden denenebildiğinden emin olmak için, Workbox soyutlama yöntemiyle Arka Plan Senkronizasyonu API'sını nasıl uygulayacağınızı öğrendiniz. Demo, basit bir arama uygulamasıdır. Ancak sohbet uygulamaları, sosyal ağda mesaj yayınlama gibi daha karmaşık senaryolar ve kullanım alanları için benzer bir uygulama kullanabilirsiniz.