@budarin/pluggable-serviceworker 1.5.5 → 1.5.7

package/README.md

@@ -617,16 +617,25 @@ activateOnNextVisitServiceWorker({
 });
 ```
 
-На странице регистрируйте этот файл: `navigator.serviceWorker.register('/sw.js')` (или путь, по которому сборка отдаёт ваш sw.js).
-
 ### Публикуемые утилиты
 
-Утилиты, доступные для использования в своих плагинах. Импорт: `@budarin/pluggable-serviceworker/utils`.
+| Название                                                        | Где использовать | Описание                                                                                                                                                                                                                                                 |
+| --------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `registerServiceWorkerWithClaimWorkaround(scriptURL, options?)` | клиент           | Регистрация SW для случая, когда в activate вызывается claim(); при первом заходе при необходимости один автоматический reload (обход [бага браузера](https://issues.chromium.org/issues/482903583)). Импорт: `@budarin/pluggable-serviceworker/client`. |
+| `normalizeUrl(url)`                                             | SW               | Нормализует URL (относительный → абсолютный по origin SW) для сравнения. Импорт: `@budarin/pluggable-serviceworker/utils`.                                                                                                                               |
+| `notifyClients(messageType)`                                    | SW               | Отправляет сообщение `{ type: messageType }` всем окнам-клиентам. Импорт: `@budarin/pluggable-serviceworker/utils`.                                                                                                                                      |
+
+На странице используйте **клиентский API** библиотеки, чтобы SW корректно взял контроль уже на первой загрузке если сервисворкер использует `claim()` для того, чтобы сразу же установить контроль над страницей (обход [бага браузера](https://issues.chromium.org/issues/482903583)):
+
+```typescript
+import { registerServiceWorkerWithClaimWorkaround } from '@budarin/pluggable-serviceworker/client';
+
+const reg = await registerServiceWorkerWithClaimWorkaround('/sw.js', {
+    type: 'module',
+});
+```
 
-| Название                     | Описание                                                                 |
-| ---------------------------- | ------------------------------------------------------------------------ |
-| `normalizeUrl(url)`          | Нормализует URL (относительный → абсолютный по origin SW) для сравнения. |
-| `notifyClients(messageType)` | Отправляет сообщение `{ type: messageType }` всем окнам-клиентам (SW).   |
+Без этого API на первом визите страница может остаться без контроллера до перезагрузки.
 
 ## Разработка пакета плагина
 

package/dist/client/index.d.ts

@@ -0,0 +1 @@
+export { registerServiceWorkerWithClaimWorkaround } from './register.js';

package/dist/client/index.js

@@ -0,0 +1 @@
+export { registerServiceWorkerWithClaimWorkaround } from './register.js';

package/dist/client/register.d.ts

@@ -0,0 +1 @@
+export declare function registerServiceWorkerWithClaimWorkaround(scriptURL: string, options?: RegistrationOptions): Promise<ServiceWorkerRegistration | undefined>;

package/dist/client/register.js

@@ -0,0 +1,22 @@
+export async function registerServiceWorkerWithClaimWorkaround(scriptURL, options) {
+    if (!('serviceWorker' in navigator)) {
+        return undefined;
+    }
+    const reg = await navigator.serviceWorker.register(scriptURL, options);
+    await navigator.serviceWorker.ready;
+    if (navigator.serviceWorker.controller != null) {
+        return reg;
+    }
+    const key = `pluggable-sw-reload-${reg.scope}`;
+    try {
+        if (sessionStorage.getItem(key) != null) {
+            return reg;
+        }
+        sessionStorage.setItem(key, '1');
+        location.reload();
+    }
+    catch {
+        return reg;
+    }
+    return reg;
+}

package/dist/client/updateWhenControlled.d.ts

@@ -0,0 +1,3 @@
+export declare function updateWhenControlled(registration: ServiceWorkerRegistration, options?: {
+    timeoutMs?: number;
+}): Promise<void>;

package/dist/client/updateWhenControlled.js

@@ -0,0 +1,25 @@
+export function updateWhenControlled(registration, options = {}) {
+    const { timeoutMs = 5000 } = options;
+    if (navigator.serviceWorker.controller != null) {
+        registration.update();
+        return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+        const doUpdate = () => {
+            registration.update();
+            cleanup();
+            resolve();
+        };
+        const cleanup = () => {
+            navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
+            clearTimeout(timer);
+        };
+        const onControllerChange = () => {
+            if (navigator.serviceWorker.controller != null) {
+                doUpdate();
+            }
+        };
+        navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
+        const timer = setTimeout(doUpdate, timeoutMs);
+    });
+}

package/dist/plugins/reloadUncontrolledClients.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from '../index.js';
+export declare function reloadUncontrolledClients(): Plugin;

package/dist/plugins/reloadUncontrolledClients.js

@@ -0,0 +1,15 @@
+export function reloadUncontrolledClients() {
+    return {
+        name: 'reloadUncontrolledClients',
+        activate: async () => {
+            const controlled = await self.clients.matchAll({ type: 'window' });
+            if (controlled.length > 0)
+                return;
+            const all = await self.clients.matchAll({
+                type: 'window',
+                includeUncontrolled: true,
+            });
+            await Promise.all(all.map((client) => client.navigate(client.url)));
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budarin/pluggable-serviceworker",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "description": "Extensible via plugins service worker",
   "keywords": [
     "serviceworker",
@@ -21,6 +21,7 @@
   ],
   "exports": {
     ".": "./dist/index.js",
+    "./client": "./dist/client/index.js",
     "./plugins": "./dist/plugins/index.js",
     "./presets": "./dist/presets/index.js",
     "./sw": "./dist/sw/index.js",
@@ -44,6 +45,7 @@
     "test:watch": "vitest",
     "clear-caches": "sh scripts/clear-caches.sh",
     "pnpm-install": "pnpm install",
+    "sync-workspace": "sh scripts/sync-workspace.sh",
     "upgrade-deps": "sh scripts/upgrade-deps.sh",
     "publish-package": "pnpm build && pnpm publish --access=public"
   }