Understanding ServiceWorker registration

I'm reading the ServiceWorker getting started docs https://developers.google.com/web/fundamentals/getting-started/primers/service-workers.

So first we register our ServiceWorker with the scope. So I did that as below

<!DOCTYPE html>
<html>
<head>
    <title>Getting started with Service Worker</title>
</head>
<body>

<script type="text/javascript">

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}    

</script>

</body>
</html>

and created a sw.js file and wrote a console.log inside sw.js

console.log("This is sw.js")

So when I access the index.html file the first time, that console.log is executed and ServiceWorker registration successful message is printed. But when I refresh the page second time, it only prints the message ServiceWorker registration successful. So why didn't it executed the console.log inside sw.js for the second time. I was expecting it to execute that console.log second time. Am I missing the point here?

Understanding ServiceWorker registration

2 Answers