OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

serviceWorker 'activate' and 'message' events not firing

  • Thread starter Thread starter artooras
  • Start date Start date
A

artooras

Guest
I'm trying to use serviceWorkers for the first time, and even though it started well, I'm a little stuck..

Here's my very simple service-worker.js:

Code:
self.addEventListener('install', () => {
  console.log('Hello world from the Service worker')
})

self.addEventListener('activate', () => {
  console.log('Serive worker now active')
})

self.addEventListener('message', event => {
  console.log('Service worker received message ' + JSON.stringify(event))
})

I register for the service worker like so:

Code:
useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker
        .register('/service-worker.js')
        .then(() => {
          console.log('Service worker registration successful')
        })
        .catch(e => {
          console.error('Service worker registration failed: ' + e)
        })
    }
  }, [])

As I load my app, I get the following logs:

Code:
Service worker registration successful // APP
Hello world from the Service worker // SERVICE WORKER install event

So, I do get the install event called, but not the activate event.

Also, when I send a message to the service worker from my app:

Code:
navigator.serviceWorker.controller.postMessage({test: 'test'})

the message event on the service worker doesn't get called either...

Is there something wrong I'm doing? Doesn't the service worker activate somehow?

For additional context, my app uses Next.js, and I place the service-worker.js in the public folder in my project.

Also, on the app, if I try posting the message like this:

Code:
navigator.serviceWorker.ready.then(registration => {
  console.log(registration.active)
  registration.active.postMessage({test: 'test'})
})

I get logged the instance of the service worker, (I assume) meaning that the service worker is indeed active/ready.

<p>I'm trying to use <code>serviceWorkers</code> for the first time, and even though it started well, I'm a little stuck..</p>
<p>Here's my very simple <code>service-worker.js</code>:</p>
<pre><code>self.addEventListener('install', () => {
console.log('Hello world from the Service worker')
})

self.addEventListener('activate', () => {
console.log('Serive worker now active')
})

self.addEventListener('message', event => {
console.log('Service worker received message ' + JSON.stringify(event))
})
</code></pre>
<p>I register for the service worker like so:</p>
<pre><code>useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(() => {
console.log('Service worker registration successful')
})
.catch(e => {
console.error('Service worker registration failed: ' + e)
})
}
}, [])
</code></pre>
<p>As I load my app, I get the following logs:</p>
<pre><code>Service worker registration successful // APP
Hello world from the Service worker // SERVICE WORKER install event
</code></pre>
<p>So, I do get the <code>install</code> event called, but not the <code>activate</code> event.</p>
<p>Also, when I send a message to the service worker from my app:</p>
<pre><code>navigator.serviceWorker.controller.postMessage({test: 'test'})
</code></pre>
<p>the <code>message</code> event on the service worker doesn't get called either...</p>
<p><strong>Is there something wrong I'm doing? Doesn't the service worker activate somehow?</strong></p>
<p>For additional context, my app uses <code>Next.js</code>, and I place the <code>service-worker.js</code> in the <code>public</code> folder in my project.</p>
<p>Also, on the app, if I try posting the message like this:</p>
<pre><code>navigator.serviceWorker.ready.then(registration => {
console.log(registration.active)
registration.active.postMessage({test: 'test'})
})
</code></pre>
<p>I get logged the instance of the service worker, (I assume) meaning that the service worker is indeed active/ready.</p>
 

Latest posts

Top