Run js Service Worker function even with browser closed or minimized

Question

Recently I’m using Service Worker, I came to consult some examples and the documentation you have on google Labs, but I confess that I’m having difficulties to understand how I can create a function in the Service Worker , which should be run every 3 minutes even if the user closes the browser or if it just minimizes it. Thanks in advance if you can give me some guidance.

My current scenario:
- Framework Php Laravel 5.5,
- php 7.0,
- jquery,
- Postgresql,
- bootstrap,
- https server
- I have already been able to install the service worker service in the browser, the scope of it I have set up to get everything inside the root of the site. The archive sw.js is located inside the public folder of Laravel.

Answer 1

Service Worker is a Proxy, it performs functions during the request and then terminates.

The Apis Web-Push and Sync can operate in "background" even if the user is not in the bad application, it is necessary that the browser is "open" even minimized.

You can use PostMessage with a logic (function) of ranges to send messages between your file js and the Service Worker:

sw.js:

function ExecutaFuncao() {
    postMessage({
        cmd: 'response',
        data: 'um valor qualquer'
    })
}
// message handler
self.addEventListener('message', event => {
    if ( 'cmd' in event.data ) {
        let command = event.data.cmd
        switch (command) {
            case 'executa-funcao':
                ExecutaFuncao()
            break
        }
    }
})
// enviar mensagem do Service Worker
async function postMessage(data) {
    let clients = await self.clients.matchAll()
    clients.forEach(client => client.postMessage(data))
}

You can send parameters to functions defined in your Service Worker...or simply perform functions depending on the "command" sent.

main.js

if ( 'serviceWorker' in navigator ) {
    // observe messages
    navigator.serviceWorker.addEventListener('message', event => {
        if ( 'cmd' in event.data ) {
            let command = event.data.cmd
            switch(command) {
                case 'response':
                    console.log('[ServiceWorker Response]: ', event.data.data)
                break
            }
        }
    })
    // simple lógic
    setInterval(() => {
        if ( navigator.serviceWorker.controller ) {
            navigator.serviceWorker.controller.postMessage({
                cmd: 'executa-funcao'
            })
        }
     }, 5000) // every 5 seconds

    // register
    navigator.serviceWorker.register('/sw.js', {
        scope: '/'
    }).then(register => {
        console.log('[Register ServiceWorker] We are live  !')
    }).catch(e => {
        console.warn('service worker failed', e)
    })
}