Skip to content

Commit 014ab70

Browse files
refactor: update README.md with additional sections for setting up the service worker
1 parent c5a0d92 commit 014ab70

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed

README.md

+48
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ A React library to capture and display events in a user-friendly interface. This
1313
- [⚙️ Compatibility](#️-compatibility)
1414
- [🛠 Usage](#-usage)
1515
- [Basic Setup](#basic-setup)
16+
- [Setting Up the Service Worker](#setting-up-the-service-worker)
17+
- [Where to Place the File](#where-to-place-the-file)
1618
- [📝 Capturing Events](#-capturing-events)
1719
- [🗑 Clearing Events](#-clearing-events)
1820
- [📊 Possible Use Cases](#-possible-use-cases)
@@ -99,6 +101,52 @@ The react-capture-events library is compatible with the following versions of Re
99101
export default App
100102
```
101103

104+
### Setting Up the Service Worker
105+
106+
To ensure event capturing works correctly, you need to set up the service worker. Create a file named `sw.js` and add the following code:
107+
108+
```javascript
109+
let events = []
110+
111+
self.addEventListener('install', (event) => {
112+
console.log('Service Worker installed')
113+
event.waitUntil(self.skipWaiting())
114+
})
115+
116+
self.addEventListener('activate', (event) => {
117+
console.log('Service Worker activated')
118+
event.waitUntil(self.clients.claim())
119+
})
120+
121+
self.addEventListener('message', (event) => {
122+
if (event.data.type === 'LOG_EVENT') {
123+
const newEvent = {
124+
eventName: event.data.eventName,
125+
eventData: event.data.eventData,
126+
timestamp: new Date().toISOString(),
127+
}
128+
events.push(newEvent)
129+
130+
if (events.length > 100) {
131+
events.shift()
132+
}
133+
}
134+
135+
if (event.data.type === 'GET_EVENTS') {
136+
event.source.postMessage({ type: 'EVENTS_LIST', events })
137+
}
138+
139+
if (event.data.type === 'CLEAR_EVENTS') {
140+
events = []
141+
event.source.postMessage({ type: 'EVENTS_CLEARED' })
142+
}
143+
})
144+
```
145+
146+
#### Where to Place the File
147+
148+
Place the `sw.js` file at the root of your project. Make sure to register it correctly using the code shown in the Basic Setup section to ensure the service worker is active and ready to capture events.
149+
102150
## 📝 Capturing Events
103151

104152
To capture events, send messages to the service worker:

0 commit comments

Comments
 (0)