@budarin/pluggable-serviceworker 1.5.3 → 1.5.4
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/README.md +23 -47
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -77,13 +77,13 @@ pnpm add @budarin/pluggable-serviceworker
|
|
|
77
77
|
### Базовое использование
|
|
78
78
|
|
|
79
79
|
```typescript
|
|
80
|
-
//
|
|
80
|
+
// precacheAndServePlugin.js
|
|
81
81
|
import {
|
|
82
82
|
type Plugin,
|
|
83
83
|
initServiceWorker,
|
|
84
84
|
} from '@budarin/pluggable-serviceworker';
|
|
85
85
|
|
|
86
|
-
function precacheAndServePlugin(config: {
|
|
86
|
+
export function precacheAndServePlugin(config: {
|
|
87
87
|
cacheName: string;
|
|
88
88
|
assets: string[];
|
|
89
89
|
}): Plugin {
|
|
@@ -115,6 +115,11 @@ function precacheAndServePlugin(config: {
|
|
|
115
115
|
},
|
|
116
116
|
};
|
|
117
117
|
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// sw.ts
|
|
122
|
+
import { precacheAndServePlugin } from './precacheAndServePlugin';
|
|
118
123
|
|
|
119
124
|
initServiceWorker([
|
|
120
125
|
precacheAndServePlugin({
|
|
@@ -124,22 +129,11 @@ initServiceWorker([
|
|
|
124
129
|
]);
|
|
125
130
|
```
|
|
126
131
|
|
|
127
|
-
**Важно:**
|
|
128
|
-
|
|
129
|
-
- для `fetch` плагину не нужно самому вызывать `fetch(event.request)` — если все плагины вернули `undefined`, фреймворк сам идёт в сеть.
|
|
130
|
-
- конфиг плагина задаётся по месту вызова фабрики; в `options` только `logger?` и `onError?`.
|
|
131
|
-
|
|
132
|
-
### Фабрика плагинов
|
|
133
|
-
|
|
134
|
-
**Плагин** — это объект с полем `name` и опциональными обработчиками (`install`, `fetch`, `activate` и т.д.). В массив `initServiceWorker(plugins, options)` передаются именно такие объекты.
|
|
135
|
-
|
|
136
|
-
**Фабрика плагина** — функция, которая принимает конфиг и возвращает плагин (объект). Например: `precache(config)`, `serveFromCache(config)` или собственная `precacheAndServePlugin(config)` из примера выше. Конфиг задаётся по месту вызова фабрики; в общий `options` попадают только `logger?` и `onError?`.
|
|
137
|
-
|
|
138
132
|
## Демо
|
|
139
133
|
|
|
140
134
|
В папке [demo/](demo/) — приложение **React + Vite** с пресетом **offlineFirst** и типовым сервис-воркером **activateOnSignal**. Запуск из корня: `pnpm start`. Подробности — в [demo/README.md](demo/README.md).
|
|
141
135
|
|
|
142
|
-
##
|
|
136
|
+
## initServiceWorker(plugins, options)
|
|
143
137
|
|
|
144
138
|
`initServiceWorker` — точка входа: регистрирует обработчики событий Service Worker (`install`, `activate`, `fetch`, …) и прогоняет их через список плагинов.
|
|
145
139
|
|
|
@@ -304,7 +298,13 @@ initServiceWorker(
|
|
|
304
298
|
);
|
|
305
299
|
```
|
|
306
300
|
|
|
307
|
-
##
|
|
301
|
+
## Плагины
|
|
302
|
+
|
|
303
|
+
**Плагин** — это объект с полем `name` и опциональными обработчиками (`install`, `fetch`, `activate` и т.д.). В массив `initServiceWorker(plugins, options)` передаются именно такие объекты.
|
|
304
|
+
|
|
305
|
+
**Фабрика плагина** — функция, которая принимает конфиг и возвращает плагин (объект). Например: `precache(config)`, `serveFromCache(config)` или собственная `precacheAndServePlugin(config)` из примера выше. Конфиг задаётся по месту вызова фабрики; в общий `options` попадают только `logger?` и `onError?`.
|
|
306
|
+
|
|
307
|
+
### 🔌 Интерфейс плагина
|
|
308
308
|
|
|
309
309
|
Плагин — объект, реализующий интерфейс `ServiceWorkerPlugin`. Во все обработчики вторым аргументом передаётся **logger** (всегда определён: из `options` или `console`). Специфичный для плагина конфиг задаётся при вызове **фабрики** плагина; в `options` только `logger?` и `onError?`. Параметр типа `_C` (например `PluginContext`) используется для типизации; по умолчанию контекст содержит только `logger`.
|
|
310
310
|
|
|
@@ -488,7 +488,6 @@ function authPlugin(config: { protectedPaths: string[] }): Plugin {
|
|
|
488
488
|
### Примитивы (плагины)
|
|
489
489
|
|
|
490
490
|
Один примитив — одна операция. Импорт: `@budarin/pluggable-serviceworker/plugins`.
|
|
491
|
-
|
|
492
491
|
Примитивы с конфигом — **фабрики плагинов** (см. раздел «Фабрика плагинов»): конфиг передаётся при вызове по месту использования; в `options` в `initServiceWorker` попадают только `logger?` и `onError?`. Примитивы без конфига (`skipWaiting`, `claim`, …) — готовые объекты плагинов.
|
|
493
492
|
|
|
494
493
|
| Название | Событие | Описание |
|
|
@@ -512,9 +511,7 @@ function authPlugin(config: { protectedPaths: string[] }): Plugin {
|
|
|
512
511
|
|
|
513
512
|
Обработчики одного типа (`install`, `activate` и т.д.) у разных плагинов выполняются **параллельно**. Если нужна строгая последовательность (например «сначала claim, потом перезагрузка клиентов»), соберите один плагин, который по очереди вызывает логику примитивов — для гарантии порядка.
|
|
514
513
|
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
Плагин **claimAndReloadClients** вызывает существующие примитивы **claim** и **reloadClients** по очереди:
|
|
514
|
+
Пример: claimAndReloadClients как композиция двух примитивов. Плагин вызывает существующие примитивы **claim** и **reloadClients** по очереди:
|
|
518
515
|
|
|
519
516
|
```typescript
|
|
520
517
|
import { claim } from '@budarin/pluggable-serviceworker/plugins';
|
|
@@ -537,43 +534,24 @@ activate: (event, logger) =>
|
|
|
537
534
|
// postsSwrPlugin.ts
|
|
538
535
|
import type { Plugin } from '@budarin/pluggable-serviceworker';
|
|
539
536
|
|
|
540
|
-
import {
|
|
541
|
-
precache,
|
|
542
|
-
serveFromCache,
|
|
543
|
-
} from '@budarin/pluggable-serviceworker/plugins';
|
|
544
|
-
import { initServiceWorker } from '@budarin/pluggable-serviceworker';
|
|
537
|
+
import { staleWhileRevalidate } from '@budarin/pluggable-serviceworker/plugins';
|
|
545
538
|
|
|
546
539
|
function postsSwrPlugin(config: {
|
|
547
540
|
cacheName: string;
|
|
548
541
|
pathPattern?: RegExp;
|
|
549
542
|
}): Plugin {
|
|
550
543
|
const { cacheName, pathPattern = /\/api\/posts(\/|$)/ } = config;
|
|
544
|
+
const swrPlugin = staleWhileRevalidate({ cacheName });
|
|
551
545
|
|
|
552
546
|
return {
|
|
553
547
|
name: 'postsSwr',
|
|
554
548
|
order: 0,
|
|
555
549
|
|
|
556
|
-
fetch: async (event) => {
|
|
550
|
+
fetch: async (event, logger) => {
|
|
557
551
|
if (!pathPattern.test(new URL(event.request.url).pathname)) {
|
|
558
552
|
return undefined;
|
|
559
553
|
}
|
|
560
|
-
|
|
561
|
-
const cache = await caches.open(cacheName);
|
|
562
|
-
const cached = await cache.match(event.request);
|
|
563
|
-
const revalidate = fetch(event.request).then(async (response) => {
|
|
564
|
-
if (response.ok) {
|
|
565
|
-
await cache.put(event.request, response.clone());
|
|
566
|
-
}
|
|
567
|
-
|
|
568
|
-
return response;
|
|
569
|
-
});
|
|
570
|
-
|
|
571
|
-
if (cached) {
|
|
572
|
-
void revalidate;
|
|
573
|
-
return cached;
|
|
574
|
-
}
|
|
575
|
-
|
|
576
|
-
return revalidate;
|
|
554
|
+
return swrPlugin.fetch!(event, logger);
|
|
577
555
|
},
|
|
578
556
|
};
|
|
579
557
|
}
|
|
@@ -619,14 +597,12 @@ initServiceWorker(
|
|
|
619
597
|
|
|
620
598
|
```typescript
|
|
621
599
|
// sw.js — точка входа вашего сервис-воркера
|
|
622
|
-
import { customLogger } from './customLogger';
|
|
623
600
|
import { activateOnNextVisitServiceWorker } from '@budarin/pluggable-serviceworker/sw';
|
|
624
601
|
|
|
625
602
|
activateOnNextVisitServiceWorker({
|
|
626
|
-
assets: ['/', '/styles.css', '/script.js'],
|
|
627
603
|
cacheName: 'my-cache-v1',
|
|
628
|
-
|
|
629
|
-
onError: (err, event, type) =>
|
|
604
|
+
assets: ['/', '/styles.css', '/script.js'],
|
|
605
|
+
onError: (err, event, type) => console.error(type, err),
|
|
630
606
|
});
|
|
631
607
|
```
|
|
632
608
|
|
|
@@ -655,7 +631,7 @@ activateOnNextVisitServiceWorker({
|
|
|
655
631
|
"@budarin/pluggable-serviceworker": "^1.0.0"
|
|
656
632
|
},
|
|
657
633
|
"devDependencies": {
|
|
658
|
-
"@budarin/pluggable-serviceworker": "^1.5.
|
|
634
|
+
"@budarin/pluggable-serviceworker": "^1.5.5"
|
|
659
635
|
}
|
|
660
636
|
}
|
|
661
637
|
```
|