@budarin/pluggable-serviceworker 1.0.18 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +239 -645
- package/package.json +3 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Вадим Бударин
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Вадим Бударин
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,645 +1,239 @@
|
|
|
1
|
-
# @budarin/pluggable-serviceworker
|
|
2
|
-
|
|
3
|
-
🔌 Расширяемый через плагины Service Worker
|
|
4
|
-
|
|
5
|
-
Библиотека для создания модульных и расширяемых Service Worker'ов с помощью системы плагинов. Позволяет легко добавлять функциональность через плагины с поддержкой приоритетов и обработки ошибок.
|
|
6
|
-
|
|
7
|
-
## ✨ Особенности
|
|
8
|
-
|
|
9
|
-
- 🔌 **Система плагинов** - модульная архитектура для расширения функциональности
|
|
10
|
-
- 📊 **Порядок выполнения** - предсказуемый контроль порядка выполнения плагинов
|
|
11
|
-
- 🛡️ **Обработка ошибок** - централизованная обработка ошибок
|
|
12
|
-
- 📝 **Логирование** - настраиваемое логирование с поддержкой различных уровней
|
|
13
|
-
- 🎯 **TypeScript** - полная поддержка типов
|
|
14
|
-
- 🚀 **Простота использования** - минимальная настройка
|
|
15
|
-
|
|
16
|
-
## 📦 Установка
|
|
17
|
-
|
|
18
|
-
```bash
|
|
19
|
-
npm install @budarin/pluggable-serviceworker
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
или
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
pnpm add @budarin/pluggable-serviceworker
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## 🚀 Быстрый старт
|
|
29
|
-
|
|
30
|
-
### Базовое использование
|
|
31
|
-
|
|
32
|
-
```typescript
|
|
33
|
-
// sw.js
|
|
34
|
-
import { initializeServiceWorker } from '@budarin/pluggable-serviceworker';
|
|
35
|
-
|
|
36
|
-
// Простой плагин для кеширования
|
|
37
|
-
const cachePlugin = {
|
|
38
|
-
name: 'cache-plugin',
|
|
39
|
-
|
|
40
|
-
install: async (event) => {
|
|
41
|
-
const cache = await caches.open('my-cache-v1');
|
|
42
|
-
await cache.addAll(['/', '/styles.css', '/script.js']);
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
fetch: async (event) => {
|
|
46
|
-
const cachedResponse = await caches.match(event.request);
|
|
47
|
-
return cachedResponse || fetch(event.request);
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
// Инициализация Service Worker с плагинами
|
|
52
|
-
initializeServiceWorker([cachePlugin], { logger: console });
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
###
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
)
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
###
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
Logger используется внутри библиотеки для логирования ошибок в обработчиках ошибок, что предотвращает бесконечные циклы при ошибках в самих обработчиках ошибок.
|
|
243
|
-
|
|
244
|
-
#### Типы ошибок
|
|
245
|
-
|
|
246
|
-
Используйте enum `ServiceWorkerErrorType` для типизированной обработки ошибок:
|
|
247
|
-
|
|
248
|
-
- _`ServiceWorkerErrorType.ERROR`_ - JavaScript ошибки (ErrorEvent)
|
|
249
|
-
- _`ServiceWorkerErrorType.MESSAGE_ERROR`_ - Ошибки при обработке сообщений (MessageEvent)
|
|
250
|
-
- _`ServiceWorkerErrorType.UNHANDLED_REJECTION`_ - Необработанные Promise rejection
|
|
251
|
-
- _`ServiceWorkerErrorType.REJECTION_HANDLED`_ - Обработанные Promise rejection
|
|
252
|
-
- _`ServiceWorkerErrorType.PLUGIN_ERROR`_ - Ошибки в плагинах
|
|
253
|
-
|
|
254
|
-
## 🔧 API
|
|
255
|
-
|
|
256
|
-
### SwMessageEvent
|
|
257
|
-
|
|
258
|
-
Типизированный интерфейс для событий сообщений Service Worker:
|
|
259
|
-
|
|
260
|
-
```typescript
|
|
261
|
-
interface SwMessageEvent extends Omit<ExtendableMessageEvent, 'data'> {
|
|
262
|
-
data: {
|
|
263
|
-
type: string;
|
|
264
|
-
};
|
|
265
|
-
}
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
### ServiceWorkerErrorType
|
|
269
|
-
|
|
270
|
-
Перечисление типов ошибок Service Worker:
|
|
271
|
-
|
|
272
|
-
```typescript
|
|
273
|
-
enum ServiceWorkerErrorType {
|
|
274
|
-
ERROR = 'error', // JavaScript ошибки
|
|
275
|
-
MESSAGE_ERROR = 'messageerror', // Ошибки сообщений
|
|
276
|
-
UNHANDLED_REJECTION = 'unhandledrejection', // Необработанные Promise rejection
|
|
277
|
-
REJECTION_HANDLED = 'rejectionhandled', // Обработанные Promise rejection
|
|
278
|
-
PLUGIN_ERROR = 'plugin_error', // Ошибки в плагинах
|
|
279
|
-
}
|
|
280
|
-
```
|
|
281
|
-
|
|
282
|
-
### FetchResponse
|
|
283
|
-
|
|
284
|
-
Тип для ответов fetch обработчиков:
|
|
285
|
-
|
|
286
|
-
```typescript
|
|
287
|
-
type FetchResponse = Promise<Response | undefined>;
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
### ServiceWorkerPlugin
|
|
291
|
-
|
|
292
|
-
Интерфейс плагина:
|
|
293
|
-
|
|
294
|
-
```typescript
|
|
295
|
-
interface ServiceWorkerPlugin {
|
|
296
|
-
name: string; // Уникальное имя плагина
|
|
297
|
-
order?: number; // Порядок выполнения (плагины без order выполняются первыми)
|
|
298
|
-
install?: (event: ExtendableEvent) => void | Promise<void>;
|
|
299
|
-
activate?: (event: ExtendableEvent) => void | Promise<void>;
|
|
300
|
-
fetch?: (event: FetchEvent) => Promise<Response | undefined>;
|
|
301
|
-
message?: (event: SwMessageEvent) => void;
|
|
302
|
-
sync?: (event: SyncEvent) => void | Promise<void>; // Фоновая синхронизация
|
|
303
|
-
periodicsync?: (event: PeriodicSyncEvent) => void | Promise<void>; // Периодическая синхронизация
|
|
304
|
-
push?: (event: PushEvent) => void | Promise<void>; // Может быть асинхронным
|
|
305
|
-
}
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
### createEventHandlers
|
|
309
|
-
|
|
310
|
-
Функция для создания обработчиков событий (экспортируется для продвинутого использования):
|
|
311
|
-
|
|
312
|
-
```typescript
|
|
313
|
-
function createEventHandlers(
|
|
314
|
-
plugins: ServiceWorkerPlugin[],
|
|
315
|
-
config: ServiceWorkerConfig = {}
|
|
316
|
-
): {
|
|
317
|
-
install: (event: ExtendableEvent) => void;
|
|
318
|
-
activate: (event: ExtendableEvent) => void;
|
|
319
|
-
fetch: (event: FetchEvent) => void;
|
|
320
|
-
message: (event: SwMessageEvent) => void;
|
|
321
|
-
sync: (event: SyncEvent) => void;
|
|
322
|
-
periodicsync: (event: PeriodicSyncEvent) => void;
|
|
323
|
-
push: (event: PushEvent) => void;
|
|
324
|
-
error: (event: ErrorEvent) => void;
|
|
325
|
-
messageerror: (event: MessageEvent) => void;
|
|
326
|
-
unhandledrejection: (event: PromiseRejectionEvent) => void;
|
|
327
|
-
rejectionhandled: (event: PromiseRejectionEvent) => void;
|
|
328
|
-
};
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
### initializeServiceWorker
|
|
332
|
-
|
|
333
|
-
Основная функция для инициализации Service Worker:
|
|
334
|
-
|
|
335
|
-
```typescript
|
|
336
|
-
function initializeServiceWorker(
|
|
337
|
-
plugins: ServiceWorkerPlugin[],
|
|
338
|
-
config?: ServiceWorkerConfig
|
|
339
|
-
): void;
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
### Logger
|
|
343
|
-
|
|
344
|
-
Интерфейс для логирования:
|
|
345
|
-
|
|
346
|
-
```typescript
|
|
347
|
-
interface Logger {
|
|
348
|
-
info: (...data: unknown[]) => void;
|
|
349
|
-
warn: (...data: unknown[]) => void;
|
|
350
|
-
error: (...data: unknown[]) => void;
|
|
351
|
-
debug: (...data: unknown[]) => void;
|
|
352
|
-
}
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
### ServiceWorkerConfig
|
|
356
|
-
|
|
357
|
-
Конфигурация Service Worker:
|
|
358
|
-
|
|
359
|
-
```typescript
|
|
360
|
-
interface ServiceWorkerConfig {
|
|
361
|
-
logger?: Logger;
|
|
362
|
-
onError?: (
|
|
363
|
-
error: Error | any,
|
|
364
|
-
event: Event,
|
|
365
|
-
errorType?: ServiceWorkerErrorType
|
|
366
|
-
) => void;
|
|
367
|
-
}
|
|
368
|
-
```
|
|
369
|
-
|
|
370
|
-
## 📝 Примеры плагинов
|
|
371
|
-
|
|
372
|
-
### Плагин кеширования
|
|
373
|
-
|
|
374
|
-
```typescript
|
|
375
|
-
const cachePlugin = {
|
|
376
|
-
name: 'advanced-cache',
|
|
377
|
-
order: 1,
|
|
378
|
-
|
|
379
|
-
install: async (event) => {
|
|
380
|
-
const cache = await caches.open('app-cache-v1');
|
|
381
|
-
await cache.addAll([
|
|
382
|
-
'/',
|
|
383
|
-
'/offline.html',
|
|
384
|
-
'/assets/app.css',
|
|
385
|
-
'/assets/app.js',
|
|
386
|
-
]);
|
|
387
|
-
},
|
|
388
|
-
|
|
389
|
-
fetch: async (event) => {
|
|
390
|
-
// Стратегия "Cache First" для статических ресурсов
|
|
391
|
-
if (event.request.url.includes('/assets/')) {
|
|
392
|
-
const cachedResponse = await caches.match(event.request);
|
|
393
|
-
return cachedResponse || fetch(event.request);
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
// Стратегия "Network First" для API
|
|
397
|
-
if (event.request.url.includes('/api/')) {
|
|
398
|
-
try {
|
|
399
|
-
const response = await fetch(event.request);
|
|
400
|
-
const cache = await caches.open('api-cache-v1');
|
|
401
|
-
cache.put(event.request, response.clone());
|
|
402
|
-
return response;
|
|
403
|
-
} catch (error) {
|
|
404
|
-
return caches.match(event.request);
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
return undefined;
|
|
409
|
-
},
|
|
410
|
-
};
|
|
411
|
-
```
|
|
412
|
-
|
|
413
|
-
### Плагин уведомлений
|
|
414
|
-
|
|
415
|
-
```typescript
|
|
416
|
-
const notificationPlugin = {
|
|
417
|
-
name: 'notifications',
|
|
418
|
-
|
|
419
|
-
push: async (event) => {
|
|
420
|
-
const data = event.data?.json() || {};
|
|
421
|
-
|
|
422
|
-
const options = {
|
|
423
|
-
body: data.body || 'Новое уведомление',
|
|
424
|
-
icon: data.icon || '/icon-192x192.png',
|
|
425
|
-
badge: '/badge-72x72.png',
|
|
426
|
-
tag: data.tag || 'default',
|
|
427
|
-
data: data.url ? { url: data.url } : undefined,
|
|
428
|
-
};
|
|
429
|
-
|
|
430
|
-
await self.registration.showNotification(
|
|
431
|
-
data.title || 'Уведомление',
|
|
432
|
-
options
|
|
433
|
-
);
|
|
434
|
-
},
|
|
435
|
-
|
|
436
|
-
message: (event) => {
|
|
437
|
-
if (event.data?.type === 'NOTIFICATION_CLICK') {
|
|
438
|
-
// Обработка клика по уведомлению
|
|
439
|
-
clients.openWindow(event.data.url);
|
|
440
|
-
}
|
|
441
|
-
},
|
|
442
|
-
};
|
|
443
|
-
```
|
|
444
|
-
|
|
445
|
-
### Плагин фоновой синхронизации
|
|
446
|
-
|
|
447
|
-
```typescript
|
|
448
|
-
const backgroundSyncPlugin = {
|
|
449
|
-
name: 'background-sync',
|
|
450
|
-
|
|
451
|
-
sync: async (event) => {
|
|
452
|
-
// Тег 'sync-data' регистрируется через:
|
|
453
|
-
// await self.registration.sync.register('sync-data');
|
|
454
|
-
if (event.tag === 'sync-data') {
|
|
455
|
-
await doBackgroundSync();
|
|
456
|
-
}
|
|
457
|
-
},
|
|
458
|
-
|
|
459
|
-
periodicsync: async (event) => {
|
|
460
|
-
// Тег 'content-sync' регистрируется через:
|
|
461
|
-
// await self.registration.periodicSync.register('content-sync', { minInterval: 24 * 60 * 60 * 1000 });
|
|
462
|
-
if (event.tag === 'content-sync') {
|
|
463
|
-
await doPeriodicSync();
|
|
464
|
-
}
|
|
465
|
-
},
|
|
466
|
-
};
|
|
467
|
-
|
|
468
|
-
async function doBackgroundSync() {
|
|
469
|
-
// Получение отложенных задач из IndexedDB
|
|
470
|
-
const tasks = await getPendingTasks();
|
|
471
|
-
|
|
472
|
-
for (const task of tasks) {
|
|
473
|
-
try {
|
|
474
|
-
await fetch(task.url, {
|
|
475
|
-
method: task.method,
|
|
476
|
-
body: task.body,
|
|
477
|
-
headers: task.headers,
|
|
478
|
-
});
|
|
479
|
-
|
|
480
|
-
await removeTask(task.id);
|
|
481
|
-
} catch (error) {
|
|
482
|
-
console.error('Ошибка синхронизации:', error);
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
}
|
|
486
|
-
|
|
487
|
-
async function doPeriodicSync() {
|
|
488
|
-
// Периодическая синхронизация данных
|
|
489
|
-
try {
|
|
490
|
-
const response = await fetch('/api/sync');
|
|
491
|
-
const data = await response.json();
|
|
492
|
-
|
|
493
|
-
// Сохранение данных в кеш или IndexedDB
|
|
494
|
-
await updateLocalData(data);
|
|
495
|
-
|
|
496
|
-
console.log('Периодическая синхронизация завершена');
|
|
497
|
-
} catch (error) {
|
|
498
|
-
console.error('Ошибка периодической синхронизации:', error);
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
|
-
```
|
|
502
|
-
|
|
503
|
-
## 🎯 Порядок выполнения
|
|
504
|
-
|
|
505
|
-
Плагины выполняются в следующем порядке:
|
|
506
|
-
|
|
507
|
-
1. **Сначала ВСЕ плагины без `order`** - в том порядке, в котором они были добавлены
|
|
508
|
-
2. **Затем плагины с `order`** - в порядке возрастания значений `order`
|
|
509
|
-
|
|
510
|
-
### Пример:
|
|
511
|
-
|
|
512
|
-
```typescript
|
|
513
|
-
const plugins = [
|
|
514
|
-
{ name: 'first' }, // без order - выполняется первым
|
|
515
|
-
{ name: 'fourth', order: 2 },
|
|
516
|
-
{ name: 'second' }, // без order - выполняется вторым
|
|
517
|
-
{ name: 'third', order: 1 },
|
|
518
|
-
{ name: 'fifth' }, // без order - выполняется третьим
|
|
519
|
-
];
|
|
520
|
-
|
|
521
|
-
// Порядок выполнения: first → second → fifth → third → fourth
|
|
522
|
-
```
|
|
523
|
-
|
|
524
|
-
**Преимущества новой системы:**
|
|
525
|
-
|
|
526
|
-
- 🎯 **Предсказуемость** - плагины без `order` всегда выполняются первыми
|
|
527
|
-
- 🔧 **Простота** - не нужно знать, какие номера уже заняты
|
|
528
|
-
- 📈 **Масштабируемость** - легко добавлять новые плагины в нужном порядке
|
|
529
|
-
|
|
530
|
-
## ⚡ Логика выполнения обработчиков
|
|
531
|
-
|
|
532
|
-
Разные типы событий Service Worker обрабатываются по-разному в зависимости от их специфики:
|
|
533
|
-
|
|
534
|
-
### 🔄 Параллельное выполнение
|
|
535
|
-
|
|
536
|
-
**События:** `install`, `activate`, `message`, `sync`, `periodicsync`
|
|
537
|
-
|
|
538
|
-
Все обработчики выполняются **одновременно** с помощью `Promise.all()`:
|
|
539
|
-
|
|
540
|
-
```typescript
|
|
541
|
-
// Все плагины инициализируются параллельно
|
|
542
|
-
const installPlugin1 = {
|
|
543
|
-
name: 'cache',
|
|
544
|
-
install: async () => {
|
|
545
|
-
/* кеширование */
|
|
546
|
-
},
|
|
547
|
-
};
|
|
548
|
-
const installPlugin2 = {
|
|
549
|
-
name: 'db',
|
|
550
|
-
install: async () => {
|
|
551
|
-
/* инициализация БД */
|
|
552
|
-
},
|
|
553
|
-
};
|
|
554
|
-
|
|
555
|
-
// Оба install обработчика выполнятся одновременно
|
|
556
|
-
```
|
|
557
|
-
|
|
558
|
-
**Почему параллельно:**
|
|
559
|
-
|
|
560
|
-
- **install/activate**: Все плагины должны инициализироваться независимо
|
|
561
|
-
- **message**: Все плагины должны получить сообщение одновременно
|
|
562
|
-
- **sync**: Разные задачи синхронизации независимы (синхронизация данных + кеша)
|
|
563
|
-
- **periodicsync**: Периодические задачи независимы друг от друга
|
|
564
|
-
|
|
565
|
-
### ➡️ Последовательное выполнение
|
|
566
|
-
|
|
567
|
-
**События:** `fetch`, `push`
|
|
568
|
-
|
|
569
|
-
Обработчики выполняются **по очереди** до первого успешного результата:
|
|
570
|
-
|
|
571
|
-
#### Fetch - с прерыванием цепочки
|
|
572
|
-
|
|
573
|
-
```typescript
|
|
574
|
-
const authPlugin = {
|
|
575
|
-
name: 'auth',
|
|
576
|
-
// Без order - выполняется первым
|
|
577
|
-
fetch: async (event) => {
|
|
578
|
-
if (needsAuth(event.request)) {
|
|
579
|
-
return new Response('Unauthorized', { status: 401 }); // Прерывает цепочку
|
|
580
|
-
}
|
|
581
|
-
return undefined; // Передает следующему плагину
|
|
582
|
-
},
|
|
583
|
-
};
|
|
584
|
-
|
|
585
|
-
const cachePlugin = {
|
|
586
|
-
name: 'cache',
|
|
587
|
-
order: 1, // Выполняется после плагинов без order
|
|
588
|
-
fetch: async (event) => {
|
|
589
|
-
return await caches.match(event.request); // Может вернуть Response или null
|
|
590
|
-
},
|
|
591
|
-
};
|
|
592
|
-
|
|
593
|
-
// Выполнение: auth (без order) → cache (order: 1) → fetch(event.request) если все вернули null
|
|
594
|
-
```
|
|
595
|
-
|
|
596
|
-
#### Push - без прерывания
|
|
597
|
-
|
|
598
|
-
```typescript
|
|
599
|
-
const notificationPlugin = {
|
|
600
|
-
name: 'notifications',
|
|
601
|
-
push: async (event) => {
|
|
602
|
-
await self.registration.showNotification('Уведомление');
|
|
603
|
-
// Не прерывает выполнение других плагинов
|
|
604
|
-
},
|
|
605
|
-
};
|
|
606
|
-
|
|
607
|
-
const analyticsPlugin = {
|
|
608
|
-
name: 'analytics',
|
|
609
|
-
push: async (event) => {
|
|
610
|
-
await sendPushAnalytics(event.data);
|
|
611
|
-
// Выполнится после notifications
|
|
612
|
-
},
|
|
613
|
-
};
|
|
614
|
-
|
|
615
|
-
// Все push обработчики выполнятся последовательно
|
|
616
|
-
```
|
|
617
|
-
|
|
618
|
-
**Почему последовательно:**
|
|
619
|
-
|
|
620
|
-
- **fetch**: Нужен только один ответ, первый успешный прерывает цепочку
|
|
621
|
-
- **push**: Избегает конфликтов уведомлений, но все плагины должны обработать событие
|
|
622
|
-
|
|
623
|
-
### 📋 Сводная таблица
|
|
624
|
-
|
|
625
|
-
| Событие | Выполнение | Прерывание | Причина |
|
|
626
|
-
| -------------- | --------------- | ---------- | -------------------------------- |
|
|
627
|
-
| `install` | Параллельно | Нет | Независимая инициализация |
|
|
628
|
-
| `activate` | Параллельно | Нет | Независимая активация |
|
|
629
|
-
| `fetch` | Последовательно | Да | Нужен один ответ |
|
|
630
|
-
| `message` | Параллельно | Нет | Все получают сообщение |
|
|
631
|
-
| `sync` | Параллельно | Нет | Независимые задачи |
|
|
632
|
-
| `periodicsync` | Параллельно | Нет | Независимые периодические задачи |
|
|
633
|
-
| `push` | Последовательно | Нет | Избегание конфликтов |
|
|
634
|
-
|
|
635
|
-
## 🛡️ Обработка ошибок
|
|
636
|
-
|
|
637
|
-
- **Единый обработчик** - все типы ошибок обрабатываются через `config.onError`
|
|
638
|
-
- **Типизированные ошибки** - третий параметр `errorType` указывает тип ошибки
|
|
639
|
-
- **Глобальные события** - автоматическая обработка `error`, `messageerror`, `unhandledrejection`, `rejectionhandled`
|
|
640
|
-
- **Изоляция ошибок** - ошибка в одном плагине не останавливает выполнение других
|
|
641
|
-
- **Безопасность** - ошибки в самих обработчиках ошибок логируются в консоль
|
|
642
|
-
|
|
643
|
-
## 📄 Лицензия
|
|
644
|
-
|
|
645
|
-
MIT © Vadim Budarin
|
|
1
|
+
# @budarin/pluggable-serviceworker
|
|
2
|
+
|
|
3
|
+
🔌 Расширяемый через плагины Service Worker
|
|
4
|
+
|
|
5
|
+
Библиотека для создания модульных и расширяемых Service Worker'ов с помощью системы плагинов. Позволяет легко добавлять функциональность через плагины с поддержкой приоритетов и обработки ошибок.
|
|
6
|
+
|
|
7
|
+
## ✨ Особенности
|
|
8
|
+
|
|
9
|
+
- 🔌 **Система плагинов** - модульная архитектура для расширения функциональности
|
|
10
|
+
- 📊 **Порядок выполнения** - предсказуемый контроль порядка выполнения плагинов
|
|
11
|
+
- 🛡️ **Обработка ошибок** - централизованная обработка ошибок
|
|
12
|
+
- 📝 **Логирование** - настраиваемое логирование с поддержкой различных уровней
|
|
13
|
+
- 🎯 **TypeScript** - полная поддержка типов
|
|
14
|
+
- 🚀 **Простота использования** - минимальная настройка
|
|
15
|
+
|
|
16
|
+
## 📦 Установка
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @budarin/pluggable-serviceworker
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
или
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
pnpm add @budarin/pluggable-serviceworker
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 🚀 Быстрый старт
|
|
29
|
+
|
|
30
|
+
### Базовое использование
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
// sw.js
|
|
34
|
+
import { initializeServiceWorker } from '@budarin/pluggable-serviceworker';
|
|
35
|
+
|
|
36
|
+
// Простой плагин для кеширования
|
|
37
|
+
const cachePlugin = {
|
|
38
|
+
name: 'cache-plugin',
|
|
39
|
+
|
|
40
|
+
install: async (event) => {
|
|
41
|
+
const cache = await caches.open('my-cache-v1');
|
|
42
|
+
await cache.addAll(['/', '/styles.css', '/script.js']);
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
fetch: async (event) => {
|
|
46
|
+
const cachedResponse = await caches.match(event.request);
|
|
47
|
+
return cachedResponse || fetch(event.request);
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
// Инициализация Service Worker с плагинами
|
|
52
|
+
initializeServiceWorker([cachePlugin], { logger: console });
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Обработка ошибок
|
|
56
|
+
|
|
57
|
+
Библиотека предоставляет единый обработчик для всех типов ошибок в Service Worker:
|
|
58
|
+
|
|
59
|
+
```typescript
|
|
60
|
+
import {
|
|
61
|
+
initializeServiceWorker,
|
|
62
|
+
ServiceWorkerErrorType,
|
|
63
|
+
} from '@budarin/pluggable-serviceworker';
|
|
64
|
+
|
|
65
|
+
const config = {
|
|
66
|
+
logger: {
|
|
67
|
+
info: (...data) => console.log('[SW INFO]', ...data),
|
|
68
|
+
warn: (...data) => console.warn('[SW WARN]', ...data),
|
|
69
|
+
error: (...data) => console.error('[SW ERROR]', ...data),
|
|
70
|
+
debug: (...data) => console.debug('[SW DEBUG]', ...data),
|
|
71
|
+
},
|
|
72
|
+
onError: (error, event, errorType) => {
|
|
73
|
+
console.log(`Ошибка типа "${errorType}":`, error);
|
|
74
|
+
|
|
75
|
+
switch (errorType) {
|
|
76
|
+
case ServiceWorkerErrorType.ERROR:
|
|
77
|
+
// JavaScript ошибки
|
|
78
|
+
console.error('JavaScript error:', error);
|
|
79
|
+
break;
|
|
80
|
+
|
|
81
|
+
case ServiceWorkerErrorType.MESSAGE_ERROR:
|
|
82
|
+
// Ошибки сообщений
|
|
83
|
+
console.error('Message error:', error);
|
|
84
|
+
break;
|
|
85
|
+
|
|
86
|
+
case ServiceWorkerErrorType.UNHANDLED_REJECTION:
|
|
87
|
+
// Необработанные Promise rejection
|
|
88
|
+
console.error('Unhandled promise rejection:', error);
|
|
89
|
+
break;
|
|
90
|
+
|
|
91
|
+
case ServiceWorkerErrorType.REJECTION_HANDLED:
|
|
92
|
+
// Обработанные Promise rejection
|
|
93
|
+
console.log('Promise rejection handled:', error);
|
|
94
|
+
break;
|
|
95
|
+
|
|
96
|
+
case ServiceWorkerErrorType.PLUGIN_ERROR:
|
|
97
|
+
// Ошибки в плагинах
|
|
98
|
+
console.error('Plugin error:', error);
|
|
99
|
+
break;
|
|
100
|
+
|
|
101
|
+
default:
|
|
102
|
+
// Неизвестные типы ошибок
|
|
103
|
+
console.error('Unknown error type:', error);
|
|
104
|
+
|
|
105
|
+
// Отправка ошибки в аналитику
|
|
106
|
+
fetch('/api/errors', {
|
|
107
|
+
method: 'POST',
|
|
108
|
+
body: JSON.stringify({
|
|
109
|
+
error: error.message,
|
|
110
|
+
eventType: event.type,
|
|
111
|
+
url: event.request?.url,
|
|
112
|
+
timestamp: Date.now(),
|
|
113
|
+
}),
|
|
114
|
+
}).catch(() => {
|
|
115
|
+
// Игнорируем ошибки отправки логов
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
initializeServiceWorker(
|
|
122
|
+
[
|
|
123
|
+
/* ваши плагины */
|
|
124
|
+
],
|
|
125
|
+
config
|
|
126
|
+
);
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## 🎯 Порядок выполнения
|
|
130
|
+
|
|
131
|
+
Плагины выполняются в следующем порядке:
|
|
132
|
+
|
|
133
|
+
1. **Сначала ВСЕ плагины без `order`** - в том порядке, в котором они были добавлены
|
|
134
|
+
2. **Затем плагины с `order`** - в порядке возрастания значений `order`
|
|
135
|
+
|
|
136
|
+
### Пример:
|
|
137
|
+
|
|
138
|
+
```typescript
|
|
139
|
+
const plugins = [
|
|
140
|
+
{ name: 'first' }, // без order - выполняется первым
|
|
141
|
+
{ name: 'fourth', order: 2 },
|
|
142
|
+
{ name: 'second' }, // без order - выполняется вторым
|
|
143
|
+
{ name: 'third', order: 1 },
|
|
144
|
+
{ name: 'fifth' }, // без order - выполняется третьим
|
|
145
|
+
];
|
|
146
|
+
|
|
147
|
+
// Порядок выполнения: first → second → fifth → third → fourth
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
**Преимущества новой системы:**
|
|
151
|
+
|
|
152
|
+
- 🎯 **Предсказуемость** - плагины без `order` всегда выполняются первыми
|
|
153
|
+
- 🔧 **Простота** - не нужно знать, какие номера уже заняты
|
|
154
|
+
- 📈 **Масштабируемость** - легко добавлять новые плагины в нужном порядке
|
|
155
|
+
|
|
156
|
+
## ⚡ Логика выполнения обработчиков
|
|
157
|
+
|
|
158
|
+
Разные типы событий Service Worker обрабатываются по-разному в зависимости от их специфики:
|
|
159
|
+
|
|
160
|
+
### 🔄 Параллельное выполнение
|
|
161
|
+
|
|
162
|
+
**События:** `install`, `activate`, `message`, `sync`, `periodicsync`
|
|
163
|
+
|
|
164
|
+
Все обработчики выполняются **одновременно** с помощью `Promise.all()`:
|
|
165
|
+
|
|
166
|
+
```typescript
|
|
167
|
+
// Все плагины инициализируются параллельно
|
|
168
|
+
const installPlugin1 = {
|
|
169
|
+
name: 'cache',
|
|
170
|
+
install: async () => {
|
|
171
|
+
/* кеширование */
|
|
172
|
+
},
|
|
173
|
+
};
|
|
174
|
+
const installPlugin2 = {
|
|
175
|
+
name: 'db',
|
|
176
|
+
install: async () => {
|
|
177
|
+
/* инициализация БД */
|
|
178
|
+
},
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
// Оба install обработчика выполнятся одновременно
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
**Почему параллельно:**
|
|
185
|
+
|
|
186
|
+
- **install/activate**: Все плагины должны инициализироваться независимо
|
|
187
|
+
- **message**: Все плагины должны получить сообщение одновременно
|
|
188
|
+
- **sync**: Разные задачи синхронизации независимы (синхронизация данных + кеша)
|
|
189
|
+
- **periodicsync**: Периодические задачи независимы друг от друга
|
|
190
|
+
|
|
191
|
+
### ➡️ Последовательное выполнение
|
|
192
|
+
|
|
193
|
+
**События:** `fetch`, `push`
|
|
194
|
+
|
|
195
|
+
Обработчики выполняются **по очереди** до первого успешного результата:
|
|
196
|
+
|
|
197
|
+
#### Fetch - с прерыванием цепочки
|
|
198
|
+
|
|
199
|
+
```typescript
|
|
200
|
+
const authPlugin = {
|
|
201
|
+
name: 'auth',
|
|
202
|
+
// Без order - выполняется первым
|
|
203
|
+
fetch: async (event) => {
|
|
204
|
+
if (needsAuth(event.request)) {
|
|
205
|
+
return new Response('Unauthorized', { status: 401 }); // Прерывает цепочку
|
|
206
|
+
}
|
|
207
|
+
return undefined; // Передает следующему плагину
|
|
208
|
+
},
|
|
209
|
+
};
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
**Почему последовательно:**
|
|
213
|
+
|
|
214
|
+
- **fetch**: Нужен только один ответ, первый успешный прерывает цепочку
|
|
215
|
+
- **push**: Избегает конфликтов уведомлений, но все плагины должны обработать событие
|
|
216
|
+
|
|
217
|
+
### 📋 Сводная таблица
|
|
218
|
+
|
|
219
|
+
| Событие | Выполнение | Прерывание | Причина |
|
|
220
|
+
| -------------- | --------------- | ---------- | -------------------------------- |
|
|
221
|
+
| `install` | Параллельно | Нет | Независимая инициализация |
|
|
222
|
+
| `activate` | Параллельно | Нет | Независимая активация |
|
|
223
|
+
| `fetch` | Последовательно | Да | Нужен один ответ |
|
|
224
|
+
| `message` | Параллельно | Нет | Все получают сообщение |
|
|
225
|
+
| `sync` | Параллельно | Нет | Независимые задачи |
|
|
226
|
+
| `periodicsync` | Параллельно | Нет | Независимые периодические задачи |
|
|
227
|
+
| `push` | Последовательно | Нет | Избегание конфликтов |
|
|
228
|
+
|
|
229
|
+
## 🛡️ Обработка ошибок
|
|
230
|
+
|
|
231
|
+
- **Единый обработчик** - все типы ошибок обрабатываются через `config.onError`
|
|
232
|
+
- **Типизированные ошибки** - третий параметр `errorType` указывает тип ошибки
|
|
233
|
+
- **Глобальные события** - автоматическая обработка `error`, `messageerror`, `unhandledrejection`, `rejectionhandled`
|
|
234
|
+
- **Изоляция ошибок** - ошибка в одном плагине не останавливает выполнение других
|
|
235
|
+
- **Безопасность** - ошибки в самих обработчиках ошибок логируются в консоль
|
|
236
|
+
|
|
237
|
+
## 📄 Лицензия
|
|
238
|
+
|
|
239
|
+
MIT © Vadim Budarin
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budarin/pluggable-serviceworker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"description": "Extensible via plugins service worker",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"serviceworker",
|
|
@@ -27,6 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"scripts": {
|
|
29
29
|
"build": "tsc",
|
|
30
|
+
"pnpm-install": "pnpm install",
|
|
31
|
+
"upgrade-deps": "pnpm upgrade -i",
|
|
30
32
|
"publish-package": "pnpm build && pnpm publish --access=public"
|
|
31
33
|
}
|
|
32
34
|
}
|