Why doesn't Service Worker seem to write to the console in Google Chrome when run on localhost?

user_255243 0
Viewed 3584

I have a very simple sample using the new Service Worker (Progressive Web Apps) -- see more at https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

The sample seems to fail to write on console.log() when I run my app from my localhost. However, it does work in a plunkr I created. Here are the steps for running it at plunkr:

1. Use the following URL (from your Google Chrome web browser) and the Plunkr editor will appear : https://plnkr.co/edit/FgG2krKDuSmIddR1Pskd?p=preview

Here's the code from the ServiceWorker.js which should display the fetch statments in the console.

//serviceWorker.js

console.log("well, I'm in serviceWorker.js");
self.addEventListener("fetch", function(event) {
  console.log("Fetch request for:", event.request.url);
});

plunkr first view

2. Once you get there, open up the Chrome dev console (so you can see the output) - HINT: Pressing F12 in Chrome should open your console.

Run the plunkr. You should see output like the following:

console output

The Failure

When I run this same code locally (on localhost running IISExpress), I do not see the fetch statements output to the console. (This is the code in the ServiceWorker.js file) I only see the initial registration.

It looks like: service worker registered

Things I've Tried

  1. Stopping and restarting IIS Express
  2. changing to the Chrome Dev tools Application tab and force an Update (see next image)
  3. changing to the Chrome Dev tools Application tab and force an Unregistered to run again and re-register (see next image)

update and unregister

In Chrome you will never see the console updated with the fetch items.

4. Run Locally In Firefox

However, I ran the same code in FireFox and that console does show the fetch items: firefox console

EDIT Someone asked if this problem occurs because of a Console.log filter so here's a snapshot showing there are no filters on and all console.log entries are indeed shown. This is numerous runs (reloads of the page). no console filter

service-worker google-chrome javascript
1 Answers

Wow. Okay, so it looks like Chrome will not output the ServiceWorker console statements to the "main" console.log -- as I showed in my question.

Instead, you have to :

1. click the Inspect link under the Application tab.

2. A window will pop up.

3. After that, you have to switch to that (pop up) window's Console tab and you will see the output.

However, the output still does not show up on the main console of the app. This is a bit of a pain. Also, that inspect link disappears at times and you have to restart the service worker. :(

Here's what it looks like: (I've layered the windows so you can see it in the image. See the "Inspect" link at the bottom right in the lower window.) inspect via application

EDIT and PART 2 -- With Second Solution

Okay, there is actually more to this than meets the eye. I had previously turned on the option, Update On Reload, so that my dev changes would be reloaded. It looks like the following: update on reload

This is supposed to force the Service Worker to reload each time. Well, it does. However, it has a side-effect in this case with this exact code example. It causes the initial registration to occur every time. However, the fetch code only runs the 2nd time you load the page.

That means if this option (Update On Reload) is on, it seems to register the service worker but never hit the fetch code. That's how it behaves in the main console. So I tested it by turning off Update On Reload and I saw the fetch statements in my main console in Chrome now. This is a bit problematic however, if you are doing dev, because you'll have to know to switch back and forth.

Here's a snapshot:

console works

user_2552430
Related