ServiceWorker problem with events and ifs

I have a simple ServiceWorker. I’ve done some tests and I can’t understand some things.

First of all. Look at commented ifs. That code works good… but… why that ifs never fire? When new sw approach, website going straight to “updatefound” and comlite task inside “trackInstalling” no “if (reg.waiting) {” or “if (reg.installing) {” are fired. Why?

In addition. Look at commented event controllerchange. That event never fires after new sw successfull installation. Why?

js:

[CODE]const updateButton = document.querySelector(‘.js-update-btn’)

serviceWorker()

function serviceWorker () {
if (!navigator.serviceWorker) return

navigator.serviceWorker.register(‘/sw.js’).then(function (reg) {
if (!navigator.serviceWorker.controller) {
return
}

// if (reg.waiting) {
// updateReady(reg.waiting)
// return
// }
//
// if (reg.installing) {
// trackInstalling(reg.installing)
// return
// }

reg.addEventListener(‘updatefound’, function () {
trackInstalling(reg.installing)
})
})

// var refreshing
// navigator.serviceWorker.addEventListener(‘controllerchange’, function () {
// if (refreshing) return
// window.location.reload()
// refreshing = true
// })
}

function updateReady (worker) {
updateButton.disabled = false

updateButton.addEventListener(‘click’, function () {
updateButton.disabled = true
worker.postMessage({action: ‘skipWaiting’})
})
}

function trackInstalling (worker) {
worker.addEventListener(‘statechange’, function () {
if (worker.state == ‘installed’) {
updateReady(worker)
}
})
}[/CODE]

sw.js:

[CODE]var staticCacheName = ‘twc-v1’

var elementsToCache = [
‘/’,
‘/build/css/main-b932b1203a.css’,
‘/build/js/main-2480a77934.js’
]

self.addEventListener(‘install’, function (event) {
event.waitUntil(
caches.open(staticCacheName).then(function (cache) {
return cache.addAll(elementsToCache)
})
)
})

self.addEventListener(‘activate’, function (event) {
event.waitUntil(
caches.keys().then(function (cacheNames) {
return Promise.all(
cacheNames.filter(function (cacheName) {
return cacheName.startsWith(‘twc-‘) &&
cacheName != staticCacheName
}).map(function (cacheName) {
return caches.delete(cacheName)
})
)
})
)
})

self.addEventListener(‘fetch’, function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request)
})
)
})

self.addEventListener(‘message’, function (event) {
if (event.data.action === ‘skipWaiting’) {
self.skipWaiting()
}
})[/CODE]

Also in #JavaScript _↴