This is an example implementation for sercive workers using Nuxt3. Here, a service worker is used for sending logs to the backend. In this example we work with click events, which we buffer and send in bulk. Also, a time limit is set to send any buffered events regardless of the current buffer size. This is a suitable usecase for a service worker considering the following:
- The service worker runs in a seperate thread so it doesn't impact the main thread's performance
- The service worker can outlive the main thread, thus it can clean up and send any buffered logs after a tab / window has been closed
Files of concern are:
- plugins/serviceworker.client.ts -> Register the service worker
- app.vue -> Code for sending/receiving messages to/from the service worker
- public/serviceworker.js -> Service worker code
- server/api/click.ts -> Backend code for receiving event logs from the service worker
Execute the following in this repository's directory.
# install packages and start dev server
yarn install && yarn devThen open http://localhost:3000 in the browser to access the dev server.