Lifecycle and events during ServiceWorker installation

[bochap]

Thanks for the great examples and it was interesting going through them on the Mobile Web Specialist track at Udacity.

I have a question about the block of code found at the file

wittr/public/js/main/IndexController.js

Lines 29 to 32 in 4e5b877

	if (reg.installing) {
	indexController._trackInstalling(reg.installing);
	return;
	}

While testing it I believe this is called by the first service worker that is installed on the browser. So when updating the service worker implementation this will not get called since reg.installing will be null for the new service worker.

And since that code block occurs after the block

wittr/public/js/main/IndexController.js

Lines 20 to 22 in 4e5b877

	if (!navigator.serviceWorker.controller) {
	return;
	}

which will exit the function if navigator.serviceWorker.controller is undefined which occurs when the first service worker is installing the code inside if (req.installing) will never be executed.

It will be great if my assumption can be verified. Thanks

[bochap]

After more testing I realised that I was wrong about

wittr/public/js/main/IndexController.js

Lines 20 to 22 in 4e5b877

	if (!navigator.serviceWorker.controller) {
	return;
	}

. It run the code after that code for the initial service worker if the page was refresh in the same browser after the first page load. But I still could not figure out when

wittr/public/js/main/IndexController.js

Lines 29 to 32 in 4e5b877

	if (reg.installing) {
	indexController._trackInstalling(reg.installing);
	return;
	}

gets triggered.

[bochap]

Hi All,

I did some more research and I think that registration.installing never gets call in the code. I performed various tests and was never ever able to trigger the registration.installing code block. I am able to identify the trigger for the other installation events though. It will be great if someone can provide some light on whether the registration.installing block is not required as I understand or if I am missing anything. Sorry for the long post.

This block gets called by the new service worker, it happens if you click on browser refresh without the option "Update on reload" turned on. The option will most likely be off on most users' browsers. The second way to trigger this is by opening a new browser tab and navigating to a url which is in the scope of the service worker while the old tab is still opened.

      // If there is an updated worker already waiting, call update ready.
      // This happens the existing worker session is not closed and the user refreshes the browser
      // or opens a new browser tab
      if (registration.waiting) {
       console.log(`registration.waiting: ${(new Date()).toString()}`);
       indexController._updateReady(registration.waiting);
       return;
      }

This block of code is used by the old service worker since its state is already at activated. So this event handler watches for the availability of new service workers been available.

      // Otherwise listen for new workers arriving, track its progress and call update ready if installed
      // This is triggered when there is a new service worker that should replace the current version appears
      registration.addEventListener('updatefound', function(){
        console.log(`updatefound: ${(new Date()).toString()}`);
        indexController._trackInstalling(registration.installing);
      });

This block should have been called by the new installing service worker. I was hoping to get this to run when I introduce a delay in the service installation process but I was never able to get it to trigger.

      // If there is an updated worker installing, track its progress and call update ready if installed
      if(registration.installing) {
        console.log(`registration.installing: ${(new Date()).toString()}`);
        indexController._trackInstalling(registration.installing);
        return;
      }

Installation event with a 10 second delay chain to the Promise

      self.addEventListener('install', function(event) {
            event.waitUntil(
                  caches.open(staticCacheName)
                  .then(function(cache) {
                        console.log(`installation started: ${(new Date()).toString()}`);
                        return cache.addAll([
                              'skeleton',
                              'js/main.js',
                              'css/main.css',
                              'imgs/icon.png',
                              'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
                              'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
                        ])
                        .then(function() {
                              return new Promise((resolve) => setTimeout(function() {
                                    console.log(`installation complete: ${(new Date()).toString()}`);
                                    resolve();
                              }, 10000));
                        });
                 })
            );
      });

The following are the console logs with preserved logs option of the various test scenarios.

1. First Load With No SW

2. New Tab During First Load With No SW during Installation

3. Second Load With SW From First Load

4. Second Load WIth SW From First Load and New SW

5. New Tab during Second Load With SW From First Load and New SW Installing

6. New Tab during Second Load With SW From First Load and New SW Installed

7.New Tab during Second Load With SW From First Load, New SW Installed and Browser Reload

[anuraggautam77]

👍

[DervishD]

Thanks for opening this issue. I was going nuts about this, because I didn't understand the reason why reg.installing was being checked, and in all my tests the results were identical to yours. In fact, I checked the specification and from what I understand, it's impossible to get reg.installing as true and not having updatefound fired (the opposite it's actually true). Of course, I may have misunderstood the specification, or it may have changed since the course was published.

I didn't see any reason why both branches had to exist, but I thought I was doing something wrong. Thanks A LOT for confirming my suspicions: the reg.installing branch is entirely superfluous.