I have a service worker that intercepts calls to compile jsx if needed, and cache the result, and want my website to bootstrap only once the service worker got active.
Looking at the documentation I found the navigator.serviceWorker.ready property, which is a promise that resolves once the worker got active.
For some reason, the promise resolves before the activation should really be finished. Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="application/javascript">
navigator.serviceWorker.register('./sw.js', { scope: './' }).then((reg) => {
console.log('registered successfully')
}).catch(console.error)
navigator.serviceWorker.ready.then((registration) => {
console.log('worker active, bootstrapping')
// ... bootstrapping the app now (loading jsx scripts etc.)
})
</script>
...
</head>
....
</html>
sw.js
self.addEventListener('activate', (event) => {
console.log('activating')
event.waitUntil(self.clients.claim().then(() => console.log('active')))
})
Resulting log output:
registered successfully
activating
worker active, bootstrapping
active
Consequently, loading the app scripts as part of the bootstrapping will not be reliably intercepted by the service worker at the beginning, which will make the app fail.
I cleared the entire site data in Chrome including unregistering existing service workers, before I loaded the page.
Am I using the APIs wrong, e.g. misunderstanding the waitUntil?