Bazı senaryolarda, Service Worker'ın etkin durumdaki herhangi bir kuruluşla proaktif olarak kontrol ettiği sekmelerdir. Örnekler:
- Service Worker'ın yeni bir sürümü yüklendiğinde sayfayı bilgilendirme yeni işlevlere erişmesi için kullanıcıya bir "Yenilemek için güncelle" düğmesi gösterebilir hemen teslim edebilirsiniz.
- Hizmet çalışanı tarafında önbelleğe alınan verilerde gerçekleşen bir değişikliği kullanıcıya bildirmek için "Uygulama artık çevrimdışı çalışmaya hazır" veya "Uygulamanın yeni sürümü içerik mevcut".
Service Worker'ın mesaj alması gerekmeyen durumlara bu tür kullanımlar denir. "güncelleme güncellemeleri" ile iletişim kurmak için bu sayfayı ziyaret edin. Bu kılavuzda, farklı proje yönetimi metodolojilerini standart özelliklerini kullanarak sayfalar ve hizmet çalışanları arasında bu tür bir iletişimin tarayıcı API'leri ve Workbox kitaplığı gibi özellikler dahildir.
Üretim durumları
Tinder
Tinder PWA, kullanıcıların dinlemek için workbox-window kullanıyor
Service Worker yaşam döngüsü önemli anlarını ("yüklü", "kontrollü" ve
"etkinleştirildi"). Bu şekilde, yeni bir hizmet çalışanı devreye girdiğinde "Güncelleme Mevcut" gösterilir.
banner'ını kullanarak PWA'yı yenileyebilir ve en yeni özelliklere erişebilir:
Squoosh
Squoosh PWA'da, hizmet çalışanı gerekli tüm çevrimdışı çalışmasını sağlamak için sayfaya bir mesaj göndererek "Çevrimdışı çalışmaya hazır" kısa mesajı gönderin:
Workbox'ı kullanma
Service Worker yaşam döngüsü etkinliklerini dinleyin
workbox-window, önemli hizmet çalışanı yaşam döngüsünü dinlemek için basit bir arayüz sağlar
etkinlikler başlıklı makaleyi inceleyin.
Temelde kitaplık, istemci tarafı API'ler (ör.
updatefound
ve statechange
ve workbox-window nesnesinde daha üst düzey etkinlik işleyiciler sağlar. Böylece,
bu etkinlikleri tükettiğini düşünelim.
Aşağıdaki sayfa kodu, Service Worker'ın yeni sürümü yüklendiğinde bunu tespit etmenizi sağlar. böylece kullanıcıya iletebilmek için:
const wb = new Workbox('/sw.js');
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
// Show "Update App" banner
}
});
wb.register();
Önbellek verilerindeki değişiklikler sayfasını bildir
Çalışma kutusu paketi
workbox-broadcast-update
, önbelleğe alınan bir yanıtın güncellendiğini pencere istemcilerine bildirmek için standart bir yol sunar. Bu
StaleOtherReValid ile birlikte en yaygın olarak kullanılır.
stratejisini inceleyin.
Güncellemeleri yayınlamak için strateji seçeneklerinize broadcastUpdate.BroadcastUpdatePlugin ekleyin:
hizmet çalışanı tarafı:
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';
registerRoute(
({url}) => url.pathname.startsWith('/api/'),
new StaleWhileRevalidate({
plugins: [
new BroadcastUpdatePlugin(),
],
})
);
Web uygulamanızda aşağıdaki gibi etkinlikleri dinleyebilirsiniz:
navigator.serviceWorker.addEventListener('message', async (event) => {
// Optional: ensure the message came from workbox-broadcast-update
if (event.data.meta === 'workbox-broadcast-update') {
const {cacheName, updatedUrl} = event.data.payload;
// Do something with cacheName and updatedUrl.
// For example, get the cached content and update
// the content on the page.
const cache = await caches.open(cacheName);
const updatedResponse = await cache.match(updatedUrl);
const updatedText = await updatedResponse.text();
}
});
Tarayıcı API'lerini kullanma
Workbox'ın sağladığı işlevler ihtiyaçlarınız için yeterli değilse aşağıdaki tarayıcıyı kullanın "Yayın güncellemelerini" uygulayacak API'ler:
Yayın Kanalı API'si
Hizmet çalışanı, bir BroadcastChannel oluşturur
nesne alır ve
iletilerse buna benzer. Bu mesajları almakla ilgilenen herhangi bir bağlam (ör. sayfa)
BroadcastChannel nesnesini tanımlayın ve mesaj almak için bir mesaj işleyici uygulayın.
Yeni bir hizmet çalışanı yüklendiğinde sayfayı bildirmek için aşağıdaki kodu kullanın:
// Create Broadcast Channel to send messages to the page
const broadcast = new BroadcastChannel('sw-update-channel');
self.addEventListener('install', function (event) {
// Inform the page every time a new service worker is installed
broadcast.postMessage({type: 'CRITICAL_SW_UPDATE'});
});
Sayfa, sw-update-channel için abone olarak şu etkinlikleri dinler:
// Create Broadcast Channel and listen to messages sent to it
const broadcast = new BroadcastChannel('sw-update-channel');
broadcast.onmessage = (event) => {
if (event.data && event.data.type === 'CRITICAL_SW_UPDATE') {
// Show "update to refresh" banner to the user.
}
};
Bu basit bir tekniktir, ancak bununla ilgili sınırlama, tarayıcı desteğidir: Bu yazıyı yazıldığı anda, Safari bu API'yi desteklemiyor.
İstemci API'si
Client API, istemciler arasında
hizmet çalışanının birden fazla müşteriyle iletişim kurma yöntemidir.
Client nesne.
Odaklanılan son sekmeye mesaj göndermek için aşağıdaki Service Worker kodunu kullanın:
// Obtain an array of Window client objects
self.clients.matchAll(options).then(function (clients) {
if (clients && clients.length) {
// Respond to last focused tab
clients[0].postMessage({type: 'MSG_ID'});
}
});
Sayfa, şu mesajlara müdahale etmek için bir mesaj işleyici uygular:
// Listen to messages
navigator.serviceWorker.onmessage = (event) => {
if (event.data && event.data.type === 'MSG_ID') {
// Process response
}
};
Client API, birden fazla etkin sekmeye bilgi yayınlama gibi durumlar için mükemmel bir seçenektir. İlgili içeriği oluşturmak için kullanılan API tüm önemli tarayıcılar tarafından desteklenir, ancak tüm yöntemleri desteklenmez. Tarayıcı desteğini kontrol edin anlamaktır.
Mesaj Kanalı
Mesaj Kanalı için gerekenler
Sayfadan hizmet çalışanına bir bağlantı noktası geçirerek
kanalı vardır. Sayfa, bir MessageChannel nesnesini örneklendirir ve
postMessage() arayüzü üzerinden hizmet çalışanına bağlantı noktası:
const messageChannel = new MessageChannel();
// Init port
navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
messageChannel.port2,
]);
Sayfa, bir "onmessage" komutu uygulayarak mesajları dinler işleyicisi şu bağlantı noktasında:
// Listen to messages
messageChannel.port1.onmessage = (event) => {
// Process message
};
Hizmet çalışanı, bağlantı noktasını alır ve buna bir referans kaydeder:
// Initialize
let communicationPort;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'PORT_INITIALIZATION') {
communicationPort = event.ports[0];
}
});
Bu noktadan sonra postMessage() öğesini çağırarak sayfaya mesaj gönderebilir.
bağlantı noktası:
// Communicate
communicationPort.postMessage({type: 'MSG_ID' });
MessageChannel bağlantı noktalarının başlatılması gerektiğinden uygulanması daha karmaşık olabilir ancak
tüm başlıca tarayıcılar tarafından desteklenir.
Sonraki adımlar
Bu kılavuzda, pencereden hizmet çalışanı iletişimine dair belirli bir durumu inceledik: "güncelleme güncellemeleri yayınla". İncelenen örnekler arasında önemli hizmet çalışanının dinlenmesi yer alır ve içerikteki ya da önbelleğe alınan verilerdeki değişikliklerle ilgili sayfaya iletilmesini sağlayan bir iletişim yöntemidir. Örneğin, Service Worker'ın sayfayla proaktif olarak iletişim kurduğu daha ilginç kullanım ve hiç mesaj almadan.
Pencere ve hizmet çalışanı iletişimleriyle ilgili diğer kalıplar için aşağıdaki makalelere göz atın:
- Zorunlu önbelleğe alma rehberi: kaynaklarını önceden önbelleğe almanız gerekir (ör. önceden getirme senaryolarında).
- İki yönlü iletişim: Bir görevi bir hizmet çalışanına delege etme (ör. ve sayfayı ilerleme durumu hakkında bilgilendirmek.