How to handle fetch events from the very beginning using a Service Worker?

Question

How to handle fetch events from the very beginning using a Service Worker?

3.4k Views Asked by noodle71 At 19 December 2016 at 14:20

I'm trying to build a basic service worker to handle all AJAX requests sent from my website.

Service worker is subscribed to the fetch event. I can handle all request sent but it doesn't work the first time the service worker is installed.

Once the service worker is installed, if I refresh the web page, then the fetch event handler works.

I want my service worker to fetch all requests from the very beginning. Is it possible?

Here's the code I have:

index.html

<!DOCTYPE html>
<html>
<body>
<h2>Service Worker Demo Page</h2>
<script type="text/javascript">

  if (navigator.serviceWorker) {

    navigator.serviceWorker.register('./sw.js')
      .then(function (registration) {
        console.debug('Registration within scope %s. More details %O', registration.scope, registration);
        return fetch('https://www.google.com');
      })
      .then(console.info)
      .catch(console.warn);

  }

</script>

</body>

sw.js

self.addEventListener('fetch', function (e) {
  console.info('%s request to %s. More details: %o'
    , e.request.method
    , e.request.url
    , e
  );
});

Original Q&A

There are 3 best solutions below

**sdgluck** · Answer 1 · 2016-12-19T14:37:28.390000

The default behaviour of is that a webpage must be refreshed before its service worker becomes active. So, the "very beginning" for you (the user) is not the same "very beginning" of the service worker.

However, you can override this default behaviour by using clients.claim(). Read about it on MDN:

// sw.js
self.addEventListener('activate', function(event) {
  event.waitUntil(self.clients.claim());
});

Note that for your use case you should ensure that the SW is registered and activated before firing any fetch events.

______

Read more about the service worker lifecycle in the "Service Worker Lifecycle" blog post. Here are some relevant bullet points...

A service worker won't receive events like fetch and push until it successfully finishes installing and becomes "active".

By default, a page's fetches won't go through a service worker unless the page request itself went through a service worker. So you'll need to refresh the page to see the effects of the service worker. clients.claim() can override this default, and take control of non-controlled pages.

**Lewis** · Answer 2 · 2016-12-19T14:47:48.683000

Yes, it is possible.

In order to catch the very beginning requests, Service Worker must take controls over the initial pages that call those requests right after it is being activated. And unfortunately, this is not enabled by default. You still have to call clients.claim for achieving this expected behaviour.

self.onactivate = function(event){
  event.waitUntil(self.clients.claim());
};

**noodle71** · Answer 3 · 2016-12-19T17:05:06.900000

Thanks a lot for all the answers, finally this is the code.

I don't think it's the best solution but it works. Service worker handle all request from the very beginning even if you refresh the web page.

HTML:

<!--index.html-->
<!DOCTYPE html>
<html>
<body>
<h2>Service Worker Demo Page</h2>
<script type="text/javascript">

  function init() {
    fetch('https://www.google.com');
  }

  function subscribeToSWMessages() {
    navigator.serviceWorker.onmessage = function (event) {
      console.info("Broadcasted message received: %s", event.data.message);

      if (event.data.command == "swActive") {
        init();
      }
    };
  }

  if (navigator.serviceWorker) {

    subscribeToSWMessages();

    navigator.serviceWorker.register('./sw.js')
      .then(function (registration) {
        console.debug('Registration within scope %s. More details %O', registration.scope, registration);
        navigator.serviceWorker.controller.postMessage({
          "command": "swRegistrationOk",
          "message": "Service Worker registration ok"
        });
      })
      .catch(console.warn);
  }

</script>

</body>
</html>

Service worker:

// index.js
self.addEventListener('activate', function (event) {
  event.waitUntil(self.clients.claim().then(sendActiveSignalToClients));
});

self.addEventListener('fetch', function (e) {
  console.info('%s request to %s. More details: %o'
    , e.request.method
    , e.request.url
    , e
  );
});

self.addEventListener('message', function (event) {
  console.info("Broadcasted message received: %s", event.data.message);

  if (event.data.command == "swRegistrationOk") {
    event.waitUntil(sendActiveSignalToClients());
  }
});

function sendActiveSignalToClients() {

  self.clients.matchAll().then(function (clients) {
    clients.forEach(function (client) {
      client.postMessage({
        "command": "swActive",
        "message": "Service Worker is active"
      });
    })
  })

}

How to handle fetch events from the very beginning using a Service Worker?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SERVICE-WORKER

Trending Questions

Popular # Hahtags

Popular Questions