nexa-pwa 0.7.0

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { useOffline } from './useOffline.js';
+export { useInstallPrompt } from './useInstallPrompt.js';
+export { usePWAUpdate } from './usePWAUpdate.js';
+export { nexaPWA } from './plugin.js';
+export type { PWAPluginOptions, CacheStrategy } from './plugin.js';
+export type { InstallPromptState } from './useInstallPrompt.js';
+export type { PWAUpdateState } from './usePWAUpdate.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { useOffline } from './useOffline.js';
+export { useInstallPrompt } from './useInstallPrompt.js';
+export { usePWAUpdate } from './usePWAUpdate.js';
+export { nexaPWA } from './plugin.js';

package/dist/plugin.d.ts

@@ -0,0 +1,19 @@
+export type CacheStrategy = 'cache-first' | 'network-first' | 'stale-while-revalidate';
+export interface PWAPluginOptions {
+    name: string;
+    shortName?: string;
+    description?: string;
+    themeColor?: string;
+    backgroundColor?: string;
+    display?: 'standalone' | 'fullscreen' | 'minimal-ui' | 'browser';
+    startUrl?: string;
+    icons?: Array<{
+        src: string;
+        sizes: string;
+        type?: string;
+    }>;
+    cacheStrategy?: CacheStrategy;
+    cacheRoutes?: string[];
+    swPath?: string;
+}
+export declare function nexaPWA(opts: PWAPluginOptions): any;

package/dist/plugin.js

@@ -0,0 +1,123 @@
+const defaultIcons = [
+    { src: '/icons/icon-192.png', sizes: '192x192', type: 'image/png' },
+    { src: '/icons/icon-512.png', sizes: '512x512', type: 'image/png' },
+];
+function buildManifest(opts) {
+    return JSON.stringify({
+        name: opts.name,
+        short_name: opts.shortName ?? opts.name,
+        description: opts.description ?? '',
+        theme_color: opts.themeColor ?? '#6366f1',
+        background_color: opts.backgroundColor ?? '#0f0f14',
+        display: opts.display ?? 'standalone',
+        start_url: opts.startUrl ?? '/',
+        icons: opts.icons ?? defaultIcons,
+    }, null, 2);
+}
+function buildServiceWorker(opts) {
+    const strategy = opts.cacheStrategy ?? 'network-first';
+    const cacheName = `nexa-cache-v1`;
+    const routes = opts.cacheRoutes ?? ['/'];
+    return `
+const CACHE_NAME = '${cacheName}';
+const PRECACHE_ROUTES = ${JSON.stringify(routes)};
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(PRECACHE_ROUTES))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'SKIP_WAITING') self.skipWaiting();
+});
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.method !== 'GET') return;
+  ${strategy === 'cache-first' ? buildCacheFirst() :
+        strategy === 'stale-while-revalidate' ? buildStaleWhileRevalidate() :
+            buildNetworkFirst()}
+});
+`.trim();
+}
+const buildCacheFirst = () => `
+  event.respondWith(
+    caches.match(event.request).then((cached) =>
+      cached ?? fetch(event.request).then((res) => {
+        const clone = res.clone();
+        caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
+        return res;
+      })
+    )
+  );`;
+const buildNetworkFirst = () => `
+  event.respondWith(
+    fetch(event.request)
+      .then((res) => {
+        const clone = res.clone();
+        caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
+        return res;
+      })
+      .catch(() => caches.match(event.request))
+  );`;
+const buildStaleWhileRevalidate = () => `
+  event.respondWith(
+    caches.open(CACHE_NAME).then((cache) =>
+      cache.match(event.request).then((cached) => {
+        const networkFetch = fetch(event.request).then((res) => {
+          cache.put(event.request, res.clone());
+          return res;
+        });
+        return cached ?? networkFetch;
+      })
+    )
+  );`;
+export function nexaPWA(opts) {
+    const swPath = opts.swPath ?? '/sw.js';
+    return {
+        name: 'vite-plugin-nexa-pwa',
+        enforce: 'post',
+        configureServer(server) {
+            server.middlewares.use('/manifest.webmanifest', (_req, res) => {
+                res.setHeader('Content-Type', 'application/manifest+json');
+                res.end(buildManifest(opts));
+            });
+            server.middlewares.use(swPath, (_req, res) => {
+                res.setHeader('Content-Type', 'application/javascript');
+                res.end(buildServiceWorker(opts));
+            });
+        },
+        generateBundle() {
+            this.emitFile({
+                type: 'asset',
+                fileName: 'manifest.webmanifest',
+                source: buildManifest(opts),
+            });
+            this.emitFile({
+                type: 'asset',
+                fileName: swPath.replace(/^\//, ''),
+                source: buildServiceWorker(opts),
+            });
+        },
+        transformIndexHtml(html) {
+            const tags = [
+                `<link rel="manifest" href="/manifest.webmanifest">`,
+                `<meta name="theme-color" content="${opts.themeColor ?? '#6366f1'}">`,
+                `<meta name="mobile-web-app-capable" content="yes">`,
+                `<meta name="apple-mobile-web-app-capable" content="yes">`,
+                `<script>if('serviceWorker' in navigator) navigator.serviceWorker.register('${swPath}')</script>`,
+            ].join('\n    ');
+            return html.replace('</head>', `    ${tags}\n  </head>`);
+        },
+    };
+}

package/dist/useInstallPrompt.d.ts

@@ -0,0 +1,7 @@
+import { signal } from 'nexa-reactivity';
+export interface InstallPromptState {
+    canInstall: ReturnType<typeof signal<boolean>>;
+    prompt: () => Promise<'accepted' | 'dismissed' | 'unavailable'>;
+    destroy: () => void;
+}
+export declare function useInstallPrompt(): InstallPromptState;

package/dist/useInstallPrompt.js

@@ -0,0 +1,26 @@
+import { signal } from 'nexa-reactivity';
+export function useInstallPrompt() {
+    const canInstall = signal(false);
+    let deferredEvent = null;
+    const onBeforeInstall = (e) => {
+        e.preventDefault();
+        deferredEvent = e;
+        canInstall.value = true;
+    };
+    window.addEventListener('beforeinstallprompt', onBeforeInstall);
+    return {
+        canInstall,
+        async prompt() {
+            if (!deferredEvent)
+                return 'unavailable';
+            deferredEvent.prompt();
+            const { outcome } = await deferredEvent.userChoice;
+            deferredEvent = null;
+            canInstall.value = false;
+            return outcome;
+        },
+        destroy() {
+            window.removeEventListener('beforeinstallprompt', onBeforeInstall);
+        }
+    };
+}

package/dist/useOffline.d.ts

@@ -0,0 +1,4 @@
+export declare function useOffline(): {
+    isOffline: import("nexa-reactivity").Signal<boolean>;
+    destroy(): void;
+};

package/dist/useOffline.js

@@ -0,0 +1,15 @@
+import { signal } from 'nexa-reactivity';
+export function useOffline() {
+    const isOffline = signal(!navigator.onLine);
+    const onOnline = () => { isOffline.value = false; };
+    const onOffline = () => { isOffline.value = true; };
+    window.addEventListener('online', onOnline);
+    window.addEventListener('offline', onOffline);
+    return {
+        isOffline,
+        destroy() {
+            window.removeEventListener('online', onOnline);
+            window.removeEventListener('offline', onOffline);
+        }
+    };
+}

package/dist/usePWAUpdate.d.ts

@@ -0,0 +1,7 @@
+import { signal } from 'nexa-reactivity';
+export interface PWAUpdateState {
+    updateAvailable: ReturnType<typeof signal<boolean>>;
+    applyUpdate: () => void;
+    destroy: () => void;
+}
+export declare function usePWAUpdate(): PWAUpdateState;

package/dist/usePWAUpdate.js

@@ -0,0 +1,40 @@
+import { signal } from 'nexa-reactivity';
+export function usePWAUpdate() {
+    const updateAvailable = signal(false);
+    let waitingWorker = null;
+    const onControllerChange = () => {
+        window.location.reload();
+    };
+    const checkRegistration = async () => {
+        if (!('serviceWorker' in navigator))
+            return;
+        const reg = await navigator.serviceWorker.getRegistration();
+        if (!reg)
+            return;
+        const onUpdateFound = () => {
+            const installing = reg.installing;
+            if (!installing)
+                return;
+            installing.addEventListener('statechange', () => {
+                if (installing.state === 'installed' && navigator.serviceWorker.controller) {
+                    waitingWorker = installing;
+                    updateAvailable.value = true;
+                }
+            });
+        };
+        reg.addEventListener('updatefound', onUpdateFound);
+        navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
+    };
+    checkRegistration();
+    return {
+        updateAvailable,
+        applyUpdate() {
+            if (waitingWorker) {
+                waitingWorker.postMessage({ type: 'SKIP_WAITING' });
+            }
+        },
+        destroy() {
+            navigator.serviceWorker?.removeEventListener('controllerchange', onControllerChange);
+        }
+    };
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "nexa-pwa",
+  "version": "0.7.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "nexa-reactivity": "0.7.0"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}