Compare commits
37 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 722bf5d946 | |||
| 299e3ac33f | |||
| 951a48cf88 | |||
| 8b7fe245f0 | |||
| 5bc24ad88b | |||
| a35775499b | |||
| f9a8b61743 | |||
| ffad23e6cf | |||
| cb429b1f5f | |||
| c4e0e9b915 | |||
| 8bb4814350 | |||
| 9c7e17bdbb | |||
| cbff5a2126 | |||
| 43a335ab3a | |||
| 5f015380be | |||
| ba12ba561b | |||
| aadec22023 | |||
| 4db6fa6771 | |||
| 0f171e43e7 | |||
| 5d9e914b23 | |||
| b33ab76a9e | |||
| 78a5c53d19 | |||
| 4bae49cfb0 | |||
| 031eb78288 | |||
| 98eae1e79a | |||
| aa677a2b7c | |||
| 5a81858df5 | |||
| c263b0608c | |||
| 30126f716e | |||
| 4dc0cb311b | |||
| 84256fd8fc | |||
| 8010977d05 | |||
| 54bb12d6ff | |||
| 9ac91fd166 | |||
| b4e26d6d6a | |||
| 1885eb78e5 | |||
| 8b4c5918e9 |
188
changelog.md
188
changelog.md
@@ -1,5 +1,193 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-04 - 7.5.0 - feat(serviceworker)
|
||||
Add real-time service worker push updates and DeesComms integration (metrics, events, resource caching)
|
||||
|
||||
- Integrate DeesComms push channel for real-time SW → client communication and export/consume deesComms in relevant plugin modules.
|
||||
- Add typed push message interfaces for events, metrics snapshots and resource-cached notifications in serviceworker interfaces.
|
||||
- Implement backend push methods: pushEvent, pushMetricsUpdate (with 500ms throttle) and pushResourceCached in ServiceworkerBackend.
|
||||
- Trigger push updates from MetricsCollector and PersistentStore so metrics and logged events are broadcast to connected clients.
|
||||
- Add client-side DeesComms handlers in sw-dash app: receive metrics, event logs and resource notifications; add heartbeat and initial HTTP seed to maintain SW health state.
|
||||
- Add event push listener and cleanup in sw-dash-events component to prepend incoming events and avoid leaks.
|
||||
- Expose getServiceWorkerBackend() from SW init for internal modules to call push methods.
|
||||
- Misc: implement request deduplication and various robustness improvements (throttling, heartbeat, safer polling, removed noisy debug logs).
|
||||
|
||||
## 2025-12-04 - 7.4.1 - fix(web_serviceworker)
|
||||
Improve service worker persistence, metrics and caching robustness
|
||||
|
||||
- Ensure persistent store is initialized before use in dashboard handlers and service worker activation/handlers (calls to persistentStore.init())
|
||||
- Make serveCumulativeMetrics async and align fetchEvent.respondWith usage (remove unnecessary Promise.resolve)
|
||||
- Change persistent WebStore database name to 'losslessServiceworkerPersistent' to separate durable store from runtime store
|
||||
- Make PersistentStore.init() more resilient: add detailed logging, avoid throwing on init failure, mark initialized to prevent retry loops, and start periodic save only after load
|
||||
- Ensure logEvent awaits initialization and adds defensive logging around reading/writing the event log
|
||||
- Add request deduplication logic and improved cache handling in CacheManager (fetchWithDeduplication usage and safer respondWith)
|
||||
|
||||
## 2025-12-04 - 7.4.0 - feat(serviceworker)
|
||||
Add persistent event store, cumulative metrics and dashboard events UI for service worker observability
|
||||
|
||||
- Add PersistentStore (ts_web_serviceworker/classes.persistentstore.ts) to persist event log and cumulative metrics with retention policy and periodic saving.
|
||||
- Introduce persistent event types and interfaces for event log and cumulative metrics (ts_interfaces/serviceworker.ts).
|
||||
- Log lifecycle, update, network and speedtest events to the persistent store (install, activate, update available/applied/error, network online/offline, speedtest started/completed/failed, cache invalidation).
|
||||
- Expose persistent-store APIs via typed handlers in the service worker backend: serviceworker_getEventLog, serviceworker_getCumulativeMetrics, serviceworker_clearEventLog, serviceworker_getEventCount.
|
||||
- Serve new dashboard endpoints from the service worker: /sw-dash/events (GET), /sw-dash/events/count (GET), /sw-dash/cumulative-metrics (GET) and DELETE /sw-dash/events to clear the log (handled in classes.cachemanager and classes.dashboard).
|
||||
- Add sw-dash events panel component (ts_swdash/sw-dash-events.ts) and integrate an Events tab into the dashboard UI (ts_swdash/sw-dash-app.ts, sw-dash-overview.ts shows 1h event count).
|
||||
- Reset cumulative metrics on cache invalidation and increment swRestartCount on PersistentStore.init().
|
||||
- Record speedtest lifecycle events (started/completed/failed) and include details in the event log.
|
||||
|
||||
## 2025-12-04 - 7.3.0 - feat(serviceworker)
|
||||
Modernize SW dashboard UI and improve service worker backend and server tooling
|
||||
|
||||
- Revamped sw-dash UI: new header/logo, uptime badge, live auto-refresh indicator, reorganized panels and improved speedtest UI and controls
|
||||
- Shared styles overhaul: new theming variables, spacing scale, badges, refined progress/pulse animations and cleaner typography
|
||||
- Dashboard internals: metrics endpoint and SPA shell updated; Lit bundle loading and table sort icon changed to ↑/↓
|
||||
- Service worker: added request deduplication (in-flight request coalescing), safer caching logic, consistent CORS/caching headers, and cache revalidation
|
||||
- Metrics: richer MetricsCollector with per-resource tracking, domain/content-type stats, speedtest metrics and better summary/stat helpers
|
||||
- Update & network managers: rate-limited update checks, debounced update/revalidation tasks, online/offline checks and improved retry/backoff logic
|
||||
- TypedServer & tooling: addRoute API for custom routes, improved HTML reload script injection, TypedSocket integration and a backend speedtest handler
|
||||
- servertools: improved static/proxy handlers (more robust path extraction, compression handling) and deprecation notice for addTypedSocket()
|
||||
|
||||
## 2025-12-04 - 7.2.0 - feat(serviceworker)
|
||||
Add service worker status updates, EventBus and UI status pill for realtime observability
|
||||
|
||||
- Introduce a status update protocol for service worker <-> clients (IStatusUpdate, IMessage_Serviceworker_StatusUpdate, IRequest_Serviceworker_GetStatus).
|
||||
- Add typedserver-statuspill Lit component to display backend/serviceworker/network status in the UI, with expand/collapse details and persistent/error states.
|
||||
- Wire ReloadChecker to use the new status pill: show network/backend/serviceworker status, handle online/offline events, and subscribe to service worker status broadcasts.
|
||||
- Extend ActionManager (client) with subscribeToStatusUpdates and getServiceWorkerStatus helpers; forward serviceworker_statusUpdate broadcasts to registered callbacks.
|
||||
- Serviceworker backend: add serviceworker_getStatus handler and broadcastStatusUpdate API; subscribe to EventBus lifecycle/network/update events to broadcast status changes to clients.
|
||||
- Add EventBus for decoupled service worker internal events (ServiceWorkerEvent enum, pub/sub API, history and convenience emitters).
|
||||
- Ensure proper subscribe/unsubscribe lifecycle (ReloadChecker stops SW subscription on stop).
|
||||
- Improve cache/connection status reporting integration so status updates include details like cacheHitRate, resourceCount and connected clients.
|
||||
|
||||
## 2025-12-04 - 7.1.0 - feat(swdash)
|
||||
Add live speedtest progress UI to service worker dashboard
|
||||
|
||||
- Introduce reactive speedtest state (phase, progress, elapsed) in sw-dash-overview component
|
||||
- Start a progress interval to animate overall test progress and estimate phases (latency, download, upload)
|
||||
- Dispatch 'speedtest-complete' event and show a brief complete state before resetting UI
|
||||
- Add helper methods for phase labels and elapsed time formatting
|
||||
- Add CSS for progress bar, shimmer animation and phase pulse to sw-dash-styles
|
||||
|
||||
## 2025-12-04 - 7.0.0 - BREAKING CHANGE(serviceworker)
|
||||
Move serviceworker speedtest to time-based chunked transfers and update dashboard/server contract
|
||||
|
||||
- Change speedtest protocol to time-based chunk transfers: new request types 'download_chunk' and 'upload_chunk' plus 'latency'. Clients should call chunk requests in a loop for the desired test duration.
|
||||
- IRequest_Serviceworker_Speedtest interface updated: request fields renamed/changed (chunkSizeKB, payload) and response no longer includes durationMs or speedMbps — server now returns bytesTransferred, timestamp, and optional payload.
|
||||
- TypedServer speedtest handler updated to support 'download_chunk' and 'upload_chunk' semantics and to return bytesTransferred/timestamp/payload only (removed server-side duration/speed calculation).
|
||||
- Dashboard runSpeedtest now performs time-based tests (TEST_DURATION_MS = 5000, CHUNK_SIZE_KB = 64) by repeatedly requesting chunks and computing throughput on the client side.
|
||||
- Documentation/comments updated to clarify new speedtest behavior and default chunk sizes.
|
||||
|
||||
## 2025-12-04 - 6.8.1 - fix(web_serviceworker)
|
||||
Move service worker initialization to init.ts and remove exports from service worker entrypoint to avoid ESM bundle output
|
||||
|
||||
- Remove exports from ts_web_serviceworker/index.ts so the service worker entrypoint does not export symbols (prevents tsbundle from producing ESM output).
|
||||
- Add ts_web_serviceworker/init.ts which initializes the ServiceWorker instance and exports getServiceWorkerInstance() for internal imports.
|
||||
- Update ts_web_serviceworker/classes.dashboard.ts to import getServiceWorkerInstance from init.ts instead of index.ts.
|
||||
|
||||
## 2025-12-04 - 6.8.0 - feat(swdash)
|
||||
Add SW-Dash (Lit-based service worker dashboard), bundle & serve it; improve servertools and static handlers
|
||||
|
||||
- Add a new sw-dash frontend (ts_swdash) implemented with Lit: sw-dash-app, sw-dash-overview, sw-dash-urls, sw-dash-domains, sw-dash-types, sw-dash-table, shared styles and plugin shims.
|
||||
- Wire sw-dash into build pipeline and packaging: add ts_swdash bundle to npm build script and include ts_swdash in package files.
|
||||
- Serve the dashboard bundle: add paths (swdashBundleDir / swdashBundlePath) and a built-in route (/sw-dash/bundle.js) in BuiltInRoutesController.
|
||||
- Simplify service-worker dashboard HTML output to a minimal shell that mounts <sw-dash-app> and loads the module /sw-dash/bundle.js (reduces inline HTML/CSS/JS duplication).
|
||||
- Lazy-load service worker bundle and source map in servertools.tools.serviceworker and expose /sw-typedrequest endpoints for SW typed requests (including speedtest handler).
|
||||
- Enhance compression utilities and static serving: Compressor now caches compressed results, prioritizes preferred compression methods, provides safer zlib calls, and exposes createCompressionStream; HandlerStatic gained improved path resolution, Express 5 wildcard handling and optional compression flow.
|
||||
- Improve proxy/static handler path handling to be compatible with Express 5 wildcard parameters and more robust fallback logic.
|
||||
- Deprecate Server.addTypedSocket (no-op) and document recommended SmartServe/TypedServer integration for WebSocket support.
|
||||
- Various minor packaging/path updates (paths.ts, plugins exports) to support the new dashboard and bundles.
|
||||
|
||||
## 2025-12-04 - 6.7.0 - feat(web_serviceworker)
|
||||
Add per-resource metrics and request deduplication to service worker cache manager
|
||||
|
||||
- Introduce per-resource tracking in metrics: ICachedResource, IDomainStats, IContentTypeStats and a resourceStats map.
|
||||
- Add MetricsCollector.recordResourceAccess(...) to record hits/misses, content-type and size; provide getters: getCachedResources, getDomainStats, getContentTypeStats and getResourceCount.
|
||||
- Reset resourceStats when metrics are reset and limit resource entries via cleanupResourceStats to avoid memory bloat.
|
||||
- Add request deduplication in CacheManager (fetchWithDeduplication) to coalesce identical concurrent fetches and a periodic safety cleanup for in-flight requests.
|
||||
- Record resource accesses on cache hit and when storing new cache entries (captures content-type and body size).
|
||||
- Expose a dashboard resources endpoint (/sw-dash/resources) served by the SW dashboard to return detailed resource data for SPA views.
|
||||
|
||||
## 2025-12-04 - 6.6.0 - feat(web_serviceworker)
|
||||
Enable service worker dashboard speedtests via TypedSocket, expose ServiceWorker instance to dashboard, and add server-side speedtest handler
|
||||
|
||||
- Add `serviceworker_speedtest` typed handler in TypedServer to support download/upload/latency tests from service workers
|
||||
- Export `getServiceWorkerInstance` from the web_serviceworker entrypoint so other modules (dashboard) can access the running ServiceWorker instance
|
||||
- Make ServiceWorker.typedsocket and ServiceWorker.typedrouter public to allow the dashboard to create and fire TypedSocket requests
|
||||
- Update dashboard to run latency, download and upload tests over TypedSocket instead of POSTing to /sw-typedrequest
|
||||
- Deprecate legacy servertools.Server.addTypedSocket (now a no-op) and recommend using TypedServer with SmartServe integration for WebSocket support
|
||||
|
||||
## 2025-12-04 - 6.5.0 - feat(serviceworker)
|
||||
Add server-driven service worker cache invalidation and TypedSocket integration
|
||||
|
||||
- TypedServer: push cache invalidation messages to service worker clients (tagged 'serviceworker') before notifying frontend clients on reload
|
||||
- Service Worker: connect to TypedServer via TypedSocket; handle 'serviceworker_cacheInvalidate' typed request to clean caches and trigger client reloads
|
||||
- Web inject: add fallback to clear caches via the Cache API when global service worker helper is not available
|
||||
- Interfaces: add IRequest_Serviceworker_CacheInvalidate typedrequest interface
|
||||
- Plugins: export typedsocket in web_serviceworker plugin surface
|
||||
- Service worker connection: retry logic and improved logging for TypedSocket connection attempts
|
||||
|
||||
## 2025-12-04 - 6.4.0 - feat(serviceworker)
|
||||
Add speedtest support to service worker and dashboard
|
||||
|
||||
- Add serviceworker_speedtest typed request handler to measure download, upload and latency
|
||||
- Expose dashboard speedtest endpoint (/sw-dash/speedtest) and integrate runSpeedtest flow
|
||||
- Dashboard UI: add speedtest panel, run button, visual speed bars and online indicator
|
||||
- Metrics: introduce ISpeedtestMetrics and methods (recordSpeedtest, setOnlineStatus, getSpeedtestMetrics) and include speedtest data in metrics output
|
||||
- Server/tools: add typedrequest handling for speedtest in sw-typedrequest and route service worker dashboard path in CacheManager
|
||||
|
||||
## 2025-12-04 - 6.3.0 - feat(web_serviceworker)
|
||||
Add advanced service worker subsystems: cache deduplication, metrics, update & network managers, event bus and dashboard
|
||||
|
||||
- CacheManager: request deduplication for concurrent fetches, safer caching (preserve CORS headers), periodic in-flight cleanup and full cache cleaning API
|
||||
- Fetch handling: improved handling for same-origin vs cross-origin requests, more robust 500 debug responses when upstream fetch fails
|
||||
- UpdateManager: rate-limited update checks, offline grace period, debounced update and cache revalidation tasks, forceUpdate logic and persisted version/cache timestamps
|
||||
- NetworkManager: online/offline detection, retry/backoff, request timeouts and more resilient makeRequest implementation
|
||||
- EventBus: singleton pub/sub with history, once/onMany/onAll helpers and convenience emitters for cache/network/update events
|
||||
- MetricsCollector: comprehensive metrics for cache, network, updates and connections with helper methods and JSON/HTML dashboard endpoints (/sw-dash, /sw-dash/metrics)
|
||||
- ErrorHandler & ServiceWorkerError: structured error types, severity, context, history and helper APIs for consistent error reporting
|
||||
- ServiceWorker & backend: improved install/activate flows, clients.claim(), cache cleaning on activation, backend APIs to purge cache and trigger reloads/notifications
|
||||
- TypedServer / servertools: addRoute path pattern parsing (named params & wildcards), safer HTML injection for reload script, TypedRequest controller and service worker route helpers
|
||||
- Various safety and compatibility improvements (response cloning, header normalization, cache-control decisions, and fallback behaviors)
|
||||
|
||||
## 2025-12-04 - 6.2.0 - feat(web_serviceworker)
|
||||
Add service-worker dashboard and request deduplication; improve caching, metrics and error handling
|
||||
|
||||
- Add DashboardGenerator to serve an interactive terminal-style dashboard at /sw-dash and a metrics JSON endpoint at /sw-dash/metrics
|
||||
- Introduce request deduplication in CacheManager to coalesce concurrent network fetches and avoid duplicate requests
|
||||
- Add periodic cleanup for in-flight request tracking to prevent unbounded memory growth
|
||||
- Improve caching flow: preserve response headers (excluding cache-control headers), ensure CORS headers and Cross-Origin-Resource-Policy, and store response bodies as blobs to avoid locked stream issues
|
||||
- Provide clearer 500 error HTML responses for failed fetches to aid debugging
|
||||
- Integrate metrics and event emissions for network and cache operations (record request success/failure, cache hits/misses, and emit corresponding events)
|
||||
|
||||
## 2025-12-04 - 6.1.0 - feat(web_serviceworker)
|
||||
Enhance service worker subsystem: add metrics, event bus, error handling, config and caching/update improvements; make client connection & polling robust
|
||||
|
||||
- Introduce MetricsCollector (cache, network, update, connection) for runtime observability and APIs to retrieve metrics
|
||||
- Add EventBus singleton to emit/subscribe to internal SW events (cache hits/misses, network events, update lifecycle, connection events)
|
||||
- Add ErrorHandler and ServiceWorkerError types for consistent error classification and tracking
|
||||
- Add ServiceWorkerConfig with defaults and WebStore persistence to centralize SW settings (cache, update, network, blocked/cacheable domains)
|
||||
- CacheManager: implement request deduplication (in-flight request coalescing), periodic in-flight cleanup, record cache hit/miss metrics and safer cache storing (headers/body handling)
|
||||
- UpdateManager: rate-limited and concurrency-safe update checks, improved stale-cache handling, event emissions, debounced update and revalidation tasks, and metrics recording
|
||||
- NetworkManager: enhanced online/offline detection and robust request retries/timeouts/backoff handling
|
||||
- ServiceworkerBackend: improved client reload logic and notification handling via DeesComms and clients API
|
||||
- Serviceworker client-side: ActionManager.waitForServiceWorkerConnection now returns a structured result with timeout/retries/backoff; ServiceworkerClient gains controllable polling (AbortController), visibility-based pause/resume, manual trigger and lifecycle cleanup
|
||||
- Expose serviceworker bundle routes at both nested and root paths (/serviceworker/*splat and /serviceworker.bundle.js(.map)) in servertools
|
||||
- Add/extend typed interfaces for serviceworker metrics and connection results
|
||||
|
||||
## 2025-12-04 - 6.0.1 - fix(web_inject)
|
||||
Use TypedSocket status API in web_inject and bump dependencies
|
||||
|
||||
- ts_web_inject: switch from typedsocket.addTag + eventSubject to await typedsocket.setTag + statusSubject; update logging and handle 'reconnecting' status as backend connection loss
|
||||
- Await setTag call to ensure tag is applied before relying on socket state
|
||||
- Bump dependencies: @api.global/typedrequest -> ^3.1.11, @api.global/typedsocket -> ^4.1.0, @push.rocks/smartserve -> ^1.1.2
|
||||
|
||||
## 2025-12-03 - 6.0.0 - BREAKING CHANGE(servertools.Server.addTypedSocket)
|
||||
Deprecate Server.addTypedSocket and upgrade typedsocket to v4; make addTypedSocket a no-op and log a deprecation warning. Bump tsbundle devDependency.
|
||||
|
||||
- Upgrade dependency @api.global/typedsocket to ^4.0.0. TypedSocket v4 no longer supports attaching to an existing Express server.
|
||||
- Deprecate servertools.Server.addTypedSocket(): the method is now a no-op and emits a console.warn directing users to use TypedServer with SmartServe integration for WebSocket support.
|
||||
- Bump devDependency @git.zone/tsbundle to ^2.6.3.
|
||||
- Breaking change: any consumer code that relied on addTypedSocket to attach a WebSocket server to an existing Express instance will need to migrate to the new SmartServe/TypedServer integration.
|
||||
|
||||
## 2025-12-02 - 5.0.0 - BREAKING CHANGE(devtools)
|
||||
Switch /reloadcheck endpoint from GET to POST in DevToolsController
|
||||
|
||||
|
||||
13
package.json
13
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@api.global/typedserver",
|
||||
"version": "5.0.0",
|
||||
"version": "7.5.0",
|
||||
"description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
@@ -15,7 +15,7 @@
|
||||
"scripts": {
|
||||
"test": "npm run build && tstest test/ --verbose --logfile --timeout 60",
|
||||
"build": "tsbuild tsfolders --web --allowimplicitany && npm run bundle",
|
||||
"bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js",
|
||||
"bundle": "tsbundle --from ./ts_web_inject/index.ts --to ./dist_ts_web_inject/bundle.js && tsbundle --from ./ts_web_serviceworker/index.ts --to ./dist_ts_web_serviceworker/serviceworker.bundle.js && tsbundle --from ./ts_swdash/index.ts --to ./dist_ts_swdash/bundle.js",
|
||||
"interfaces": "tsbuild interfaces --web --allowimplicitany --skiplibcheck",
|
||||
"docs": "tsdoc aidoc"
|
||||
},
|
||||
@@ -47,6 +47,7 @@
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
"ts_web/**/*",
|
||||
"ts_swdash/**/*",
|
||||
"dist/**/*",
|
||||
"dist_*/**/*",
|
||||
"dist_ts/**/*",
|
||||
@@ -58,9 +59,9 @@
|
||||
],
|
||||
"homepage": "https://code.foss.global/api.global/typedserver",
|
||||
"dependencies": {
|
||||
"@api.global/typedrequest": "^3.1.10",
|
||||
"@api.global/typedrequest": "^3.1.11",
|
||||
"@api.global/typedrequest-interfaces": "^3.0.19",
|
||||
"@api.global/typedsocket": "^3.1.1",
|
||||
"@api.global/typedsocket": "^4.1.0",
|
||||
"@cloudflare/workers-types": "^4.20251202.0",
|
||||
"@design.estate/dees-comms": "^1.0.27",
|
||||
"@push.rocks/lik": "^6.2.2",
|
||||
@@ -82,7 +83,7 @@
|
||||
"@push.rocks/smartpromise": "^4.2.3",
|
||||
"@push.rocks/smartrequest": "^5.0.1",
|
||||
"@push.rocks/smartrx": "^3.0.10",
|
||||
"@push.rocks/smartserve": "^1.1.0",
|
||||
"@push.rocks/smartserve": "^1.1.2",
|
||||
"@push.rocks/smartsitemap": "^2.0.4",
|
||||
"@push.rocks/smartstream": "^3.2.5",
|
||||
"@push.rocks/smarttime": "^4.1.1",
|
||||
@@ -100,7 +101,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tsrun": "^2.0.0",
|
||||
"@git.zone/tstest": "^3.1.3",
|
||||
"@types/node": "^24.10.1"
|
||||
|
||||
408
pnpm-lock.yaml
generated
408
pnpm-lock.yaml
generated
@@ -9,14 +9,14 @@ importers:
|
||||
.:
|
||||
dependencies:
|
||||
'@api.global/typedrequest':
|
||||
specifier: ^3.1.10
|
||||
version: 3.1.10
|
||||
specifier: ^3.1.11
|
||||
version: 3.1.11
|
||||
'@api.global/typedrequest-interfaces':
|
||||
specifier: ^3.0.19
|
||||
version: 3.0.19
|
||||
'@api.global/typedsocket':
|
||||
specifier: ^3.1.1
|
||||
version: 3.1.1(@push.rocks/smartserve@1.1.0)
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0(@push.rocks/smartserve@1.1.2)
|
||||
'@cloudflare/workers-types':
|
||||
specifier: ^4.20251202.0
|
||||
version: 4.20251202.0
|
||||
@@ -81,8 +81,8 @@ importers:
|
||||
specifier: ^3.0.10
|
||||
version: 3.0.10
|
||||
'@push.rocks/smartserve':
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2
|
||||
'@push.rocks/smartsitemap':
|
||||
specifier: ^2.0.4
|
||||
version: 2.0.4
|
||||
@@ -130,14 +130,14 @@ importers:
|
||||
specifier: ^3.1.2
|
||||
version: 3.1.2
|
||||
'@git.zone/tsbundle':
|
||||
specifier: ^2.6.2
|
||||
version: 2.6.2
|
||||
specifier: ^2.6.3
|
||||
version: 2.6.3
|
||||
'@git.zone/tsrun':
|
||||
specifier: ^2.0.0
|
||||
version: 2.0.0
|
||||
'@git.zone/tstest':
|
||||
specifier: ^3.1.3
|
||||
version: 3.1.3(@aws-sdk/credential-providers@3.787.0)(@push.rocks/smartserve@1.1.0)(socks@2.8.7)(typescript@5.9.3)
|
||||
version: 3.1.3(@aws-sdk/credential-providers@3.787.0)(@push.rocks/smartserve@1.1.2)(socks@2.8.7)(typescript@5.9.3)
|
||||
'@types/node':
|
||||
specifier: ^24.10.1
|
||||
version: 24.10.1
|
||||
@@ -150,8 +150,8 @@ packages:
|
||||
'@api.global/typedrequest-interfaces@3.0.19':
|
||||
resolution: {integrity: sha512-uuHUXJeOy/inWSDrwD0Cwax2rovpxYllDhM2RWh+6mVpQuNmZ3uw6IVg6dA2G1rOe24Ebs+Y9SzEogo+jYN7vw==}
|
||||
|
||||
'@api.global/typedrequest@3.1.10':
|
||||
resolution: {integrity: sha512-EiCp44XVcMjBvEs4oM1nMUaeY4ySU0Pzt3+mDwVG5DNP6EV87Nwancbr2jKScvaFNel9eeDgGtgEnFBKjOnApA==}
|
||||
'@api.global/typedrequest@3.1.11':
|
||||
resolution: {integrity: sha512-j8EO3na0WMw8pFkAfEaEui2a4TaAL1G/dv1CYl8LEPXckSKkl1BCAS1kFOW2xuI9pwZkmSqlo3xpQ3KmkmHaGQ==}
|
||||
|
||||
'@api.global/typedserver@3.0.80':
|
||||
resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}
|
||||
@@ -164,6 +164,11 @@ packages:
|
||||
'@push.rocks/smartserve':
|
||||
optional: true
|
||||
|
||||
'@api.global/typedsocket@4.1.0':
|
||||
resolution: {integrity: sha512-ttmoU5BNHmLAkAF/o+Ta8F5O4F7CUmkFo6LK7NKHQvuYJvodPMYWdhJ6yCINTF4pfCgljkMDUqoVKobm6ea4mQ==}
|
||||
peerDependencies:
|
||||
'@push.rocks/smartserve': '>=1.1.0'
|
||||
|
||||
'@aws-crypto/crc32@5.2.0':
|
||||
resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
|
||||
engines: {node: '>=16.0.0'}
|
||||
@@ -896,8 +901,8 @@ packages:
|
||||
resolution: {integrity: sha512-K0u840Qo0WEhvcpAtktvdBX6KEXjelU32o820WzcK7dMA7dd2YV+mPOEYfbmWLcdtFJkrjkigQq5fpLhTN4oKQ==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tsbundle@2.6.2':
|
||||
resolution: {integrity: sha512-wj32zHpvbDUdStEjJ9RCqffmafqlopWSROSRBQDgpJ8hnMAO3ftWkTWWfGdTGh2p2pALfPqgSFzwxCd4RJG8aQ==}
|
||||
'@git.zone/tsbundle@2.6.3':
|
||||
resolution: {integrity: sha512-YD1qMYA/4eOuF57V0ccR+xo6ww1+QOYFA2K5gBPFBDNh9VdfvWxxDhOUybja8lT9PVMoli8PHG5WA5tKJkdXIQ==}
|
||||
hasBin: true
|
||||
|
||||
'@git.zone/tspublish@1.10.3':
|
||||
@@ -940,23 +945,23 @@ packages:
|
||||
'@mixmark-io/domino@2.2.0':
|
||||
resolution: {integrity: sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==}
|
||||
|
||||
'@module-federation/error-codes@0.21.4':
|
||||
resolution: {integrity: sha512-ClpL5MereWNXh+EgDjz7w4RrC1JlisQTvXDa1gLxpviHafzNDfdViVmuhi9xXVuj+EYo8KU70Y999KHhk9424Q==}
|
||||
'@module-federation/error-codes@0.21.6':
|
||||
resolution: {integrity: sha512-MLJUCQ05KnoVl8xd6xs9a5g2/8U+eWmVxg7xiBMeR0+7OjdWUbHwcwgVFatRIwSZvFgKHfWEiI7wsU1q1XbTRQ==}
|
||||
|
||||
'@module-federation/runtime-core@0.21.4':
|
||||
resolution: {integrity: sha512-SGpmoOLGNxZofpTOk6Lxb2ewaoz5wMi93AFYuuJB04HTVcngEK+baNeUZ2D/xewrqNIJoMY6f5maUjVfIIBPUA==}
|
||||
'@module-federation/runtime-core@0.21.6':
|
||||
resolution: {integrity: sha512-5Hd1Y5qp5lU/aTiK66lidMlM/4ji2gr3EXAtJdreJzkY+bKcI5+21GRcliZ4RAkICmvdxQU5PHPL71XmNc7Lsw==}
|
||||
|
||||
'@module-federation/runtime-tools@0.21.4':
|
||||
resolution: {integrity: sha512-RzFKaL0DIjSmkn76KZRfzfB6dD07cvID84950jlNQgdyoQFUGkqD80L6rIpVCJTY/R7LzR3aQjHnoqmq4JPo3w==}
|
||||
'@module-federation/runtime-tools@0.21.6':
|
||||
resolution: {integrity: sha512-fnP+ZOZTFeBGiTAnxve+axGmiYn2D60h86nUISXjXClK3LUY1krUfPgf6MaD4YDJ4i51OGXZWPekeMe16pkd8Q==}
|
||||
|
||||
'@module-federation/runtime@0.21.4':
|
||||
resolution: {integrity: sha512-wgvGqryurVEvkicufJmTG0ZehynCeNLklv8kIk5BLIsWYSddZAE+xe4xov1kgH5fIJQAoQNkRauFFjVNlHoAkA==}
|
||||
'@module-federation/runtime@0.21.6':
|
||||
resolution: {integrity: sha512-+caXwaQqwTNh+CQqyb4mZmXq7iEemRDrTZQGD+zyeH454JAYnJ3s/3oDFizdH6245pk+NiqDyOOkHzzFQorKhQ==}
|
||||
|
||||
'@module-federation/sdk@0.21.4':
|
||||
resolution: {integrity: sha512-tzvhOh/oAfX++6zCDDxuvioHY4Jurf8vcfoCbKFxusjmyKr32GPbwFDazUP+OPhYCc3dvaa9oWU6X/qpUBLfJw==}
|
||||
'@module-federation/sdk@0.21.6':
|
||||
resolution: {integrity: sha512-x6hARETb8iqHVhEsQBysuWpznNZViUh84qV2yE7AD+g7uIzHKiYdoWqj10posbo5XKf/147qgWDzKZoKoEP2dw==}
|
||||
|
||||
'@module-federation/webpack-bundler-runtime@0.21.4':
|
||||
resolution: {integrity: sha512-dusmR3uPnQh9u9ChQo3M+GLOuGFthfvnh7WitF/a1eoeTfRmXqnMFsXtZCUK+f/uXf+64874Zj/bhAgbBcVHZA==}
|
||||
'@module-federation/webpack-bundler-runtime@0.21.6':
|
||||
resolution: {integrity: sha512-7zIp3LrcWbhGuFDTUMLJ2FJvcwjlddqhWGxi/MW3ur1a+HaO8v5tF2nl+vElKmbG1DFLU/52l3PElVcWf/YcsQ==}
|
||||
|
||||
'@mongodb-js/saslprep@1.3.2':
|
||||
resolution: {integrity: sha512-QgA5AySqB27cGTXBFmnpifAi7HxoGUeezwo6p9dI03MuDB6Pp33zgclqVb6oVK3j6I9Vesg0+oojW2XxB59SGg==}
|
||||
@@ -964,6 +969,9 @@ packages:
|
||||
'@napi-rs/wasm-runtime@1.0.7':
|
||||
resolution: {integrity: sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==}
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.0':
|
||||
resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
|
||||
|
||||
'@oxc-project/types@0.99.0':
|
||||
resolution: {integrity: sha512-LLDEhXB7g1m5J+woRSgfKsFPS3LhR9xRhTeIoEBm5WrkwMxn6eZ0Ld0c0K5eHB57ChZX6I3uSmmLjZ8pcjlRcw==}
|
||||
|
||||
@@ -1060,9 +1068,6 @@ packages:
|
||||
'@push.rocks/smartbucket@4.3.0':
|
||||
resolution: {integrity: sha512-4nstzEduCKou4R5ekKH6kUjDZXWfrtjA1hIQ4MJmTbtncmm2+4+ixjaFThS2nS8Aa+fHcBgOtKkBv8wTsgvK/Q==}
|
||||
|
||||
'@push.rocks/smartbuffer@3.0.4':
|
||||
resolution: {integrity: sha512-TLfhx/JD61YC8XGO9TI6Ux6US38R14HaIM84QT8hZZod8axfXrg+h8xA8tMUBpSV8PXsQy9LzxmOq0Il1fmDXw==}
|
||||
|
||||
'@push.rocks/smartbuffer@3.0.5':
|
||||
resolution: {integrity: sha512-pWYF08Mn8s/KF/9nHRk7pZPzuMjmYVQay2c5gGexdayxn1W4eCSYYhWH73vR2JBfGeGq/izbRNuUuEaIEeTIKA==}
|
||||
|
||||
@@ -1211,8 +1216,8 @@ packages:
|
||||
'@push.rocks/smarts3@3.0.3':
|
||||
resolution: {integrity: sha512-Y9nXMwurthJ9Z7yi0RwjhPFUC58aY8Mhia8kFo6Xj1tBM4LE8Oxg/ydejF7otHqQGr3QyqV5C4YrDEG17rUuzg==}
|
||||
|
||||
'@push.rocks/smartserve@1.1.0':
|
||||
resolution: {integrity: sha512-w9cSRw+ia5oWXcuK1QCBCEUUPsAJ2zDeOv1gHDytL+2e1oLlRAEp35uhWFHGPsTCZiwgVZhy3ZORWemJTODQlQ==}
|
||||
'@push.rocks/smartserve@1.1.2':
|
||||
resolution: {integrity: sha512-NkJNgdDt/rfsd9AMheCxtFd5X+ubzffvxOxjb0Aw1A5JR3xmiWeRifqEV1oN7mMTGL9jyQVvIME6Yrdxr244dA==}
|
||||
|
||||
'@push.rocks/smartshell@3.3.0':
|
||||
resolution: {integrity: sha512-m0w618H6YBs+vXGz1CgS4nPi5CUAnqRtckcS9/koGwfcIx1IpjqmiP47BoCTbdgcv0IPUxQVBG1IXTHPuZ8Z5g==}
|
||||
@@ -1402,60 +1407,60 @@ packages:
|
||||
'@rolldown/pluginutils@1.0.0-beta.52':
|
||||
resolution: {integrity: sha512-/L0htLJZbaZFL1g9OHOblTxbCYIGefErJjtYOwgl9ZqNx27P3L0SDfjhhHIss32gu5NWgnxuT2a2Hnnv6QGHKA==}
|
||||
|
||||
'@rspack/binding-darwin-arm64@1.6.5':
|
||||
resolution: {integrity: sha512-DaAJTlaenqZIqFqIYcitn0SzjJ7WpC9234JpiSDZdRyXii9qJJiToVwxSPY/CmkrP0201+aC4pzN4tI9T0Ummw==}
|
||||
'@rspack/binding-darwin-arm64@1.6.6':
|
||||
resolution: {integrity: sha512-vGVDP0rlWa2w/gLba/sncVfkCah0HmhdmK5vGj/7sSX0iViwQneA2xjxDHyCNSQrvfq9GJmj4Kmdq/9tGh0KuA==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@rspack/binding-darwin-x64@1.6.5':
|
||||
resolution: {integrity: sha512-fPVfp7W/GMbHayb5hbefiMI30JxlsqPexOItHGtufHmTCrNne1aHmApspyUZIUUxG36oDRHuGPnfh+IQbHR6+g==}
|
||||
'@rspack/binding-darwin-x64@1.6.6':
|
||||
resolution: {integrity: sha512-IcdEG2kOmbPPO70Zl7gDnowDjK7d7C1hWew2vU7dPltr2t1JalRIMnS051lhiur0ULkSxV3cW1zXqv0Oi8AnOg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@rspack/binding-linux-arm64-gnu@1.6.5':
|
||||
resolution: {integrity: sha512-K68YDoV2e4s+nlrKZxgF0HehiiRwOAGgZFUwJNRMZ7MUrTGMNlPTJlM+bNdaCjDb6GFxBVFcNwIa1sU+0tF1zg==}
|
||||
'@rspack/binding-linux-arm64-gnu@1.6.6':
|
||||
resolution: {integrity: sha512-rIguCCtlTcwoFlwheDiUgdImk27spuCRn43zGJogARpM/ZYRFKIuSwFDGUtJT2g0TSLUAHUhWAUqC36NwvrbMQ==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@rspack/binding-linux-arm64-musl@1.6.5':
|
||||
resolution: {integrity: sha512-JPtxFBOq7RRmBIwpdGIStf8iyCILehDsjQtEB0Kkhtm7TsAkVGwtC41GLcNuPxcQBKqNDmD8cy3yLYhXadH2CQ==}
|
||||
'@rspack/binding-linux-arm64-musl@1.6.6':
|
||||
resolution: {integrity: sha512-x6X6Gr0fUw6qrJGxZt3Rb6oIX+jd9pdcyp0VbtofcLaqGVQbzustYsYnuLATPOys0q4J/4kWnmEhkjLJHwkhpQ==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@rspack/binding-linux-x64-gnu@1.6.5':
|
||||
resolution: {integrity: sha512-oh4ZNo2HtizZ/E6UK3BEONu20h8VVBw9GAXuWmo1u22cJSihzg+WfRNCMjRDil82LqSsyAgBwnU+dEjEYGKyAA==}
|
||||
'@rspack/binding-linux-x64-gnu@1.6.6':
|
||||
resolution: {integrity: sha512-gSlVdASszWHosQKn+nzYOInBijdQboUnmNMGgW9/PijVg3433IvQjzviUuJFno8CMGgrACV9yw+ZFDuK0J57VA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@rspack/binding-linux-x64-musl@1.6.5':
|
||||
resolution: {integrity: sha512-8Xebp5bvPJqjifpkFEAX5nUvoU2JvbMU3gwAkEovRRuvooCXnVT2tqkUBjkR3AhivAGgAxAr9hRzUUz/6QWt3Q==}
|
||||
'@rspack/binding-linux-x64-musl@1.6.6':
|
||||
resolution: {integrity: sha512-TZaqVkh7memsTK/hxkOBrbpdzbmBUMea1YnYt++7QjMgco1kWFvAQ+YhAWtIaOaEg8s6C07Lt0Zp8izM2Dja0g==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@rspack/binding-wasm32-wasi@1.6.5':
|
||||
resolution: {integrity: sha512-oINZNqzTxM+9dSUOjAORodHXYoJYzXvpaHI2U6ecEmoWaBCs+x3V3Po8DhpNFBwotB+jGlcoVhEHjpg5uaO6pw==}
|
||||
'@rspack/binding-wasm32-wasi@1.6.6':
|
||||
resolution: {integrity: sha512-W4mWdlLnYrbUaktyHOGNfATblxMTbgF7CBfDw8PhbDtjd2l8e/TnaHgIDkwITHXAOMEF/QEKfo9FtusbcQJNKw==}
|
||||
cpu: [wasm32]
|
||||
|
||||
'@rspack/binding-win32-arm64-msvc@1.6.5':
|
||||
resolution: {integrity: sha512-UUmep2ayuZxWPdrzkrzAFxVgYUWTB82pa9bkAGyeDO9SNkz8vTpdtbDaTvAzjFb8Pn+ErktDEDBKT57FLjxwxQ==}
|
||||
'@rspack/binding-win32-arm64-msvc@1.6.6':
|
||||
resolution: {integrity: sha512-cw5OgxqoDwjoZlk0L3vGEwcjPZsOVFYLwr2ssiC05rsTbhBwxj8coLpAJdvUvbf6C2TTmCB7iPe2sPq1KWD37g==}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@rspack/binding-win32-ia32-msvc@1.6.5':
|
||||
resolution: {integrity: sha512-7nx+mMimpmCMstcW7nsyToXy5TK7N+YGPu2W/oioX7qv9ZCuJGTddjzLS84wN8DVrNIirg4mcxpBsmOQMZeHQA==}
|
||||
'@rspack/binding-win32-ia32-msvc@1.6.6':
|
||||
resolution: {integrity: sha512-M4ruR+VZ59iy+mPjy6FQPT27cOgeytf3wFBrt7e0suKeNLYGxrNyI9YhgpCTY++SMJsAMgRLGDHoI3ZgWulw1Q==}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
|
||||
'@rspack/binding-win32-x64-msvc@1.6.5':
|
||||
resolution: {integrity: sha512-pzO7rYFu6f6stgSccolZHiXGTTwKrIGHHNV1ALY1xPRmQEdbHcbMwadeaG99JL2lRLve9iNI+Z9Pr3oDVRN46g==}
|
||||
'@rspack/binding-win32-x64-msvc@1.6.6':
|
||||
resolution: {integrity: sha512-q5QTvdhPUh+CA93cQG5zWKRIHMIWPzw+ftFDEwBw52zYdvNAoLniqD8o5Mi8CT0pndhulXgR5aw0Sjd3eMah+A==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@rspack/binding@1.6.5':
|
||||
resolution: {integrity: sha512-FzYsr5vdjaVQIlDTxZFlISOQGxl/4grpF2BeiNy60Fpw9eeADeXk55DVacbXPqpiz7Doj6cyhEyMszQOvihrqQ==}
|
||||
'@rspack/binding@1.6.6':
|
||||
resolution: {integrity: sha512-noiV+qhyBTVpvG2M4bnOwKk2Ynl6G47Wf7wpCjPCFr87qr3txNwTTnhkEJEU59yj+VvIhbRD2rf5+9TLoT0Wxg==}
|
||||
|
||||
'@rspack/core@1.6.5':
|
||||
resolution: {integrity: sha512-AqaOMA6MTNhqMYYwrhvPA+2uS662SkAi8Rb7B/IFOzh/Z5ooyczL4lUX+qyhAO3ymn50iwM4jikQCf9XfBiaQA==}
|
||||
'@rspack/core@1.6.6':
|
||||
resolution: {integrity: sha512-2mR+2YBydlgZ7Q0Rpd6bCC3MBnV9TS0x857K0zIhbDj4BQOqaWVy1n7fx/B3MrS8TR0QCuzKfyDAjNz+XTyJVQ==}
|
||||
engines: {node: '>=18.12.0'}
|
||||
peerDependencies:
|
||||
'@swc/helpers': '>=0.5.1'
|
||||
@@ -1493,8 +1498,8 @@ packages:
|
||||
resolution: {integrity: sha512-6gnIz3h+PEPQGDj8MnRSjDvKBah042jEoPgjFGJ4iJLBE78L4lY/n98x14XyPF4u3lN179Ub/ZKFY5za9GeLQw==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/core@3.18.6':
|
||||
resolution: {integrity: sha512-8Q/ugWqfDUEU1Exw71+DoOzlONJ2Cn9QA8VeeDzLLjzO/qruh9UKFzbszy4jXcIYgGofxYiT0t1TT6+CT/GupQ==}
|
||||
'@smithy/core@3.18.7':
|
||||
resolution: {integrity: sha512-axG9MvKhMWOhFbvf5y2DuyTxQueO0dkedY9QC3mAfndLosRI/9LJv8WaL0mw7ubNhsO4IuXX9/9dYGPFvHrqlw==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/credential-provider-imds@4.2.5':
|
||||
@@ -1561,16 +1566,16 @@ packages:
|
||||
resolution: {integrity: sha512-9pAX/H+VQPzNbouhDhkW723igBMLgrI8OtX+++M7iKJgg/zY/Ig3i1e6seCcx22FWhE6Q/S61BRdi2wXBORT+A==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/middleware-endpoint@4.3.13':
|
||||
resolution: {integrity: sha512-X4za1qCdyx1hEVVXuAWlZuK6wzLDv1uw1OY9VtaYy1lULl661+frY7FeuHdYdl7qAARUxH2yvNExU2/SmRFfcg==}
|
||||
'@smithy/middleware-endpoint@4.3.14':
|
||||
resolution: {integrity: sha512-v0q4uTKgBM8dsqGjqsabZQyH85nFaTnFcgpWU1uydKFsdyyMzfvOkNum9G7VK+dOP01vUnoZxIeRiJ6uD0kjIg==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/middleware-retry@4.4.12':
|
||||
resolution: {integrity: sha512-S4kWNKFowYd0lID7/DBqWHOQxmxlsf0jBaos9chQZUWTVOjSW1Ogyh8/ib5tM+agFDJ/TCxuCTvrnlc+9cIBcQ==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/middleware-retry@4.4.13':
|
||||
resolution: {integrity: sha512-RzIDF9OrSviXX7MQeKOm8r/372KTyY8Jmp6HNKOOYlrguHADuM3ED/f4aCyNhZZFLG55lv5beBin7nL0Nzy1Dw==}
|
||||
'@smithy/middleware-retry@4.4.14':
|
||||
resolution: {integrity: sha512-Z2DG8Ej7FyWG1UA+7HceINtSLzswUgs2np3sZX0YBBxCt+CXG4QUxv88ZDS3+2/1ldW7LqtSY1UO/6VQ1pND8Q==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/middleware-serde@4.2.6':
|
||||
@@ -1617,12 +1622,12 @@ packages:
|
||||
resolution: {integrity: sha512-xSUfMu1FT7ccfSXkoLl/QRQBi2rOvi3tiBZU2Tdy3I6cgvZ6SEi9QNey+lqps/sJRnogIS+lq+B1gxxbra2a/w==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/smithy-client@4.9.8':
|
||||
resolution: {integrity: sha512-8xgq3LgKDEFoIrLWBho/oYKyWByw9/corz7vuh1upv7ZBm0ZMjGYBhbn6v643WoIqA9UTcx5A5htEp/YatUwMA==}
|
||||
'@smithy/smithy-client@4.9.10':
|
||||
resolution: {integrity: sha512-Jaoz4Jw1QYHc1EFww/E6gVtNjhoDU+gwRKqXP6C3LKYqqH2UQhP8tMP3+t/ePrhaze7fhLE8vS2q6vVxBANFTQ==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/smithy-client@4.9.9':
|
||||
resolution: {integrity: sha512-SUnZJMMo5yCmgjopJbiNeo1vlr8KvdnEfIHV9rlD77QuOGdRotIVBcOrBuMr+sI9zrnhtDtLP054bZVbpZpiQA==}
|
||||
'@smithy/smithy-client@4.9.8':
|
||||
resolution: {integrity: sha512-8xgq3LgKDEFoIrLWBho/oYKyWByw9/corz7vuh1upv7ZBm0ZMjGYBhbn6v643WoIqA9UTcx5A5htEp/YatUwMA==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/types@4.9.0':
|
||||
@@ -1661,16 +1666,16 @@ packages:
|
||||
resolution: {integrity: sha512-yHv+r6wSQXEXTPVCIQTNmXVWs7ekBTpMVErjqZoWkYN75HIFN5y9+/+sYOejfAuvxWGvgzgxbTHa/oz61YTbKw==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/util-defaults-mode-browser@4.3.12':
|
||||
resolution: {integrity: sha512-TKc6FnOxFULKxLgTNHYjcFqdOYzXVPFFVm5JhI30F3RdhT7nYOtOsjgaOwfDRmA/3U66O9KaBQ3UHoXwayRhAg==}
|
||||
'@smithy/util-defaults-mode-browser@4.3.13':
|
||||
resolution: {integrity: sha512-hlVLdAGrVfyNei+pKIgqDTxfu/ZI2NSyqj4IDxKd5bIsIqwR/dSlkxlPaYxFiIaDVrBy0he8orsFy+Cz119XvA==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/util-defaults-mode-node@4.2.14':
|
||||
resolution: {integrity: sha512-ljZN3iRvaJUgulfvobIuG97q1iUuCMrvXAlkZ4msY+ZuVHQHDIqn7FKZCEj+bx8omz6kF5yQXms/xhzjIO5XiA==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/util-defaults-mode-node@4.2.15':
|
||||
resolution: {integrity: sha512-94NqfQVo+vGc5gsQ9SROZqOvBkGNMQu6pjXbnn8aQvBUhc31kx49gxlkBEqgmaZQHUUfdRUin5gK/HlHKmbAwg==}
|
||||
'@smithy/util-defaults-mode-node@4.2.16':
|
||||
resolution: {integrity: sha512-F1t22IUiJLHrxW9W1CQ6B9PN+skZ9cqSuzB18Eh06HrJPbjsyZ7ZHecAKw80DQtyGTRcVfeukKaCRYebFwclbg==}
|
||||
engines: {node: '>=18.0.0'}
|
||||
|
||||
'@smithy/util-endpoints@3.2.5':
|
||||
@@ -2747,6 +2752,9 @@ packages:
|
||||
js-base64@3.7.7:
|
||||
resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
|
||||
|
||||
js-base64@3.7.8:
|
||||
resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
|
||||
|
||||
js-tokens@4.0.0:
|
||||
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
|
||||
|
||||
@@ -3601,6 +3609,10 @@ packages:
|
||||
resolution: {integrity: sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
strip-indent@4.1.1:
|
||||
resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
strip-json-comments@2.0.1:
|
||||
resolution: {integrity: sha1-PFMZQukIwml8DsNEhYwobHygpgo=}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -3774,6 +3786,10 @@ packages:
|
||||
url@0.11.3:
|
||||
resolution: {integrity: sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==}
|
||||
|
||||
url@0.11.4:
|
||||
resolution: {integrity: sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
util-deprecate@1.0.2:
|
||||
resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
|
||||
|
||||
@@ -3895,23 +3911,23 @@ snapshots:
|
||||
|
||||
'@api.global/typedrequest-interfaces@3.0.19': {}
|
||||
|
||||
'@api.global/typedrequest@3.1.10':
|
||||
'@api.global/typedrequest@3.1.11':
|
||||
dependencies:
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartbuffer': 3.0.4
|
||||
'@push.rocks/smartbuffer': 3.0.5
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartguard': 3.1.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/webrequest': 3.0.37
|
||||
'@push.rocks/webstream': 1.0.10
|
||||
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.1.0)':
|
||||
'@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.1.2)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.1.0)
|
||||
'@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.1.2)
|
||||
'@cloudflare/workers-types': 4.20251202.0
|
||||
'@design.estate/dees-comms': 1.0.27
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -3949,22 +3965,24 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- '@push.rocks/smartserve'
|
||||
- bufferutil
|
||||
- react
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.1.0)':
|
||||
'@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.1.2)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@push.rocks/isohash': 2.0.1
|
||||
'@push.rocks/smartjson': 5.2.0
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartsocket': 2.1.0(@push.rocks/smartserve@1.1.0)
|
||||
'@push.rocks/smartsocket': 2.1.0
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
optionalDependencies:
|
||||
'@push.rocks/smartserve': 1.1.0
|
||||
'@push.rocks/smartserve': 1.1.2
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- bufferutil
|
||||
@@ -3973,6 +3991,19 @@ snapshots:
|
||||
- utf-8-validate
|
||||
- vue
|
||||
|
||||
'@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.1.2)':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@push.rocks/isohash': 2.0.1
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
'@push.rocks/smartjson': 5.2.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartrx': 3.0.10
|
||||
'@push.rocks/smartserve': 1.1.2
|
||||
'@push.rocks/smartstring': 4.1.0
|
||||
'@push.rocks/smarturl': 3.1.0
|
||||
|
||||
'@aws-crypto/crc32@5.2.0':
|
||||
dependencies:
|
||||
'@aws-crypto/util': 5.2.0
|
||||
@@ -4036,26 +4067,26 @@ snapshots:
|
||||
'@aws-sdk/util-user-agent-browser': 3.775.0
|
||||
'@aws-sdk/util-user-agent-node': 3.787.0
|
||||
'@smithy/config-resolver': 4.4.3
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/fetch-http-handler': 5.3.6
|
||||
'@smithy/hash-node': 4.2.5
|
||||
'@smithy/invalid-dependency': 4.2.5
|
||||
'@smithy/middleware-content-length': 4.2.5
|
||||
'@smithy/middleware-endpoint': 4.3.13
|
||||
'@smithy/middleware-retry': 4.4.13
|
||||
'@smithy/middleware-endpoint': 4.3.14
|
||||
'@smithy/middleware-retry': 4.4.14
|
||||
'@smithy/middleware-serde': 4.2.6
|
||||
'@smithy/middleware-stack': 4.2.5
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/node-http-handler': 4.4.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/url-parser': 4.2.5
|
||||
'@smithy/util-base64': 4.3.0
|
||||
'@smithy/util-body-length-browser': 4.2.0
|
||||
'@smithy/util-body-length-node': 4.2.1
|
||||
'@smithy/util-defaults-mode-browser': 4.3.12
|
||||
'@smithy/util-defaults-mode-node': 4.2.15
|
||||
'@smithy/util-defaults-mode-browser': 4.3.13
|
||||
'@smithy/util-defaults-mode-node': 4.2.16
|
||||
'@smithy/util-endpoints': 3.2.5
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
'@smithy/util-retry': 4.2.5
|
||||
@@ -4200,26 +4231,26 @@ snapshots:
|
||||
'@aws-sdk/util-user-agent-browser': 3.775.0
|
||||
'@aws-sdk/util-user-agent-node': 3.787.0
|
||||
'@smithy/config-resolver': 4.4.3
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/fetch-http-handler': 5.3.6
|
||||
'@smithy/hash-node': 4.2.5
|
||||
'@smithy/invalid-dependency': 4.2.5
|
||||
'@smithy/middleware-content-length': 4.2.5
|
||||
'@smithy/middleware-endpoint': 4.3.13
|
||||
'@smithy/middleware-retry': 4.4.13
|
||||
'@smithy/middleware-endpoint': 4.3.14
|
||||
'@smithy/middleware-retry': 4.4.14
|
||||
'@smithy/middleware-serde': 4.2.6
|
||||
'@smithy/middleware-stack': 4.2.5
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/node-http-handler': 4.4.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/url-parser': 4.2.5
|
||||
'@smithy/util-base64': 4.3.0
|
||||
'@smithy/util-body-length-browser': 4.2.0
|
||||
'@smithy/util-body-length-node': 4.2.1
|
||||
'@smithy/util-defaults-mode-browser': 4.3.12
|
||||
'@smithy/util-defaults-mode-node': 4.2.15
|
||||
'@smithy/util-defaults-mode-browser': 4.3.13
|
||||
'@smithy/util-defaults-mode-node': 4.2.16
|
||||
'@smithy/util-endpoints': 3.2.5
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
'@smithy/util-retry': 4.2.5
|
||||
@@ -4318,12 +4349,12 @@ snapshots:
|
||||
'@aws-sdk/core@3.775.0':
|
||||
dependencies:
|
||||
'@aws-sdk/types': 3.775.0
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/property-provider': 4.2.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/signature-v4': 5.3.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
fast-xml-parser: 4.4.1
|
||||
@@ -4406,7 +4437,7 @@ snapshots:
|
||||
'@smithy/node-http-handler': 4.4.5
|
||||
'@smithy/property-provider': 4.2.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/util-stream': 4.5.6
|
||||
tslib: 2.8.1
|
||||
@@ -4678,7 +4709,7 @@ snapshots:
|
||||
'@aws-sdk/nested-clients': 3.787.0
|
||||
'@aws-sdk/types': 3.775.0
|
||||
'@smithy/config-resolver': 4.4.3
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/credential-provider-imds': 4.2.5
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/property-provider': 4.2.5
|
||||
@@ -4882,7 +4913,7 @@ snapshots:
|
||||
'@aws-sdk/core': 3.775.0
|
||||
'@aws-sdk/types': 3.775.0
|
||||
'@aws-sdk/util-endpoints': 3.787.0
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/types': 4.9.0
|
||||
tslib: 2.8.1
|
||||
@@ -4923,26 +4954,26 @@ snapshots:
|
||||
'@aws-sdk/util-user-agent-browser': 3.775.0
|
||||
'@aws-sdk/util-user-agent-node': 3.787.0
|
||||
'@smithy/config-resolver': 4.4.3
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/fetch-http-handler': 5.3.6
|
||||
'@smithy/hash-node': 4.2.5
|
||||
'@smithy/invalid-dependency': 4.2.5
|
||||
'@smithy/middleware-content-length': 4.2.5
|
||||
'@smithy/middleware-endpoint': 4.3.13
|
||||
'@smithy/middleware-retry': 4.4.13
|
||||
'@smithy/middleware-endpoint': 4.3.14
|
||||
'@smithy/middleware-retry': 4.4.14
|
||||
'@smithy/middleware-serde': 4.2.6
|
||||
'@smithy/middleware-stack': 4.2.5
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/node-http-handler': 4.4.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/url-parser': 4.2.5
|
||||
'@smithy/util-base64': 4.3.0
|
||||
'@smithy/util-body-length-browser': 4.2.0
|
||||
'@smithy/util-body-length-node': 4.2.1
|
||||
'@smithy/util-defaults-mode-browser': 4.3.12
|
||||
'@smithy/util-defaults-mode-node': 4.2.15
|
||||
'@smithy/util-defaults-mode-browser': 4.3.13
|
||||
'@smithy/util-defaults-mode-node': 4.2.16
|
||||
'@smithy/util-endpoints': 3.2.5
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
'@smithy/util-retry': 4.2.5
|
||||
@@ -5243,14 +5274,14 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-comms@1.0.27':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
broadcast-channel: 7.0.0
|
||||
|
||||
'@design.estate/dees-domtools@2.0.65':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@design.estate/dees-comms': 1.0.27
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -5272,7 +5303,7 @@ snapshots:
|
||||
|
||||
'@design.estate/dees-domtools@2.3.6':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@design.estate/dees-comms': 1.0.27
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartdelay': 3.0.5
|
||||
@@ -5509,7 +5540,7 @@ snapshots:
|
||||
- supports-color
|
||||
- vue
|
||||
|
||||
'@git.zone/tsbundle@2.6.2':
|
||||
'@git.zone/tsbundle@2.6.3':
|
||||
dependencies:
|
||||
'@push.rocks/early': 4.0.4
|
||||
'@push.rocks/smartcli': 4.0.19
|
||||
@@ -5520,7 +5551,7 @@ snapshots:
|
||||
'@push.rocks/smartpath': 6.0.0
|
||||
'@push.rocks/smartpromise': 4.2.3
|
||||
'@push.rocks/smartspawn': 3.0.3
|
||||
'@rspack/core': 1.6.5
|
||||
'@rspack/core': 1.6.6
|
||||
'@types/html-minifier': 4.0.6
|
||||
esbuild: 0.27.0
|
||||
html-minifier: 4.0.0
|
||||
@@ -5556,10 +5587,10 @@ snapshots:
|
||||
'@push.rocks/smartshell': 3.3.0
|
||||
tsx: 4.20.6
|
||||
|
||||
'@git.zone/tstest@3.1.3(@aws-sdk/credential-providers@3.787.0)(@push.rocks/smartserve@1.1.0)(socks@2.8.7)(typescript@5.9.3)':
|
||||
'@git.zone/tstest@3.1.3(@aws-sdk/credential-providers@3.787.0)(@push.rocks/smartserve@1.1.2)(socks@2.8.7)(typescript@5.9.3)':
|
||||
dependencies:
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.1.0)
|
||||
'@git.zone/tsbundle': 2.6.2
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.1.2)
|
||||
'@git.zone/tsbundle': 2.6.3
|
||||
'@git.zone/tsrun': 2.0.0
|
||||
'@push.rocks/consolecolor': 2.0.3
|
||||
'@push.rocks/qenv': 6.1.3
|
||||
@@ -5634,30 +5665,30 @@ snapshots:
|
||||
|
||||
'@mixmark-io/domino@2.2.0': {}
|
||||
|
||||
'@module-federation/error-codes@0.21.4': {}
|
||||
'@module-federation/error-codes@0.21.6': {}
|
||||
|
||||
'@module-federation/runtime-core@0.21.4':
|
||||
'@module-federation/runtime-core@0.21.6':
|
||||
dependencies:
|
||||
'@module-federation/error-codes': 0.21.4
|
||||
'@module-federation/sdk': 0.21.4
|
||||
'@module-federation/error-codes': 0.21.6
|
||||
'@module-federation/sdk': 0.21.6
|
||||
|
||||
'@module-federation/runtime-tools@0.21.4':
|
||||
'@module-federation/runtime-tools@0.21.6':
|
||||
dependencies:
|
||||
'@module-federation/runtime': 0.21.4
|
||||
'@module-federation/webpack-bundler-runtime': 0.21.4
|
||||
'@module-federation/runtime': 0.21.6
|
||||
'@module-federation/webpack-bundler-runtime': 0.21.6
|
||||
|
||||
'@module-federation/runtime@0.21.4':
|
||||
'@module-federation/runtime@0.21.6':
|
||||
dependencies:
|
||||
'@module-federation/error-codes': 0.21.4
|
||||
'@module-federation/runtime-core': 0.21.4
|
||||
'@module-federation/sdk': 0.21.4
|
||||
'@module-federation/error-codes': 0.21.6
|
||||
'@module-federation/runtime-core': 0.21.6
|
||||
'@module-federation/sdk': 0.21.6
|
||||
|
||||
'@module-federation/sdk@0.21.4': {}
|
||||
'@module-federation/sdk@0.21.6': {}
|
||||
|
||||
'@module-federation/webpack-bundler-runtime@0.21.4':
|
||||
'@module-federation/webpack-bundler-runtime@0.21.6':
|
||||
dependencies:
|
||||
'@module-federation/runtime': 0.21.4
|
||||
'@module-federation/sdk': 0.21.4
|
||||
'@module-federation/runtime': 0.21.6
|
||||
'@module-federation/sdk': 0.21.6
|
||||
|
||||
'@mongodb-js/saslprep@1.3.2':
|
||||
dependencies:
|
||||
@@ -5670,6 +5701,13 @@ snapshots:
|
||||
'@tybys/wasm-util': 0.10.1
|
||||
optional: true
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.0':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.7.1
|
||||
'@emnapi/runtime': 1.7.1
|
||||
'@tybys/wasm-util': 0.10.1
|
||||
optional: true
|
||||
|
||||
'@oxc-project/types@0.99.0': {}
|
||||
|
||||
'@pdf-lib/standard-fonts@1.0.0':
|
||||
@@ -5866,7 +5904,7 @@ snapshots:
|
||||
|
||||
'@push.rocks/qenv@6.1.3':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@configvault.io/interfaces': 1.0.17
|
||||
'@push.rocks/smartfile': 11.2.7
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
@@ -5937,10 +5975,6 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- aws-crt
|
||||
|
||||
'@push.rocks/smartbuffer@3.0.4':
|
||||
dependencies:
|
||||
uint8array-extras: 1.4.0
|
||||
|
||||
'@push.rocks/smartbuffer@3.0.5':
|
||||
dependencies:
|
||||
uint8array-extras: 1.5.0
|
||||
@@ -6355,13 +6389,17 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- aws-crt
|
||||
|
||||
'@push.rocks/smartserve@1.1.0':
|
||||
'@push.rocks/smartserve@1.1.2':
|
||||
dependencies:
|
||||
'@api.global/typedrequest': 3.1.10
|
||||
'@api.global/typedrequest': 3.1.11
|
||||
'@push.rocks/lik': 6.2.2
|
||||
'@push.rocks/smartenv': 6.0.0
|
||||
'@push.rocks/smartlog': 3.1.10
|
||||
'@push.rocks/smartpath': 6.0.0
|
||||
ws: 8.18.3
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- utf-8-validate
|
||||
|
||||
'@push.rocks/smartshell@3.3.0':
|
||||
dependencies:
|
||||
@@ -6381,10 +6419,10 @@ snapshots:
|
||||
'@push.rocks/webrequest': 4.0.1
|
||||
'@tsclass/tsclass': 9.3.0
|
||||
|
||||
'@push.rocks/smartsocket@2.1.0(@push.rocks/smartserve@1.1.0)':
|
||||
'@push.rocks/smartsocket@2.1.0':
|
||||
dependencies:
|
||||
'@api.global/typedrequest-interfaces': 3.0.19
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.1.0)
|
||||
'@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.1.2)
|
||||
'@push.rocks/isohash': 2.0.1
|
||||
'@push.rocks/isounique': 1.0.5
|
||||
'@push.rocks/lik': 6.2.2
|
||||
@@ -6400,7 +6438,6 @@ snapshots:
|
||||
socket.io-client: 4.8.1
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
- '@push.rocks/smartserve'
|
||||
- bufferutil
|
||||
- react
|
||||
- supports-color
|
||||
@@ -6590,11 +6627,11 @@ snapshots:
|
||||
'@types/randomatic': 3.1.5
|
||||
buffer: 6.0.3
|
||||
crypto-random-string: 5.0.0
|
||||
js-base64: 3.7.7
|
||||
js-base64: 3.7.8
|
||||
normalize-newline: 4.1.0
|
||||
randomatic: 3.1.1
|
||||
strip-indent: 4.0.0
|
||||
url: 0.11.3
|
||||
strip-indent: 4.1.1
|
||||
url: 0.11.4
|
||||
|
||||
'@rolldown/binding-android-arm64@1.0.0-beta.52':
|
||||
optional: true
|
||||
@@ -6628,7 +6665,7 @@ snapshots:
|
||||
|
||||
'@rolldown/binding-wasm32-wasi@1.0.0-beta.52':
|
||||
dependencies:
|
||||
'@napi-rs/wasm-runtime': 1.0.7
|
||||
'@napi-rs/wasm-runtime': 1.1.0
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.52':
|
||||
@@ -6642,55 +6679,55 @@ snapshots:
|
||||
|
||||
'@rolldown/pluginutils@1.0.0-beta.52': {}
|
||||
|
||||
'@rspack/binding-darwin-arm64@1.6.5':
|
||||
'@rspack/binding-darwin-arm64@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-darwin-x64@1.6.5':
|
||||
'@rspack/binding-darwin-x64@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-linux-arm64-gnu@1.6.5':
|
||||
'@rspack/binding-linux-arm64-gnu@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-linux-arm64-musl@1.6.5':
|
||||
'@rspack/binding-linux-arm64-musl@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-linux-x64-gnu@1.6.5':
|
||||
'@rspack/binding-linux-x64-gnu@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-linux-x64-musl@1.6.5':
|
||||
'@rspack/binding-linux-x64-musl@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-wasm32-wasi@1.6.5':
|
||||
'@rspack/binding-wasm32-wasi@1.6.6':
|
||||
dependencies:
|
||||
'@napi-rs/wasm-runtime': 1.0.7
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-win32-arm64-msvc@1.6.5':
|
||||
'@rspack/binding-win32-arm64-msvc@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-win32-ia32-msvc@1.6.5':
|
||||
'@rspack/binding-win32-ia32-msvc@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding-win32-x64-msvc@1.6.5':
|
||||
'@rspack/binding-win32-x64-msvc@1.6.6':
|
||||
optional: true
|
||||
|
||||
'@rspack/binding@1.6.5':
|
||||
'@rspack/binding@1.6.6':
|
||||
optionalDependencies:
|
||||
'@rspack/binding-darwin-arm64': 1.6.5
|
||||
'@rspack/binding-darwin-x64': 1.6.5
|
||||
'@rspack/binding-linux-arm64-gnu': 1.6.5
|
||||
'@rspack/binding-linux-arm64-musl': 1.6.5
|
||||
'@rspack/binding-linux-x64-gnu': 1.6.5
|
||||
'@rspack/binding-linux-x64-musl': 1.6.5
|
||||
'@rspack/binding-wasm32-wasi': 1.6.5
|
||||
'@rspack/binding-win32-arm64-msvc': 1.6.5
|
||||
'@rspack/binding-win32-ia32-msvc': 1.6.5
|
||||
'@rspack/binding-win32-x64-msvc': 1.6.5
|
||||
'@rspack/binding-darwin-arm64': 1.6.6
|
||||
'@rspack/binding-darwin-x64': 1.6.6
|
||||
'@rspack/binding-linux-arm64-gnu': 1.6.6
|
||||
'@rspack/binding-linux-arm64-musl': 1.6.6
|
||||
'@rspack/binding-linux-x64-gnu': 1.6.6
|
||||
'@rspack/binding-linux-x64-musl': 1.6.6
|
||||
'@rspack/binding-wasm32-wasi': 1.6.6
|
||||
'@rspack/binding-win32-arm64-msvc': 1.6.6
|
||||
'@rspack/binding-win32-ia32-msvc': 1.6.6
|
||||
'@rspack/binding-win32-x64-msvc': 1.6.6
|
||||
|
||||
'@rspack/core@1.6.5':
|
||||
'@rspack/core@1.6.6':
|
||||
dependencies:
|
||||
'@module-federation/runtime-tools': 0.21.4
|
||||
'@rspack/binding': 1.6.5
|
||||
'@module-federation/runtime-tools': 0.21.6
|
||||
'@rspack/binding': 1.6.6
|
||||
'@rspack/lite-tapable': 1.1.0
|
||||
|
||||
'@rspack/lite-tapable@1.1.0': {}
|
||||
@@ -6735,7 +6772,7 @@ snapshots:
|
||||
'@smithy/uuid': 1.1.0
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/core@3.18.6':
|
||||
'@smithy/core@3.18.7':
|
||||
dependencies:
|
||||
'@smithy/middleware-serde': 4.2.6
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
@@ -6851,9 +6888,9 @@ snapshots:
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/middleware-endpoint@4.3.13':
|
||||
'@smithy/middleware-endpoint@4.3.14':
|
||||
dependencies:
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/middleware-serde': 4.2.6
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/shared-ini-file-loader': 4.4.0
|
||||
@@ -6875,12 +6912,12 @@ snapshots:
|
||||
'@smithy/uuid': 1.1.0
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/middleware-retry@4.4.13':
|
||||
'@smithy/middleware-retry@4.4.14':
|
||||
dependencies:
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/service-error-classification': 4.2.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/util-middleware': 4.2.5
|
||||
'@smithy/util-retry': 4.2.5
|
||||
@@ -6955,6 +6992,17 @@ snapshots:
|
||||
'@smithy/util-utf8': 4.2.0
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/smithy-client@4.9.10':
|
||||
dependencies:
|
||||
'@smithy/core': 3.18.7
|
||||
'@smithy/middleware-endpoint': 4.3.14
|
||||
'@smithy/middleware-stack': 4.2.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/util-stream': 4.5.6
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@smithy/smithy-client@4.9.8':
|
||||
dependencies:
|
||||
'@smithy/core': 3.18.5
|
||||
@@ -6965,17 +7013,6 @@ snapshots:
|
||||
'@smithy/util-stream': 4.5.6
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/smithy-client@4.9.9':
|
||||
dependencies:
|
||||
'@smithy/core': 3.18.6
|
||||
'@smithy/middleware-endpoint': 4.3.13
|
||||
'@smithy/middleware-stack': 4.2.5
|
||||
'@smithy/protocol-http': 5.3.5
|
||||
'@smithy/types': 4.9.0
|
||||
'@smithy/util-stream': 4.5.6
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@smithy/types@4.9.0':
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
@@ -7021,10 +7058,10 @@ snapshots:
|
||||
'@smithy/types': 4.9.0
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/util-defaults-mode-browser@4.3.12':
|
||||
'@smithy/util-defaults-mode-browser@4.3.13':
|
||||
dependencies:
|
||||
'@smithy/property-provider': 4.2.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
@@ -7039,13 +7076,13 @@ snapshots:
|
||||
'@smithy/types': 4.9.0
|
||||
tslib: 2.8.1
|
||||
|
||||
'@smithy/util-defaults-mode-node@4.2.15':
|
||||
'@smithy/util-defaults-mode-node@4.2.16':
|
||||
dependencies:
|
||||
'@smithy/config-resolver': 4.4.3
|
||||
'@smithy/credential-provider-imds': 4.2.5
|
||||
'@smithy/node-config-provider': 4.3.5
|
||||
'@smithy/property-provider': 4.2.5
|
||||
'@smithy/smithy-client': 4.9.9
|
||||
'@smithy/smithy-client': 4.9.10
|
||||
'@smithy/types': 4.9.0
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
@@ -8281,6 +8318,8 @@ snapshots:
|
||||
|
||||
js-base64@3.7.7: {}
|
||||
|
||||
js-base64@3.7.8: {}
|
||||
|
||||
js-tokens@4.0.0: {}
|
||||
|
||||
js-yaml@3.14.1:
|
||||
@@ -9416,6 +9455,8 @@ snapshots:
|
||||
dependencies:
|
||||
min-indent: 1.0.1
|
||||
|
||||
strip-indent@4.1.1: {}
|
||||
|
||||
strip-json-comments@2.0.1: {}
|
||||
|
||||
strnum@1.1.2: {}
|
||||
@@ -9599,6 +9640,11 @@ snapshots:
|
||||
punycode: 1.4.1
|
||||
qs: 6.14.0
|
||||
|
||||
url@0.11.4:
|
||||
dependencies:
|
||||
punycode: 1.4.1
|
||||
qs: 6.14.0
|
||||
|
||||
util-deprecate@1.0.2: {}
|
||||
|
||||
uuid@9.0.1: {}
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@api.global/typedserver',
|
||||
version: '5.0.0',
|
||||
version: '7.5.0',
|
||||
description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
|
||||
}
|
||||
|
||||
@@ -271,7 +271,11 @@ export class TypedServer {
|
||||
// Setup file watching
|
||||
if (this.options.watch && this.options.serveDir) {
|
||||
try {
|
||||
this.smartwatchInstance = new plugins.smartwatch.Smartwatch([this.options.serveDir]);
|
||||
// Use glob pattern to match all files recursively in serveDir
|
||||
const watchGlob = this.options.serveDir.endsWith('/')
|
||||
? `${this.options.serveDir}**/*`
|
||||
: `${this.options.serveDir}/**/*`;
|
||||
this.smartwatchInstance = new plugins.smartwatch.Smartwatch([watchGlob]);
|
||||
await this.smartwatchInstance.start();
|
||||
(await this.smartwatchInstance.getObservableFor('change')).subscribe(async () => {
|
||||
await this.createServeDirHash();
|
||||
@@ -302,6 +306,35 @@ export class TypedServer {
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Speedtest handler for service worker dashboard
|
||||
// Client calls this in a loop for the test duration to get accurate time-based measurements
|
||||
this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
|
||||
new plugins.typedrequest.TypedHandler('serviceworker_speedtest', async (reqArg) => {
|
||||
const chunkSizeKB = reqArg.chunkSizeKB || 64;
|
||||
const sizeBytes = chunkSizeKB * 1024;
|
||||
let payload: string | undefined;
|
||||
let bytesTransferred = 0;
|
||||
|
||||
switch (reqArg.type) {
|
||||
case 'download_chunk':
|
||||
// Generate chunk data for download test
|
||||
payload = 'x'.repeat(sizeBytes);
|
||||
bytesTransferred = sizeBytes;
|
||||
break;
|
||||
case 'upload_chunk':
|
||||
// Acknowledge received upload data
|
||||
bytesTransferred = reqArg.payload?.length || 0;
|
||||
break;
|
||||
case 'latency':
|
||||
// Simple ping - minimal data
|
||||
bytesTransferred = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
return { bytesTransferred, timestamp: Date.now(), payload };
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize TypedSocket:', error);
|
||||
}
|
||||
@@ -496,6 +529,30 @@ export class TypedServer {
|
||||
return;
|
||||
}
|
||||
|
||||
// Push cache invalidation to service workers first
|
||||
try {
|
||||
const swConnections = await this.typedsocket.findAllTargetConnectionsByTag('serviceworker');
|
||||
for (const connection of swConnections) {
|
||||
const pushCacheInvalidate =
|
||||
this.typedsocket.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
|
||||
'serviceworker_cacheInvalidate',
|
||||
connection
|
||||
);
|
||||
pushCacheInvalidate.fire({
|
||||
reason: 'File change detected',
|
||||
timestamp: this.lastReload,
|
||||
}).catch(err => {
|
||||
console.warn('Failed to push cache invalidation to service worker:', err);
|
||||
});
|
||||
}
|
||||
if (swConnections.length > 0) {
|
||||
console.log(`Pushed cache invalidation to ${swConnections.length} service worker(s)`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to notify service workers:', error);
|
||||
}
|
||||
|
||||
// Notify frontend clients
|
||||
try {
|
||||
const connections = await this.typedsocket.findAllTargetConnectionsByTag(
|
||||
'typedserver_frontend'
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as paths from '../paths.js';
|
||||
|
||||
/**
|
||||
* Built-in routes controller for TypedServer
|
||||
@@ -122,4 +123,25 @@ export class BuiltInRoutesController {
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/sw-dash/bundle.js')
|
||||
async getSwDashBundle(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
try {
|
||||
const bundleContent = (await plugins.fsInstance
|
||||
.file(paths.swdashBundlePath)
|
||||
.encoding('utf8')
|
||||
.read()) as string;
|
||||
|
||||
return new Response(bundleContent, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/javascript',
|
||||
'Cache-Control': 'no-cache',
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to serve sw-dash bundle:', error);
|
||||
return new Response('SW-Dash bundle not found', { status: 404 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,4 +8,7 @@ export const packageDir = plugins.path.join(
|
||||
export const injectBundleDir = plugins.path.join(packageDir, './dist_ts_web_inject');
|
||||
export const injectBundlePath = plugins.path.join(injectBundleDir, './bundle.js');
|
||||
|
||||
export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
|
||||
export const serviceworkerBundleDir = plugins.path.join(packageDir, './dist_ts_web_serviceworker');
|
||||
|
||||
export const swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
|
||||
export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');
|
||||
@@ -53,10 +53,17 @@ export class Server {
|
||||
this.addRoute('/typedrequest', new HandlerTypedRouter(typedrouter));
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated This method is deprecated. Use TypedServer with SmartServe integration instead.
|
||||
* TypedSocket v4 no longer supports attaching to an existing Express server.
|
||||
*/
|
||||
public addTypedSocket(typedrouter: plugins.typedrequest.TypedRouter): void {
|
||||
this.executeAfterStartFunctions.push(async () => {
|
||||
plugins.typedsocket.TypedSocket.createServer(typedrouter, this);
|
||||
});
|
||||
console.warn(
|
||||
'[DEPRECATED] servertools.Server.addTypedSocket() is deprecated and has no effect. ' +
|
||||
'Use TypedServer with SmartServe integration for WebSocket support.'
|
||||
);
|
||||
// TypedSocket v4 creates its own server, which would conflict with Express.
|
||||
// This method is now a no-op for backward compatibility.
|
||||
}
|
||||
|
||||
public addRoute(routeStringArg: string, handlerArg?: Handler) {
|
||||
|
||||
@@ -33,8 +33,8 @@ export const addServiceWorkerRoute = (
|
||||
// Set the version info
|
||||
swVersionInfo = swDataFunc();
|
||||
|
||||
// Service worker bundle handler
|
||||
typedserverInstance.addRoute('/serviceworker/*splat', 'GET', async (request: Request) => {
|
||||
// Handler function for serviceworker bundle requests
|
||||
const handleServiceWorkerRequest = async (request: Request): Promise<Response> => {
|
||||
await loadServiceWorkerBundle();
|
||||
const url = new URL(request.url);
|
||||
const path = url.pathname;
|
||||
@@ -58,7 +58,14 @@ export const addServiceWorkerRoute = (
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
};
|
||||
|
||||
// Service worker bundle handler - nested path
|
||||
typedserverInstance.addRoute('/serviceworker/*splat', 'GET', handleServiceWorkerRequest);
|
||||
|
||||
// Service worker bundle handler - root level (for /serviceworker.bundle.js)
|
||||
typedserverInstance.addRoute('/serviceworker.bundle.js', 'GET', handleServiceWorkerRequest);
|
||||
typedserverInstance.addRoute('/serviceworker.bundle.js.map', 'GET', handleServiceWorkerRequest);
|
||||
|
||||
// Typed request handler for service worker
|
||||
typedserverInstance.addRoute('/sw-typedrequest', 'POST', async (request: Request) => {
|
||||
@@ -77,6 +84,41 @@ export const addServiceWorkerRoute = (
|
||||
)
|
||||
);
|
||||
|
||||
// Speedtest handler for measuring connection speed (time-based chunked approach)
|
||||
typedrouter.addTypedHandler(
|
||||
new plugins.typedrequest.TypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Speedtest>(
|
||||
'serviceworker_speedtest',
|
||||
async (reqArg) => {
|
||||
const chunkSizeKB = reqArg.chunkSizeKB || 64;
|
||||
const sizeBytes = chunkSizeKB * 1024;
|
||||
let payload: string | undefined;
|
||||
let bytesTransferred = 0;
|
||||
|
||||
switch (reqArg.type) {
|
||||
case 'download_chunk':
|
||||
// Generate chunk payload for download test
|
||||
payload = 'x'.repeat(sizeBytes);
|
||||
bytesTransferred = sizeBytes;
|
||||
break;
|
||||
case 'upload_chunk':
|
||||
// For upload, measure bytes received from client
|
||||
bytesTransferred = reqArg.payload?.length || 0;
|
||||
break;
|
||||
case 'latency':
|
||||
// Simple ping - no payload needed
|
||||
bytesTransferred = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
bytesTransferred,
|
||||
timestamp: Date.now(),
|
||||
payload, // Only for download_chunk tests
|
||||
};
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
const response = await typedrouter.routeAndAddResponse(body);
|
||||
return new Response(plugins.smartjson.stringify(response), {
|
||||
status: 200,
|
||||
|
||||
@@ -124,4 +124,389 @@ export interface IRequest_Client_Serviceworker_ConnectionPolling
|
||||
response: {
|
||||
serviceworkerId: string;
|
||||
}
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Metrics interfaces
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Request to get service worker metrics
|
||||
*/
|
||||
export interface IRequest_Serviceworker_Metrics
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_Metrics
|
||||
> {
|
||||
method: 'serviceworker_metrics';
|
||||
request: {};
|
||||
response: {
|
||||
cache: {
|
||||
hits: number;
|
||||
misses: number;
|
||||
errors: number;
|
||||
bytesServedFromCache: number;
|
||||
bytesFetched: number;
|
||||
averageResponseTime: number;
|
||||
};
|
||||
network: {
|
||||
totalRequests: number;
|
||||
successfulRequests: number;
|
||||
failedRequests: number;
|
||||
timeouts: number;
|
||||
averageLatency: number;
|
||||
totalBytesTransferred: number;
|
||||
};
|
||||
update: {
|
||||
totalChecks: number;
|
||||
successfulChecks: number;
|
||||
failedChecks: number;
|
||||
updatesFound: number;
|
||||
updatesApplied: number;
|
||||
lastCheckTimestamp: number;
|
||||
lastUpdateTimestamp: number;
|
||||
};
|
||||
connection: {
|
||||
connectedClients: number;
|
||||
totalConnectionAttempts: number;
|
||||
successfulConnections: number;
|
||||
failedConnections: number;
|
||||
};
|
||||
startTime: number;
|
||||
uptime: number;
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Connection result interface
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Result of a service worker connection attempt
|
||||
*/
|
||||
export interface IConnectionResult {
|
||||
connected: boolean;
|
||||
error?: string;
|
||||
attempts?: number;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Speedtest interfaces
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Cache invalidation request from server to service worker
|
||||
*/
|
||||
export interface IRequest_Serviceworker_CacheInvalidate
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_CacheInvalidate
|
||||
> {
|
||||
method: 'serviceworker_cacheInvalidate';
|
||||
request: {
|
||||
reason: string;
|
||||
timestamp: number;
|
||||
};
|
||||
response: {
|
||||
success: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Speedtest request between service worker and backend
|
||||
*
|
||||
* Types:
|
||||
* - 'latency': Simple ping to measure round-trip time
|
||||
* - 'download_chunk': Request a chunk of data (64KB default)
|
||||
* - 'upload_chunk': Send a chunk of data to server
|
||||
*
|
||||
* The client runs a loop calling download_chunk or upload_chunk
|
||||
* until the desired test duration (e.g., 5 seconds) elapses.
|
||||
*/
|
||||
export interface IRequest_Serviceworker_Speedtest
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_Speedtest
|
||||
> {
|
||||
method: 'serviceworker_speedtest';
|
||||
request: {
|
||||
type: 'latency' | 'download_chunk' | 'upload_chunk';
|
||||
chunkSizeKB?: number; // Size of chunk in KB (default: 64)
|
||||
payload?: string; // For upload_chunk, the data to send
|
||||
};
|
||||
response: {
|
||||
bytesTransferred: number;
|
||||
timestamp: number;
|
||||
payload?: string; // For download_chunk, the data received
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Status update interfaces
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Status update source types
|
||||
*/
|
||||
export type TStatusSource = 'backend' | 'serviceworker' | 'network';
|
||||
|
||||
/**
|
||||
* Status update event types
|
||||
*/
|
||||
export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
|
||||
|
||||
/**
|
||||
* Status update details
|
||||
*/
|
||||
export interface IStatusDetails {
|
||||
version?: string;
|
||||
cacheHitRate?: number;
|
||||
resourceCount?: number;
|
||||
connectionType?: string;
|
||||
latencyMs?: number;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Status update payload sent from SW to clients
|
||||
*/
|
||||
export interface IStatusUpdate {
|
||||
source: TStatusSource;
|
||||
type: TStatusType;
|
||||
message: string;
|
||||
details?: IStatusDetails;
|
||||
persist?: boolean; // Stay visible until resolved
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Message for status updates from service worker to clients
|
||||
*/
|
||||
export interface IMessage_Serviceworker_StatusUpdate
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_StatusUpdate
|
||||
> {
|
||||
method: 'serviceworker_statusUpdate';
|
||||
request: IStatusUpdate;
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to get current service worker status
|
||||
*/
|
||||
export interface IRequest_Serviceworker_GetStatus
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_GetStatus
|
||||
> {
|
||||
method: 'serviceworker_getStatus';
|
||||
request: {};
|
||||
response: {
|
||||
isActive: boolean;
|
||||
isOnline: boolean;
|
||||
version?: string;
|
||||
cacheHitRate: number;
|
||||
resourceCount: number;
|
||||
connectionType?: string;
|
||||
connectedClients: number;
|
||||
lastUpdateCheck: number;
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Persistent Store interfaces
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Event types for the persistent event log
|
||||
*/
|
||||
export type TEventType =
|
||||
| 'sw_installed'
|
||||
| 'sw_activated'
|
||||
| 'sw_updated'
|
||||
| 'sw_stopped'
|
||||
| 'speedtest_started'
|
||||
| 'speedtest_completed'
|
||||
| 'speedtest_failed'
|
||||
| 'backend_connected'
|
||||
| 'backend_disconnected'
|
||||
| 'cache_invalidated'
|
||||
| 'network_online'
|
||||
| 'network_offline'
|
||||
| 'update_check'
|
||||
| 'error';
|
||||
|
||||
/**
|
||||
* Event log entry structure
|
||||
* Survives both SW restarts AND cache invalidation
|
||||
*/
|
||||
export interface IEventLogEntry {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
type: TEventType;
|
||||
message: string;
|
||||
details?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cumulative metrics that persist across SW restarts
|
||||
* Reset on cache invalidation
|
||||
*/
|
||||
export interface ICumulativeMetrics {
|
||||
firstSeenTimestamp: number;
|
||||
totalCacheHits: number;
|
||||
totalCacheMisses: number;
|
||||
totalCacheErrors: number;
|
||||
totalBytesServedFromCache: number;
|
||||
totalBytesFetched: number;
|
||||
totalNetworkRequests: number;
|
||||
totalNetworkSuccesses: number;
|
||||
totalNetworkFailures: number;
|
||||
totalNetworkTimeouts: number;
|
||||
totalBytesTransferred: number;
|
||||
totalUpdateChecks: number;
|
||||
totalUpdatesApplied: number;
|
||||
totalSpeedtests: number;
|
||||
swRestartCount: number;
|
||||
lastUpdatedTimestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to get event log from service worker
|
||||
*/
|
||||
export interface IRequest_Serviceworker_GetEventLog
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_GetEventLog
|
||||
> {
|
||||
method: 'serviceworker_getEventLog';
|
||||
request: {
|
||||
limit?: number;
|
||||
type?: TEventType;
|
||||
since?: number;
|
||||
};
|
||||
response: {
|
||||
events: IEventLogEntry[];
|
||||
totalCount: number;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to get cumulative metrics from service worker
|
||||
*/
|
||||
export interface IRequest_Serviceworker_GetCumulativeMetrics
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_GetCumulativeMetrics
|
||||
> {
|
||||
method: 'serviceworker_getCumulativeMetrics';
|
||||
request: {};
|
||||
response: ICumulativeMetrics;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to clear event log
|
||||
*/
|
||||
export interface IRequest_Serviceworker_ClearEventLog
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_ClearEventLog
|
||||
> {
|
||||
method: 'serviceworker_clearEventLog';
|
||||
request: {};
|
||||
response: {
|
||||
success: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Request to get event count since a timestamp
|
||||
*/
|
||||
export interface IRequest_Serviceworker_GetEventCount
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_GetEventCount
|
||||
> {
|
||||
method: 'serviceworker_getEventCount';
|
||||
request: {
|
||||
since: number;
|
||||
};
|
||||
response: {
|
||||
count: number;
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Push message interfaces (SW → Clients via DeesComms)
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Push notification when a new event is logged
|
||||
* Sent via DeesComms BroadcastChannel
|
||||
*/
|
||||
export interface IMessage_Serviceworker_EventLogged
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_EventLogged
|
||||
> {
|
||||
method: 'serviceworker_eventLogged';
|
||||
request: IEventLogEntry;
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Metrics snapshot for push updates
|
||||
*/
|
||||
export interface IMetricsSnapshot {
|
||||
cache: {
|
||||
hits: number;
|
||||
misses: number;
|
||||
errors: number;
|
||||
bytesServedFromCache: number;
|
||||
bytesFetched: number;
|
||||
};
|
||||
network: {
|
||||
totalRequests: number;
|
||||
successfulRequests: number;
|
||||
failedRequests: number;
|
||||
};
|
||||
cacheHitRate: number;
|
||||
networkSuccessRate: number;
|
||||
resourceCount: number;
|
||||
uptime: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Push notification for metrics updates
|
||||
* Sent via DeesComms BroadcastChannel (throttled)
|
||||
*/
|
||||
export interface IMessage_Serviceworker_MetricsUpdate
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_MetricsUpdate
|
||||
> {
|
||||
method: 'serviceworker_metricsUpdate';
|
||||
request: IMetricsSnapshot;
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Push notification when a new resource is cached
|
||||
*/
|
||||
export interface IMessage_Serviceworker_ResourceCached
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_ResourceCached
|
||||
> {
|
||||
method: 'serviceworker_resourceCached';
|
||||
request: {
|
||||
url: string;
|
||||
contentType: string;
|
||||
size: number;
|
||||
cached: boolean;
|
||||
};
|
||||
response: {};
|
||||
}
|
||||
13
ts_swdash/index.ts
Normal file
13
ts_swdash/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// SW-Dash: Service Worker Dashboard
|
||||
// Entry point for the Lit-based dashboard application
|
||||
|
||||
// Import the main app component (which imports all others)
|
||||
import './sw-dash-app.js';
|
||||
|
||||
// Export components for external use if needed
|
||||
export { SwDashApp } from './sw-dash-app.js';
|
||||
export { SwDashOverview } from './sw-dash-overview.js';
|
||||
export { SwDashTable } from './sw-dash-table.js';
|
||||
export { SwDashUrls } from './sw-dash-urls.js';
|
||||
export { SwDashDomains } from './sw-dash-domains.js';
|
||||
export { SwDashTypes } from './sw-dash-types.js';
|
||||
19
ts_swdash/plugins.ts
Normal file
19
ts_swdash/plugins.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
// Lit imports
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import type { CSSResult, TemplateResult } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
// DeesComms for push communication
|
||||
import * as deesComms from '@design.estate/dees-comms';
|
||||
|
||||
export {
|
||||
LitElement,
|
||||
html,
|
||||
css,
|
||||
customElement,
|
||||
property,
|
||||
state,
|
||||
deesComms,
|
||||
};
|
||||
|
||||
export type { CSSResult, TemplateResult };
|
||||
433
ts_swdash/sw-dash-app.ts
Normal file
433
ts_swdash/sw-dash-app.ts
Normal file
@@ -0,0 +1,433 @@
|
||||
import { LitElement, html, css, state, customElement, deesComms } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, terminalStyles, navStyles } from './sw-dash-styles.js';
|
||||
import type { IMetricsData } from './sw-dash-overview.js';
|
||||
import type { ICachedResource } from './sw-dash-urls.js';
|
||||
import type { IDomainStats } from './sw-dash-domains.js';
|
||||
import type { IContentTypeStats } from './sw-dash-types.js';
|
||||
import type { serviceworker } from '../dist_ts_interfaces/index.js';
|
||||
|
||||
// Import components to register them
|
||||
import './sw-dash-overview.js';
|
||||
import './sw-dash-urls.js';
|
||||
import './sw-dash-domains.js';
|
||||
import './sw-dash-types.js';
|
||||
import './sw-dash-events.js';
|
||||
import './sw-dash-table.js';
|
||||
|
||||
type ViewType = 'overview' | 'urls' | 'domains' | 'types' | 'events';
|
||||
|
||||
interface IResourceData {
|
||||
resources: ICachedResource[];
|
||||
domains: IDomainStats[];
|
||||
contentTypes: IContentTypeStats[];
|
||||
resourceCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main SW Dashboard application shell
|
||||
*/
|
||||
@customElement('sw-dash-app')
|
||||
export class SwDashApp extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
terminalStyles,
|
||||
navStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: var(--bg-primary);
|
||||
min-height: 100vh;
|
||||
padding: var(--space-5);
|
||||
}
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.uptime-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.uptime-badge .value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.auto-refresh {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auto-refresh .dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@state() accessor currentView: ViewType = 'overview';
|
||||
@state() accessor metrics: IMetricsData | null = null;
|
||||
@state() accessor resourceData: IResourceData = {
|
||||
resources: [],
|
||||
domains: [],
|
||||
contentTypes: [],
|
||||
resourceCount: 0
|
||||
};
|
||||
@state() accessor lastRefresh = new Date().toLocaleTimeString();
|
||||
@state() accessor isConnected = false;
|
||||
|
||||
// DeesComms for receiving push updates from service worker
|
||||
private comms: deesComms.DeesComms | null = null;
|
||||
|
||||
// Heartbeat interval (30 seconds) for SW health check
|
||||
private heartbeatInterval: ReturnType<typeof setInterval> | null = null;
|
||||
private readonly HEARTBEAT_INTERVAL_MS = 30000;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
// Initial HTTP seed request to wake up SW and get initial data
|
||||
this.loadInitialData();
|
||||
// Setup push listeners via DeesComms
|
||||
this.setupPushListeners();
|
||||
// Start heartbeat for SW health check
|
||||
this.startHeartbeat();
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
if (this.heartbeatInterval) {
|
||||
clearInterval(this.heartbeatInterval);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initial HTTP request to seed data and wake up service worker
|
||||
*/
|
||||
private async loadInitialData(): Promise<void> {
|
||||
try {
|
||||
// Fetch metrics (wakes up SW)
|
||||
const metricsResponse = await fetch('/sw-dash/metrics');
|
||||
this.metrics = await metricsResponse.json();
|
||||
this.lastRefresh = new Date().toLocaleTimeString();
|
||||
this.isConnected = true;
|
||||
|
||||
// Also load resources
|
||||
const resourcesResponse = await fetch('/sw-dash/resources');
|
||||
this.resourceData = await resourcesResponse.json();
|
||||
} catch (err) {
|
||||
console.error('Failed to load initial data:', err);
|
||||
this.isConnected = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup DeesComms handlers for receiving push updates
|
||||
*/
|
||||
private setupPushListeners(): void {
|
||||
this.comms = new deesComms.DeesComms();
|
||||
|
||||
// Handle metrics push updates
|
||||
this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_MetricsUpdate>(
|
||||
'serviceworker_metricsUpdate',
|
||||
async (snapshot) => {
|
||||
// Update metrics from push
|
||||
if (this.metrics) {
|
||||
this.metrics = {
|
||||
...this.metrics,
|
||||
cache: {
|
||||
...this.metrics.cache,
|
||||
hits: snapshot.cache.hits,
|
||||
misses: snapshot.cache.misses,
|
||||
errors: snapshot.cache.errors,
|
||||
bytesServedFromCache: snapshot.cache.bytesServedFromCache,
|
||||
bytesFetched: snapshot.cache.bytesFetched,
|
||||
},
|
||||
network: {
|
||||
...this.metrics.network,
|
||||
totalRequests: snapshot.network.totalRequests,
|
||||
successfulRequests: snapshot.network.successfulRequests,
|
||||
failedRequests: snapshot.network.failedRequests,
|
||||
},
|
||||
cacheHitRate: snapshot.cacheHitRate,
|
||||
networkSuccessRate: snapshot.networkSuccessRate,
|
||||
resourceCount: snapshot.resourceCount,
|
||||
uptime: snapshot.uptime,
|
||||
};
|
||||
} else {
|
||||
// If no metrics yet, create minimal structure
|
||||
this.metrics = {
|
||||
cache: {
|
||||
hits: snapshot.cache.hits,
|
||||
misses: snapshot.cache.misses,
|
||||
errors: snapshot.cache.errors,
|
||||
bytesServedFromCache: snapshot.cache.bytesServedFromCache,
|
||||
bytesFetched: snapshot.cache.bytesFetched,
|
||||
averageResponseTime: 0,
|
||||
},
|
||||
network: {
|
||||
totalRequests: snapshot.network.totalRequests,
|
||||
successfulRequests: snapshot.network.successfulRequests,
|
||||
failedRequests: snapshot.network.failedRequests,
|
||||
timeouts: 0,
|
||||
averageLatency: 0,
|
||||
totalBytesTransferred: 0,
|
||||
},
|
||||
update: {
|
||||
totalChecks: 0,
|
||||
successfulChecks: 0,
|
||||
failedChecks: 0,
|
||||
updatesFound: 0,
|
||||
updatesApplied: 0,
|
||||
lastCheckTimestamp: 0,
|
||||
lastUpdateTimestamp: 0,
|
||||
},
|
||||
connection: {
|
||||
connectedClients: 0,
|
||||
totalConnectionAttempts: 0,
|
||||
successfulConnections: 0,
|
||||
failedConnections: 0,
|
||||
},
|
||||
speedtest: {
|
||||
lastDownloadSpeedMbps: 0,
|
||||
lastUploadSpeedMbps: 0,
|
||||
lastLatencyMs: 0,
|
||||
lastTestTimestamp: 0,
|
||||
testCount: 0,
|
||||
isOnline: true,
|
||||
},
|
||||
startTime: Date.now() - snapshot.uptime,
|
||||
uptime: snapshot.uptime,
|
||||
cacheHitRate: snapshot.cacheHitRate,
|
||||
networkSuccessRate: snapshot.networkSuccessRate,
|
||||
resourceCount: snapshot.resourceCount,
|
||||
};
|
||||
}
|
||||
this.lastRefresh = new Date().toLocaleTimeString();
|
||||
this.isConnected = true;
|
||||
return {};
|
||||
}
|
||||
);
|
||||
|
||||
// Handle event log push updates - dispatch to events component
|
||||
this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_EventLogged>(
|
||||
'serviceworker_eventLogged',
|
||||
async (entry) => {
|
||||
// Dispatch custom event for sw-dash-events component
|
||||
this.dispatchEvent(new CustomEvent('event-logged', {
|
||||
detail: entry,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
return {};
|
||||
}
|
||||
);
|
||||
|
||||
// Handle resource cached push updates
|
||||
this.comms.createTypedHandler<serviceworker.IMessage_Serviceworker_ResourceCached>(
|
||||
'serviceworker_resourceCached',
|
||||
async (resource) => {
|
||||
// Update resource count optimistically
|
||||
if (resource.cached && this.metrics) {
|
||||
this.metrics = {
|
||||
...this.metrics,
|
||||
resourceCount: this.metrics.resourceCount + 1,
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Heartbeat to check SW health periodically
|
||||
*/
|
||||
private startHeartbeat(): void {
|
||||
this.heartbeatInterval = setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/metrics');
|
||||
if (response.ok) {
|
||||
this.isConnected = true;
|
||||
// Optionally refresh full metrics periodically
|
||||
this.metrics = await response.json();
|
||||
this.lastRefresh = new Date().toLocaleTimeString();
|
||||
} else {
|
||||
this.isConnected = false;
|
||||
}
|
||||
} catch {
|
||||
this.isConnected = false;
|
||||
}
|
||||
}, this.HEARTBEAT_INTERVAL_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load resource data on demand (when switching to urls/domains/types view)
|
||||
*/
|
||||
private async loadResourceData(): Promise<void> {
|
||||
try {
|
||||
const response = await fetch('/sw-dash/resources');
|
||||
this.resourceData = await response.json();
|
||||
} catch (err) {
|
||||
console.error('Failed to load resources:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private setView(view: ViewType): void {
|
||||
this.currentView = view;
|
||||
if (view !== 'overview') {
|
||||
this.loadResourceData();
|
||||
}
|
||||
}
|
||||
|
||||
private handleSpeedtestComplete(_e: CustomEvent): void {
|
||||
// Refresh metrics after speedtest via HTTP
|
||||
this.loadInitialData();
|
||||
}
|
||||
|
||||
private formatUptime(ms: number): string {
|
||||
const s = Math.floor(ms / 1000);
|
||||
const m = Math.floor(s / 60);
|
||||
const h = Math.floor(m / 60);
|
||||
const d = Math.floor(h / 24);
|
||||
if (d > 0) return `${d}d ${h % 24}h`;
|
||||
if (h > 0) return `${h}h ${m % 60}m`;
|
||||
if (m > 0) return `${m}m ${s % 60}s`;
|
||||
return `${s}s`;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="terminal">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">SW</div>
|
||||
<span class="title">Service Worker Dashboard</span>
|
||||
</div>
|
||||
<div class="uptime-badge">
|
||||
Uptime: <span class="value">${this.metrics ? this.formatUptime(this.metrics.uptime) : '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'overview' ? 'active' : ''}"
|
||||
@click="${() => this.setView('overview')}"
|
||||
>Overview</button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'urls' ? 'active' : ''}"
|
||||
@click="${() => this.setView('urls')}"
|
||||
>URLs <span class="count">${this.resourceData.resourceCount}</span></button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'domains' ? 'active' : ''}"
|
||||
@click="${() => this.setView('domains')}"
|
||||
>Domains</button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'types' ? 'active' : ''}"
|
||||
@click="${() => this.setView('types')}"
|
||||
>Types</button>
|
||||
<button
|
||||
class="nav-tab ${this.currentView === 'events' ? 'active' : ''}"
|
||||
@click="${() => this.setView('events')}"
|
||||
>Events</button>
|
||||
</nav>
|
||||
|
||||
<div class="content">
|
||||
<div class="view ${this.currentView === 'overview' ? 'active' : ''}">
|
||||
<sw-dash-overview
|
||||
.metrics="${this.metrics}"
|
||||
@speedtest-complete="${this.handleSpeedtestComplete}"
|
||||
></sw-dash-overview>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'urls' ? 'active' : ''}">
|
||||
<sw-dash-urls .resources="${this.resourceData.resources}"></sw-dash-urls>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'domains' ? 'active' : ''}">
|
||||
<sw-dash-domains .domains="${this.resourceData.domains}"></sw-dash-domains>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'types' ? 'active' : ''}">
|
||||
<sw-dash-types .contentTypes="${this.resourceData.contentTypes}"></sw-dash-types>
|
||||
</div>
|
||||
|
||||
<div class="view ${this.currentView === 'events' ? 'active' : ''}">
|
||||
<sw-dash-events></sw-dash-events>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-left">
|
||||
Last updated: ${this.lastRefresh}
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<div class="auto-refresh">
|
||||
<span class="dot"></span>
|
||||
Live
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
52
ts_swdash/sw-dash-domains.ts
Normal file
52
ts_swdash/sw-dash-domains.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface IDomainStats {
|
||||
domain: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Domains table view component
|
||||
*/
|
||||
@customElement('sw-dash-domains')
|
||||
export class SwDashDomains extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor domains: IDomainStats[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'domain', label: 'Domain' },
|
||||
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.domains}"
|
||||
filterPlaceholder="Filter domains..."
|
||||
infoLabel="domains"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
386
ts_swdash/sw-dash-events.ts
Normal file
386
ts_swdash/sw-dash-events.ts
Normal file
@@ -0,0 +1,386 @@
|
||||
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, panelStyles, tableStyles, buttonStyles } from './sw-dash-styles.js';
|
||||
|
||||
export interface IEventLogEntry {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
type: string;
|
||||
message: string;
|
||||
details?: Record<string, any>;
|
||||
}
|
||||
|
||||
type TEventFilter = 'all' | 'sw_installed' | 'sw_activated' | 'sw_updated' | 'sw_stopped'
|
||||
| 'speedtest_started' | 'speedtest_completed' | 'speedtest_failed'
|
||||
| 'backend_connected' | 'backend_disconnected'
|
||||
| 'cache_invalidated' | 'network_online' | 'network_offline'
|
||||
| 'update_check' | 'error';
|
||||
|
||||
/**
|
||||
* Events panel component for sw-dash
|
||||
*/
|
||||
@customElement('sw-dash-events')
|
||||
export class SwDashEvents extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
panelStyles,
|
||||
tableStyles,
|
||||
buttonStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.events-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.events-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.event-type {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.event-type.sw { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
|
||||
.event-type.speedtest { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
|
||||
.event-type.network { background: rgba(34, 197, 94, 0.15); color: var(--accent-success); }
|
||||
.event-type.cache { background: rgba(251, 191, 36, 0.15); color: var(--accent-warning); }
|
||||
.event-type.error { background: rgba(239, 68, 68, 0.15); color: var(--accent-error); }
|
||||
|
||||
.event-time {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.event-message {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.event-details {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--space-6);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--accent-error);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.clear-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: var(--accent-error);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor events: IEventLogEntry[] = [];
|
||||
@state() accessor filter: TEventFilter = 'all';
|
||||
@state() accessor searchText = '';
|
||||
@state() accessor totalCount = 0;
|
||||
@state() accessor isLoading = true;
|
||||
@state() accessor page = 1;
|
||||
private readonly pageSize = 50;
|
||||
|
||||
// Bound event handler reference for cleanup
|
||||
private boundEventHandler: ((e: Event) => void) | null = null;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.loadEvents();
|
||||
// Listen for pushed events from parent
|
||||
this.setupPushEventListener();
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
// Clean up event listener
|
||||
if (this.boundEventHandler) {
|
||||
window.removeEventListener('event-logged', this.boundEventHandler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up listener for pushed events from service worker (via sw-dash-app)
|
||||
*/
|
||||
private setupPushEventListener(): void {
|
||||
this.boundEventHandler = (e: Event) => {
|
||||
const customEvent = e as CustomEvent<IEventLogEntry>;
|
||||
const newEvent = customEvent.detail;
|
||||
|
||||
// Only add if it matches current filter (or filter is 'all')
|
||||
if (this.filter === 'all' || newEvent.type === this.filter) {
|
||||
// Prepend new event to the list
|
||||
this.events = [newEvent, ...this.events];
|
||||
this.totalCount++;
|
||||
}
|
||||
};
|
||||
|
||||
// Listen at window level since events bubble up with composed: true
|
||||
window.addEventListener('event-logged', this.boundEventHandler);
|
||||
}
|
||||
|
||||
private async loadEvents(): Promise<void> {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('limit', String(this.pageSize * this.page));
|
||||
if (this.filter !== 'all') {
|
||||
params.set('type', this.filter);
|
||||
}
|
||||
|
||||
const response = await fetch(`/sw-dash/events?${params}`);
|
||||
const data = await response.json();
|
||||
this.events = data.events;
|
||||
this.totalCount = data.totalCount;
|
||||
} catch (err) {
|
||||
console.error('Failed to load events:', err);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleFilterChange(e: Event): void {
|
||||
this.filter = (e.target as HTMLSelectElement).value as TEventFilter;
|
||||
this.page = 1;
|
||||
this.loadEvents();
|
||||
}
|
||||
|
||||
private handleSearch(e: Event): void {
|
||||
this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
|
||||
}
|
||||
|
||||
private async handleClear(): Promise<void> {
|
||||
if (!confirm('Are you sure you want to clear the event log? This cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await fetch('/sw-dash/events', { method: 'DELETE' });
|
||||
this.loadEvents();
|
||||
} catch (err) {
|
||||
console.error('Failed to clear events:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private loadMore(): void {
|
||||
this.page++;
|
||||
this.loadEvents();
|
||||
}
|
||||
|
||||
private getTypeClass(type: string): string {
|
||||
if (type.startsWith('sw_')) return 'sw';
|
||||
if (type.startsWith('speedtest_')) return 'speedtest';
|
||||
if (type.startsWith('network_') || type.startsWith('backend_')) return 'network';
|
||||
if (type.startsWith('cache_') || type === 'update_check') return 'cache';
|
||||
if (type === 'error') return 'error';
|
||||
return 'sw';
|
||||
}
|
||||
|
||||
private formatTimestamp(ts: number): string {
|
||||
const date = new Date(ts);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
private formatTypeLabel(type: string): string {
|
||||
return type.replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
private getFilteredEvents(): IEventLogEntry[] {
|
||||
if (!this.searchText) return this.events;
|
||||
return this.events.filter(e =>
|
||||
e.message.toLowerCase().includes(this.searchText) ||
|
||||
e.type.toLowerCase().includes(this.searchText) ||
|
||||
(e.details && JSON.stringify(e.details).toLowerCase().includes(this.searchText))
|
||||
);
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const filteredEvents = this.getFilteredEvents();
|
||||
|
||||
return html`
|
||||
<div class="stats-bar">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">${this.totalCount}</span>
|
||||
<span class="stat-label">Total Events</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">${filteredEvents.length}</span>
|
||||
<span class="stat-label">Showing</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="events-header">
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Filter:</span>
|
||||
<select class="filter-select" @change="${this.handleFilterChange}">
|
||||
<option value="all">All Events</option>
|
||||
<option value="sw_installed">SW Installed</option>
|
||||
<option value="sw_activated">SW Activated</option>
|
||||
<option value="sw_updated">SW Updated</option>
|
||||
<option value="speedtest_started">Speedtest Started</option>
|
||||
<option value="speedtest_completed">Speedtest Completed</option>
|
||||
<option value="speedtest_failed">Speedtest Failed</option>
|
||||
<option value="network_online">Network Online</option>
|
||||
<option value="network_offline">Network Offline</option>
|
||||
<option value="cache_invalidated">Cache Invalidated</option>
|
||||
<option value="error">Errors</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Search events..."
|
||||
.value="${this.searchText}"
|
||||
@input="${this.handleSearch}"
|
||||
style="width: 200px;"
|
||||
>
|
||||
</div>
|
||||
<button class="btn clear-btn" @click="${this.handleClear}">Clear Log</button>
|
||||
</div>
|
||||
|
||||
${this.isLoading && this.events.length === 0 ? html`
|
||||
<div class="empty-state">Loading events...</div>
|
||||
` : filteredEvents.length === 0 ? html`
|
||||
<div class="empty-state">No events found</div>
|
||||
` : html`
|
||||
<div class="events-list">
|
||||
${filteredEvents.map(event => html`
|
||||
<div class="event-card">
|
||||
<div class="event-header">
|
||||
<span class="event-type ${this.getTypeClass(event.type)}">${this.formatTypeLabel(event.type)}</span>
|
||||
<span class="event-time">${this.formatTimestamp(event.timestamp)}</span>
|
||||
</div>
|
||||
<div class="event-message">${event.message}</div>
|
||||
${event.details ? html`
|
||||
<div class="event-details">${JSON.stringify(event.details, null, 2)}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
|
||||
${this.events.length < this.totalCount ? html`
|
||||
<div class="pagination">
|
||||
<button class="btn btn-secondary" @click="${this.loadMore}" ?disabled="${this.isLoading}">
|
||||
${this.isLoading ? 'Loading...' : 'Load More'}
|
||||
</button>
|
||||
<span class="page-info">${this.events.length} of ${this.totalCount} events</span>
|
||||
</div>
|
||||
` : ''}
|
||||
`}
|
||||
`;
|
||||
}
|
||||
}
|
||||
318
ts_swdash/sw-dash-overview.ts
Normal file
318
ts_swdash/sw-dash-overview.ts
Normal file
@@ -0,0 +1,318 @@
|
||||
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, panelStyles, gaugeStyles, buttonStyles, speedtestStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
|
||||
export interface IMetricsData {
|
||||
cache: {
|
||||
hits: number;
|
||||
misses: number;
|
||||
errors: number;
|
||||
bytesServedFromCache: number;
|
||||
bytesFetched: number;
|
||||
averageResponseTime: number;
|
||||
};
|
||||
network: {
|
||||
totalRequests: number;
|
||||
successfulRequests: number;
|
||||
failedRequests: number;
|
||||
timeouts: number;
|
||||
averageLatency: number;
|
||||
totalBytesTransferred: number;
|
||||
};
|
||||
update: {
|
||||
totalChecks: number;
|
||||
successfulChecks: number;
|
||||
failedChecks: number;
|
||||
updatesFound: number;
|
||||
updatesApplied: number;
|
||||
lastCheckTimestamp: number;
|
||||
lastUpdateTimestamp: number;
|
||||
};
|
||||
connection: {
|
||||
connectedClients: number;
|
||||
totalConnectionAttempts: number;
|
||||
successfulConnections: number;
|
||||
failedConnections: number;
|
||||
};
|
||||
speedtest: {
|
||||
lastDownloadSpeedMbps: number;
|
||||
lastUploadSpeedMbps: number;
|
||||
lastLatencyMs: number;
|
||||
lastTestTimestamp: number;
|
||||
testCount: number;
|
||||
isOnline: boolean;
|
||||
};
|
||||
startTime: number;
|
||||
uptime: number;
|
||||
cacheHitRate: number;
|
||||
networkSuccessRate: number;
|
||||
resourceCount: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overview panel component with metrics gauges and stats
|
||||
*/
|
||||
@customElement('sw-dash-overview')
|
||||
export class SwDashOverview extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
panelStyles,
|
||||
gaugeStyles,
|
||||
buttonStyles,
|
||||
speedtestStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin-top: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
border-top: 1px solid var(--border-muted);
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Object }) accessor metrics: IMetricsData | null = null;
|
||||
@state() accessor speedtestRunning = false;
|
||||
@state() accessor speedtestPhase: 'idle' | 'latency' | 'download' | 'upload' | 'complete' = 'idle';
|
||||
@state() accessor speedtestProgress = 0;
|
||||
@state() accessor speedtestElapsed = 0;
|
||||
@state() accessor eventCountLastHour = 0;
|
||||
|
||||
// Speedtest timing constants (must match service worker)
|
||||
private static readonly TEST_DURATION_MS = 5000; // 5 seconds per test
|
||||
private progressInterval: number | null = null;
|
||||
private eventCountInterval: number | null = null;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.fetchEventCount();
|
||||
// Refresh event count every 30 seconds
|
||||
this.eventCountInterval = window.setInterval(() => this.fetchEventCount(), 30000);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
if (this.eventCountInterval) {
|
||||
window.clearInterval(this.eventCountInterval);
|
||||
this.eventCountInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
private async fetchEventCount(): Promise<void> {
|
||||
try {
|
||||
const oneHourAgo = Date.now() - 3600000;
|
||||
const response = await fetch(`/sw-dash/events/count?since=${oneHourAgo}`);
|
||||
const data = await response.json();
|
||||
this.eventCountLastHour = data.count;
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch event count:', err);
|
||||
}
|
||||
}
|
||||
|
||||
private async runSpeedtest(): Promise<void> {
|
||||
if (this.speedtestRunning) return;
|
||||
this.speedtestRunning = true;
|
||||
this.speedtestPhase = 'latency';
|
||||
this.speedtestProgress = 0;
|
||||
this.speedtestElapsed = 0;
|
||||
|
||||
// Start progress animation (total ~10.5s: latency ~0.5s + 5s download + 5s upload)
|
||||
const totalEstimatedMs = 10500;
|
||||
const startTime = Date.now();
|
||||
|
||||
this.progressInterval = window.setInterval(() => {
|
||||
this.speedtestElapsed = Date.now() - startTime;
|
||||
this.speedtestProgress = Math.min(100, (this.speedtestElapsed / totalEstimatedMs) * 100);
|
||||
|
||||
// Estimate phase based on elapsed time
|
||||
if (this.speedtestElapsed < 500) {
|
||||
this.speedtestPhase = 'latency';
|
||||
} else if (this.speedtestElapsed < 5500) {
|
||||
this.speedtestPhase = 'download';
|
||||
} else {
|
||||
this.speedtestPhase = 'upload';
|
||||
}
|
||||
}, 100);
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-dash/speedtest');
|
||||
const result = await response.json();
|
||||
|
||||
this.speedtestPhase = 'complete';
|
||||
this.speedtestProgress = 100;
|
||||
|
||||
// Dispatch event to parent to update metrics
|
||||
this.dispatchEvent(new CustomEvent('speedtest-complete', {
|
||||
detail: result,
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Speedtest failed:', err);
|
||||
this.speedtestPhase = 'idle';
|
||||
} finally {
|
||||
if (this.progressInterval) {
|
||||
window.clearInterval(this.progressInterval);
|
||||
this.progressInterval = null;
|
||||
}
|
||||
// Keep showing complete state briefly, then reset
|
||||
setTimeout(() => {
|
||||
this.speedtestRunning = false;
|
||||
this.speedtestPhase = 'idle';
|
||||
this.speedtestProgress = 0;
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
private getPhaseLabel(): string {
|
||||
switch (this.speedtestPhase) {
|
||||
case 'latency': return 'Testing latency';
|
||||
case 'download': return 'Download test';
|
||||
case 'upload': return 'Upload test';
|
||||
case 'complete': return 'Complete';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
private formatElapsed(): string {
|
||||
const seconds = Math.floor(this.speedtestElapsed / 1000);
|
||||
return `${seconds}s`;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.metrics) {
|
||||
return html`<div class="panel"><div class="panel-content">Loading metrics...</div></div>`;
|
||||
}
|
||||
|
||||
const m = this.metrics;
|
||||
const gaugeClass = SwDashTable.getGaugeClass;
|
||||
|
||||
return html`
|
||||
<div class="grid">
|
||||
<!-- Cache Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Cache</div>
|
||||
<div class="panel-content">
|
||||
<div class="gauge">
|
||||
<div class="gauge-header">
|
||||
<span class="gauge-label">Hit Rate</span>
|
||||
<span class="gauge-value">${m.cacheHitRate}%</span>
|
||||
</div>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.cacheHitRate)}" style="width: ${m.cacheHitRate}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Hits</span><span class="value success">${SwDashTable.formatNumber(m.cache.hits)}</span></div>
|
||||
<div class="row"><span class="label">Misses</span><span class="value warning">${SwDashTable.formatNumber(m.cache.misses)}</span></div>
|
||||
<div class="row"><span class="label">Errors</span><span class="value ${m.cache.errors > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.cache.errors)}</span></div>
|
||||
<div class="row"><span class="label">From Cache</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesServedFromCache)}</span></div>
|
||||
<div class="row"><span class="label">Fetched</span><span class="value">${SwDashTable.formatBytes(m.cache.bytesFetched)}</span></div>
|
||||
<div class="row"><span class="label">Resources</span><span class="value">${m.resourceCount}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Network</div>
|
||||
<div class="panel-content">
|
||||
<div class="gauge">
|
||||
<div class="gauge-header">
|
||||
<span class="gauge-label">Success Rate</span>
|
||||
<span class="gauge-value">${m.networkSuccessRate}%</span>
|
||||
</div>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill ${gaugeClass(m.networkSuccessRate)}" style="width: ${m.networkSuccessRate}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"><span class="label">Total Requests</span><span class="value">${SwDashTable.formatNumber(m.network.totalRequests)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.network.successfulRequests)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.network.failedRequests > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.network.failedRequests)}</span></div>
|
||||
<div class="row"><span class="label">Timeouts</span><span class="value ${m.network.timeouts > 0 ? 'warning' : ''}">${SwDashTable.formatNumber(m.network.timeouts)}</span></div>
|
||||
<div class="row"><span class="label">Avg Latency</span><span class="value">${m.network.averageLatency}ms</span></div>
|
||||
<div class="row"><span class="label">Transferred</span><span class="value">${SwDashTable.formatBytes(m.network.totalBytesTransferred)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Updates Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Updates</div>
|
||||
<div class="panel-content">
|
||||
<div class="row"><span class="label">Total Checks</span><span class="value">${SwDashTable.formatNumber(m.update.totalChecks)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.update.successfulChecks)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.update.failedChecks > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.update.failedChecks)}</span></div>
|
||||
<div class="row"><span class="label">Updates Found</span><span class="value">${SwDashTable.formatNumber(m.update.updatesFound)}</span></div>
|
||||
<div class="row"><span class="label">Updates Applied</span><span class="value success">${SwDashTable.formatNumber(m.update.updatesApplied)}</span></div>
|
||||
<div class="row"><span class="label">Last Check</span><span class="value">${SwDashTable.formatTimestamp(m.update.lastCheckTimestamp)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connections Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Connections</div>
|
||||
<div class="panel-content">
|
||||
<div class="row"><span class="label">Active Clients</span><span class="value success">${SwDashTable.formatNumber(m.connection.connectedClients)}</span></div>
|
||||
<div class="row"><span class="label">Total Attempts</span><span class="value">${SwDashTable.formatNumber(m.connection.totalConnectionAttempts)}</span></div>
|
||||
<div class="row"><span class="label">Successful</span><span class="value success">${SwDashTable.formatNumber(m.connection.successfulConnections)}</span></div>
|
||||
<div class="row"><span class="label">Failed</span><span class="value ${m.connection.failedConnections > 0 ? 'error' : ''}">${SwDashTable.formatNumber(m.connection.failedConnections)}</span></div>
|
||||
<div class="section-divider">
|
||||
<div class="row"><span class="label">Events (1h)</span><span class="value">${this.eventCountLastHour}</span></div>
|
||||
<div class="row"><span class="label">Started</span><span class="value">${SwDashTable.formatTimestamp(m.startTime)}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Speedtest Panel -->
|
||||
<div class="panel">
|
||||
<div class="panel-title">Speedtest</div>
|
||||
<div class="panel-content">
|
||||
<div class="online-indicator ${m.speedtest.isOnline ? 'online' : 'offline'}">
|
||||
<span class="online-dot"></span>
|
||||
<span>${m.speedtest.isOnline ? 'Online' : 'Offline'}</span>
|
||||
</div>
|
||||
${this.speedtestRunning ? html`
|
||||
<div class="speedtest-progress">
|
||||
<div class="progress-header">
|
||||
<span class="progress-phase">${this.getPhaseLabel()}</span>
|
||||
<span class="progress-time">${this.formatElapsed()}</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill ${this.speedtestPhase === 'complete' ? 'complete' : ''}" style="width: ${this.speedtestProgress}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
` : html`
|
||||
<div class="speedtest-results">
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastDownloadSpeedMbps.toFixed(1)}</div>
|
||||
<div class="speedtest-unit">Mbps</div>
|
||||
<div class="speedtest-label">Download</div>
|
||||
</div>
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastUploadSpeedMbps.toFixed(1)}</div>
|
||||
<div class="speedtest-unit">Mbps</div>
|
||||
<div class="speedtest-label">Upload</div>
|
||||
</div>
|
||||
<div class="speedtest-metric">
|
||||
<div class="speedtest-value">${m.speedtest.lastLatencyMs.toFixed(0)}</div>
|
||||
<div class="speedtest-unit">ms</div>
|
||||
<div class="speedtest-label">Latency</div>
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
<div class="btn-row">
|
||||
<button class="btn btn-secondary" ?disabled="${this.speedtestRunning}" @click="${this.runSpeedtest}">
|
||||
${this.speedtestRunning ? 'Testing...' : 'Run Test'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
667
ts_swdash/sw-dash-styles.ts
Normal file
667
ts_swdash/sw-dash-styles.ts
Normal file
@@ -0,0 +1,667 @@
|
||||
import { css } from './plugins.js';
|
||||
import type { CSSResult } from './plugins.js';
|
||||
|
||||
/**
|
||||
* Modern professional theme for sw-dash components
|
||||
* Inspired by Bloomberg terminals, Vercel dashboards, and shadcn/ui
|
||||
*/
|
||||
export const sharedStyles: CSSResult = css`
|
||||
:host {
|
||||
/* Neutral backgrounds - zinc scale */
|
||||
--bg-primary: #09090b;
|
||||
--bg-secondary: #18181b;
|
||||
--bg-tertiary: #27272a;
|
||||
--bg-elevated: #3f3f46;
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-tertiary: #71717a;
|
||||
|
||||
/* Borders */
|
||||
--border-default: #27272a;
|
||||
--border-muted: #3f3f46;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-primary: #3b82f6;
|
||||
--accent-success: #22c55e;
|
||||
--accent-warning: #eab308;
|
||||
--accent-error: #ef4444;
|
||||
--accent-info: #06b6d4;
|
||||
|
||||
/* Spacing scale */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`;
|
||||
|
||||
export const terminalStyles: CSSResult = css`
|
||||
.terminal {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid var(--border-default);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.uptime {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: var(--space-5);
|
||||
min-height: 400px;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid var(--border-default);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--bg-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refresh-info {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: var(--accent-error);
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: var(--text-secondary);
|
||||
font-size: 11px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const navStyles: CSSResult = css`
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.nav-tab:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.nav-tab .count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 18px;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 0 6px;
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-left: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.nav-tab.active .count {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
export const panelStyles: CSSResult = css`
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-2) 0;
|
||||
border-bottom: 1px solid var(--border-muted);
|
||||
}
|
||||
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.value.warning {
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.value.success {
|
||||
color: var(--accent-success);
|
||||
}
|
||||
`;
|
||||
|
||||
export const gaugeStyles: CSSResult = css`
|
||||
.gauge {
|
||||
margin: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.gauge-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-2);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gauge-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.gauge-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.gauge-bar {
|
||||
height: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gauge-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.gauge-fill.good {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.gauge-fill.warning {
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.gauge-fill.bad {
|
||||
background: var(--accent-error);
|
||||
}
|
||||
`;
|
||||
|
||||
export const tableStyles: CSSResult = css`
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.data-table th:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table th .sort-icon {
|
||||
margin-left: var(--space-1);
|
||||
opacity: 0.4;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.data-table th.sorted .sort-icon {
|
||||
opacity: 1;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.data-table td.url {
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-secondary);
|
||||
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table td.num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-4);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
width: 280px;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.table-info {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.hit-rate-bar {
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: var(--space-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hit-rate-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.hit-rate-fill.good {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
.hit-rate-fill.warning {
|
||||
background: var(--accent-warning);
|
||||
}
|
||||
|
||||
.hit-rate-fill.bad {
|
||||
background: var(--accent-error);
|
||||
}
|
||||
`;
|
||||
|
||||
export const buttonStyles: CSSResult = css`
|
||||
.btn {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--border-muted);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
`;
|
||||
|
||||
export const speedtestStyles: CSSResult = css`
|
||||
.online-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.online-indicator.online {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.online-indicator.offline {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.speedtest-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.speedtest-metric {
|
||||
text-align: center;
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.speedtest-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.speedtest-unit {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.speedtest-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.speed-bar {
|
||||
height: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 2px;
|
||||
margin: var(--space-1) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.speed-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-success);
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
/* Speedtest progress indicator */
|
||||
.speedtest-progress {
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.progress-phase {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--accent-info);
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.progress-phase::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.progress-time {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-info);
|
||||
border-radius: 3px;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.progress-fill.complete {
|
||||
background: var(--accent-success);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
`;
|
||||
|
||||
export const statusBadgeStyles: CSSResult = css`
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: 9999px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
color: var(--accent-success);
|
||||
}
|
||||
|
||||
.status-badge.warning {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
color: var(--accent-warning);
|
||||
}
|
||||
|
||||
.status-badge.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--accent-error);
|
||||
}
|
||||
|
||||
.status-badge.info {
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
color: var(--accent-info);
|
||||
}
|
||||
|
||||
.status-badge .badge-dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
`;
|
||||
173
ts_swdash/sw-dash-table.ts
Normal file
173
ts_swdash/sw-dash-table.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { LitElement, html, css, property, state, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
|
||||
export interface IColumnConfig {
|
||||
key: string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
formatter?: (value: any, row: any) => string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Base sortable table component for sw-dash
|
||||
*/
|
||||
@customElement('sw-dash-table')
|
||||
export class SwDashTable extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor columns: IColumnConfig[] = [];
|
||||
@property({ type: Array }) accessor data: any[] = [];
|
||||
@property({ type: String }) accessor filterPlaceholder = 'Filter...';
|
||||
@property({ type: String }) accessor infoLabel = 'items';
|
||||
|
||||
@state() accessor sortColumn = '';
|
||||
@state() accessor sortDirection: 'asc' | 'desc' = 'desc';
|
||||
@state() accessor filterText = '';
|
||||
|
||||
// Utility formatters
|
||||
static formatNumber(n: number): string {
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
static formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
static formatTimestamp(ts: number): string {
|
||||
if (!ts || ts === 0) return 'never';
|
||||
const ago = Date.now() - ts;
|
||||
if (ago < 60000) return Math.floor(ago / 1000) + 's ago';
|
||||
if (ago < 3600000) return Math.floor(ago / 60000) + 'm ago';
|
||||
if (ago < 86400000) return Math.floor(ago / 3600000) + 'h ago';
|
||||
return new Date(ts).toLocaleDateString();
|
||||
}
|
||||
|
||||
static getGaugeClass(rate: number): string {
|
||||
if (rate >= 80) return 'good';
|
||||
if (rate >= 50) return 'warning';
|
||||
return 'bad';
|
||||
}
|
||||
|
||||
private handleSort(column: string): void {
|
||||
if (this.sortColumn === column) {
|
||||
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
this.sortColumn = column;
|
||||
this.sortDirection = 'desc';
|
||||
}
|
||||
}
|
||||
|
||||
private handleFilter(e: Event): void {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
|
||||
private getSortedFilteredData(): any[] {
|
||||
let result = [...this.data];
|
||||
|
||||
// Filter
|
||||
if (this.filterText) {
|
||||
const search = this.filterText.toLowerCase();
|
||||
result = result.filter(row => {
|
||||
return this.columns.some(col => {
|
||||
const val = row[col.key];
|
||||
if (val == null) return false;
|
||||
return String(val).toLowerCase().includes(search);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Sort
|
||||
if (this.sortColumn) {
|
||||
result.sort((a, b) => {
|
||||
let valA = a[this.sortColumn];
|
||||
let valB = b[this.sortColumn];
|
||||
if (typeof valA === 'string') valA = valA.toLowerCase();
|
||||
if (typeof valB === 'string') valB = valB.toLowerCase();
|
||||
if (valA < valB) return this.sortDirection === 'asc' ? -1 : 1;
|
||||
if (valA > valB) return this.sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private renderHitRateBar(rate: number): TemplateResult {
|
||||
const cls = SwDashTable.getGaugeClass(rate);
|
||||
return html`
|
||||
<span class="hit-rate-bar">
|
||||
<span class="hit-rate-fill ${cls}" style="width: ${rate}%"></span>
|
||||
</span>${rate}%
|
||||
`;
|
||||
}
|
||||
|
||||
protected renderCellValue(value: any, row: any, column: IColumnConfig): any {
|
||||
if (column.formatter) {
|
||||
return column.formatter(value, row);
|
||||
}
|
||||
// Special handling for hitRate
|
||||
if (column.key === 'hitRate') {
|
||||
return this.renderHitRateBar(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const sortedData = this.getSortedFilteredData();
|
||||
|
||||
return html`
|
||||
<div class="table-controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="${this.filterPlaceholder}"
|
||||
.value="${this.filterText}"
|
||||
@input="${this.handleFilter}"
|
||||
>
|
||||
<span class="table-info">${sortedData.length} of ${this.data.length} ${this.infoLabel}</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
${this.columns.map(col => html`
|
||||
<th
|
||||
class="${this.sortColumn === col.key ? 'sorted' : ''}"
|
||||
@click="${() => col.sortable !== false && this.handleSort(col.key)}"
|
||||
>
|
||||
${col.label}
|
||||
${col.sortable !== false ? html`
|
||||
<span class="sort-icon">${this.sortColumn === col.key && this.sortDirection === 'asc' ? '↑' : '↓'}</span>
|
||||
` : ''}
|
||||
</th>
|
||||
`)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${sortedData.map(row => html`
|
||||
<tr>
|
||||
${this.columns.map(col => html`
|
||||
<td class="${col.className || ''}">${this.renderCellValue(row[col.key], row, col)}</td>
|
||||
`)}
|
||||
</tr>
|
||||
`)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
52
ts_swdash/sw-dash-types.ts
Normal file
52
ts_swdash/sw-dash-types.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface IContentTypeStats {
|
||||
contentType: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Content types table view component
|
||||
*/
|
||||
@customElement('sw-dash-types')
|
||||
export class SwDashTypes extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor contentTypes: IContentTypeStats[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'contentType', label: 'Content Type' },
|
||||
{ key: 'totalResources', label: 'Resources', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalSize', label: 'Total Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'totalHits', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'totalMisses', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.contentTypes}"
|
||||
filterPlaceholder="Filter types..."
|
||||
infoLabel="content types"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
66
ts_swdash/sw-dash-urls.ts
Normal file
66
ts_swdash/sw-dash-urls.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { LitElement, html, css, property, customElement } from './plugins.js';
|
||||
import type { CSSResult, TemplateResult } from './plugins.js';
|
||||
import { sharedStyles, tableStyles } from './sw-dash-styles.js';
|
||||
import { SwDashTable } from './sw-dash-table.js';
|
||||
import type { IColumnConfig } from './sw-dash-table.js';
|
||||
|
||||
export interface ICachedResource {
|
||||
url: string;
|
||||
domain: string;
|
||||
contentType: string;
|
||||
size: number;
|
||||
hitCount: number;
|
||||
missCount: number;
|
||||
lastAccessed: number;
|
||||
cachedAt: number;
|
||||
hitRate?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* URLs table view component
|
||||
*/
|
||||
@customElement('sw-dash-urls')
|
||||
export class SwDashUrls extends LitElement {
|
||||
public static styles: CSSResult[] = [
|
||||
sharedStyles,
|
||||
tableStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
`
|
||||
];
|
||||
|
||||
@property({ type: Array }) accessor resources: ICachedResource[] = [];
|
||||
|
||||
private columns: IColumnConfig[] = [
|
||||
{ key: 'url', label: 'URL', className: 'url' },
|
||||
{ key: 'contentType', label: 'Type' },
|
||||
{ key: 'size', label: 'Size', className: 'num', formatter: SwDashTable.formatBytes },
|
||||
{ key: 'hitCount', label: 'Hits', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'missCount', label: 'Misses', className: 'num', formatter: SwDashTable.formatNumber },
|
||||
{ key: 'hitRate', label: 'Hit Rate' },
|
||||
{ key: 'lastAccessed', label: 'Last Access', formatter: SwDashTable.formatTimestamp },
|
||||
];
|
||||
|
||||
private getDataWithHitRate(): ICachedResource[] {
|
||||
return this.resources.map(r => {
|
||||
const total = r.hitCount + r.missCount;
|
||||
return {
|
||||
...r,
|
||||
hitRate: total > 0 ? Math.round((r.hitCount / total) * 100) : 0
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<sw-dash-table
|
||||
.columns="${this.columns}"
|
||||
.data="${this.getDataWithHitRate()}"
|
||||
filterPlaceholder="Filter URLs..."
|
||||
infoLabel="resources"
|
||||
></sw-dash-table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,12 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './typedserver_web.logger.js';
|
||||
logger.log('info', `TypedServer-Devtools initialized!`);
|
||||
|
||||
import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
|
||||
import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
|
||||
|
||||
export class ReloadChecker {
|
||||
public reloadJustified = false;
|
||||
public backendConnectionLost = false;
|
||||
public infoscreen = new TypedserverInfoscreen();
|
||||
public statusPill = new TypedserverStatusPill();
|
||||
public store = new plugins.webstore.WebStore({
|
||||
dbName: 'apiglobal__typedserver',
|
||||
storeName: 'apiglobal__typedserver',
|
||||
@@ -17,14 +17,90 @@ export class ReloadChecker {
|
||||
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
private swStatusUnsubscribe: (() => void) | null = null;
|
||||
|
||||
constructor() {}
|
||||
constructor() {
|
||||
// Listen to browser online/offline events
|
||||
window.addEventListener('online', () => {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'network',
|
||||
type: 'online',
|
||||
message: 'Back online',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('offline', () => {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'network',
|
||||
type: 'offline',
|
||||
message: 'No internet connection',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async reload() {
|
||||
// this looks a bit hacky, but apparently is the safest way to really reload stuff
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribe to service worker status updates
|
||||
*/
|
||||
public subscribeToServiceWorker(): void {
|
||||
// Check if service worker client is available
|
||||
if (globalThis.globalSw?.actionManager) {
|
||||
this.swStatusUnsubscribe = globalThis.globalSw.actionManager.subscribeToStatusUpdates((status) => {
|
||||
this.statusPill.updateStatus({
|
||||
source: status.source,
|
||||
type: status.type,
|
||||
message: status.message,
|
||||
details: status.details,
|
||||
persist: status.persist || false,
|
||||
timestamp: status.timestamp,
|
||||
});
|
||||
});
|
||||
logger.log('info', 'Subscribed to service worker status updates');
|
||||
|
||||
// Get initial SW status
|
||||
this.fetchServiceWorkerStatus();
|
||||
} else {
|
||||
logger.log('note', 'Service worker client not available yet, will retry...');
|
||||
// Retry after a delay
|
||||
setTimeout(() => this.subscribeToServiceWorker(), 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and display initial service worker status
|
||||
*/
|
||||
private async fetchServiceWorkerStatus(): Promise<void> {
|
||||
if (!globalThis.globalSw?.actionManager) return;
|
||||
|
||||
try {
|
||||
const status = await globalThis.globalSw.actionManager.getServiceWorkerStatus();
|
||||
if (status) {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: status.isActive ? 'connected' : 'disconnected',
|
||||
message: status.isActive ? 'Service worker active' : 'Service worker inactive',
|
||||
details: {
|
||||
cacheHitRate: status.cacheHitRate,
|
||||
resourceCount: status.resourceCount,
|
||||
connectionType: status.connectionType,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to get SW status: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* starts the reload checker
|
||||
*/
|
||||
@@ -50,11 +126,23 @@ export class ReloadChecker {
|
||||
if (response?.status !== 200) {
|
||||
this.backendConnectionLost = true;
|
||||
logger.log('warn', `got a status ${response?.status}.`);
|
||||
this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'disconnected',
|
||||
message: `Backend connection lost (${response?.status || 'timeout'})`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
if (response?.status === 200 && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('regained connection to backend...');
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'connected',
|
||||
message: 'Backend connection restored',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
return response;
|
||||
}
|
||||
@@ -69,23 +157,42 @@ export class ReloadChecker {
|
||||
|
||||
if (reloadJustified) {
|
||||
this.store.set(this.storeKey, lastServerChange);
|
||||
const reloadText = `upgrading... ${
|
||||
globalThis.globalSw ? '(purging the sw cache first...)' : ''
|
||||
}`;
|
||||
this.infoscreen.setText(reloadText);
|
||||
const hasSw = !!globalThis.globalSw;
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: hasSw ? 'Updating app...' : 'Upgrading...',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
if (globalThis.globalSw?.purgeCache) {
|
||||
await globalThis.globalSw.purgeCache();
|
||||
} else if ('caches' in window) {
|
||||
// Fallback: clear caches via Cache API when service worker client isn't initialized
|
||||
try {
|
||||
const cacheKeys = await caches.keys();
|
||||
await Promise.all(cacheKeys.map(key => caches.delete(key)));
|
||||
logger.log('ok', 'Cleared caches via Cache API fallback');
|
||||
} catch (err) {
|
||||
logger.log('warn', `Failed to clear caches via Cache API: ${err}`);
|
||||
}
|
||||
} else {
|
||||
console.log('globalThis.globalSw not found...');
|
||||
console.log('globalThis.globalSw not found and Cache API not available...');
|
||||
}
|
||||
this.infoscreen.setText(`cleaned caches`);
|
||||
|
||||
this.statusPill.updateStatus({
|
||||
source: 'serviceworker',
|
||||
type: 'cache',
|
||||
message: 'Cache cleared, reloading...',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
await plugins.smartdelay.delayFor(200);
|
||||
this.reload();
|
||||
return;
|
||||
} else {
|
||||
if (this.infoscreen) {
|
||||
this.infoscreen.hide();
|
||||
}
|
||||
// All good, hide after brief show
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -102,19 +209,27 @@ export class ReloadChecker {
|
||||
this.typedrouter,
|
||||
plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl()
|
||||
);
|
||||
this.typedsocket.addTag('typedserver_frontend', {});
|
||||
this.typedsocket.eventSubject.subscribe(async (eventArg) => {
|
||||
console.log(`typedsocket event subscription: ${eventArg}`);
|
||||
if (
|
||||
eventArg === 'disconnected' ||
|
||||
eventArg === 'disconnecting' ||
|
||||
eventArg === 'timedOut'
|
||||
) {
|
||||
await this.typedsocket.setTag('typedserver_frontend', {});
|
||||
this.typedsocket.statusSubject.subscribe(async (statusArg) => {
|
||||
console.log(`typedsocket status: ${statusArg}`);
|
||||
if (statusArg === 'disconnected' || statusArg === 'reconnecting') {
|
||||
this.backendConnectionLost = true;
|
||||
this.infoscreen.setText(`typedsocket ${eventArg}!`);
|
||||
} else if (eventArg === 'connected' && this.backendConnectionLost) {
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: statusArg === 'disconnected' ? 'disconnected' : 'reconnecting',
|
||||
message: `TypedSocket ${statusArg}`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
} else if (statusArg === 'connected' && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('typedsocket connected!');
|
||||
this.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'connected',
|
||||
message: 'TypedSocket connected',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// lets check if a reload is necessary
|
||||
const getLatestServerChangeTime =
|
||||
this.typedsocket.createTypedRequest<interfaces.IReq_GetLatestServerChangeTime>(
|
||||
@@ -132,9 +247,13 @@ export class ReloadChecker {
|
||||
public async start() {
|
||||
this.started = true;
|
||||
logger.log('info', `starting ReloadChecker...`);
|
||||
|
||||
// Subscribe to service worker status updates
|
||||
this.subscribeToServiceWorker();
|
||||
|
||||
while (this.started) {
|
||||
const response = await this.performHttpRequest();
|
||||
if (response.status === 200) {
|
||||
if (response?.status === 200) {
|
||||
logger.log('info', `ReloadChecker reached backend!`);
|
||||
await this.checkReload(parseInt(await response.text()));
|
||||
await this.connectTypedsocket();
|
||||
@@ -145,6 +264,10 @@ export class ReloadChecker {
|
||||
|
||||
public async stop() {
|
||||
this.started = false;
|
||||
if (this.swStatusUnsubscribe) {
|
||||
this.swStatusUnsubscribe();
|
||||
this.swStatusUnsubscribe = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
534
ts_web_inject/typedserver_web.statuspill.ts
Normal file
534
ts_web_inject/typedserver_web.statuspill.ts
Normal file
@@ -0,0 +1,534 @@
|
||||
import { LitElement, html, css } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import * as plugins from './typedserver_web.plugins.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'typedserver-statuspill': TypedserverStatusPill;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Status source types
|
||||
*/
|
||||
export type TStatusSource = 'backend' | 'serviceworker' | 'network';
|
||||
|
||||
/**
|
||||
* Status type
|
||||
*/
|
||||
export type TStatusType = 'connected' | 'disconnected' | 'reconnecting' | 'update' | 'cache' | 'error' | 'offline' | 'online';
|
||||
|
||||
/**
|
||||
* Status item with details
|
||||
*/
|
||||
export interface IStatusItem {
|
||||
source: TStatusSource;
|
||||
type: TStatusType;
|
||||
message: string;
|
||||
details?: {
|
||||
version?: string;
|
||||
cacheHitRate?: number;
|
||||
resourceCount?: number;
|
||||
connectionType?: string;
|
||||
latencyMs?: number;
|
||||
};
|
||||
persist: boolean;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Modern status pill component that displays connection and service worker status
|
||||
* - Shows at center-bottom on connectivity changes
|
||||
* - Stays visible during error states
|
||||
* - Expands on hover to show detailed status
|
||||
*/
|
||||
@customElement('typedserver-statuspill')
|
||||
export class TypedserverStatusPill extends LitElement {
|
||||
// Current status items by source
|
||||
@state() accessor backendStatus: IStatusItem | null = null;
|
||||
@state() accessor swStatus: IStatusItem | null = null;
|
||||
@state() accessor networkStatus: IStatusItem | null = null;
|
||||
|
||||
// UI state
|
||||
@state() accessor visible = false;
|
||||
@state() accessor expanded = false;
|
||||
@state() accessor hasError = false;
|
||||
|
||||
// Hide timeout
|
||||
private hideTimeout: number | null = null;
|
||||
private appended = false;
|
||||
|
||||
public static styles = css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
--pill-bg: rgba(20, 20, 20, 0.9);
|
||||
--pill-bg-error: rgba(180, 40, 40, 0.95);
|
||||
--pill-bg-success: rgba(40, 140, 60, 0.95);
|
||||
--pill-text: #fff;
|
||||
--pill-text-muted: rgba(255, 255, 255, 0.7);
|
||||
--pill-border: rgba(255, 255, 255, 0.1);
|
||||
--pill-accent: #4af;
|
||||
--pill-success: #4f8;
|
||||
--pill-warning: #fa4;
|
||||
--pill-error: #f44;
|
||||
}
|
||||
|
||||
.pill {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: var(--pill-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
padding: 10px 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--pill-text);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--pill-border);
|
||||
}
|
||||
|
||||
.pill.visible {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.pill.error {
|
||||
background: var(--pill-bg-error);
|
||||
}
|
||||
|
||||
.pill.success {
|
||||
background: var(--pill-bg-success);
|
||||
}
|
||||
|
||||
.pill-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--pill-text-muted);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background: var(--pill-success);
|
||||
box-shadow: 0 0 6px var(--pill-success);
|
||||
}
|
||||
|
||||
.status-dot.disconnected,
|
||||
.status-dot.offline,
|
||||
.status-dot.error {
|
||||
background: var(--pill-error);
|
||||
box-shadow: 0 0 6px var(--pill-error);
|
||||
}
|
||||
|
||||
.status-dot.reconnecting,
|
||||
.status-dot.update {
|
||||
background: var(--pill-warning);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
color: var(--pill-text);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: var(--pill-border);
|
||||
}
|
||||
|
||||
.pill-expanded {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--pill-border);
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pill.expanded .pill-expanded {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: var(--pill-text-muted);
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: var(--pill-text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-value.success {
|
||||
color: var(--pill-success);
|
||||
}
|
||||
|
||||
.detail-value.error {
|
||||
color: var(--pill-error);
|
||||
}
|
||||
|
||||
.detail-value.warning {
|
||||
color: var(--pill-warning);
|
||||
}
|
||||
|
||||
/* Click hint */
|
||||
.pill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 32px;
|
||||
height: 3px;
|
||||
background: var(--pill-border);
|
||||
border-radius: 2px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.pill:hover::after {
|
||||
background: var(--pill-text-muted);
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Update status from a specific source
|
||||
*/
|
||||
public updateStatus(status: IStatusItem): void {
|
||||
// Store by source
|
||||
switch (status.source) {
|
||||
case 'backend':
|
||||
this.backendStatus = status;
|
||||
break;
|
||||
case 'serviceworker':
|
||||
this.swStatus = status;
|
||||
break;
|
||||
case 'network':
|
||||
this.networkStatus = status;
|
||||
break;
|
||||
}
|
||||
|
||||
// Determine if we have any errors (should persist)
|
||||
this.hasError = this.hasAnyError();
|
||||
|
||||
// Show the pill
|
||||
this.show();
|
||||
|
||||
// Auto-hide after delay if not persistent
|
||||
if (!status.persist && !this.hasError) {
|
||||
this.scheduleHide(2500);
|
||||
} else {
|
||||
this.cancelHide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if any status is an error state
|
||||
*/
|
||||
private hasAnyError(): boolean {
|
||||
const errorTypes: TStatusType[] = ['disconnected', 'error', 'offline'];
|
||||
return (
|
||||
(this.backendStatus && errorTypes.includes(this.backendStatus.type)) ||
|
||||
(this.networkStatus && errorTypes.includes(this.networkStatus.type)) ||
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get overall status class
|
||||
*/
|
||||
private getStatusClass(): string {
|
||||
if (this.hasError) return 'error';
|
||||
|
||||
const latestStatus = this.getLatestStatus();
|
||||
if (latestStatus?.type === 'connected' || latestStatus?.type === 'online') {
|
||||
return 'success';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the most recent status
|
||||
*/
|
||||
private getLatestStatus(): IStatusItem | null {
|
||||
const statuses = [this.backendStatus, this.swStatus, this.networkStatus].filter(Boolean) as IStatusItem[];
|
||||
if (statuses.length === 0) return null;
|
||||
return statuses.reduce((latest, current) =>
|
||||
current.timestamp > latest.timestamp ? current : latest
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the pill
|
||||
*/
|
||||
public show(): void {
|
||||
if (!this.appended) {
|
||||
document.body.appendChild(this);
|
||||
this.appended = true;
|
||||
}
|
||||
// Small delay to ensure DOM update
|
||||
requestAnimationFrame(() => {
|
||||
this.visible = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the pill
|
||||
*/
|
||||
public hide(): void {
|
||||
this.visible = false;
|
||||
this.expanded = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Schedule auto-hide
|
||||
*/
|
||||
private scheduleHide(delayMs: number): void {
|
||||
this.cancelHide();
|
||||
this.hideTimeout = window.setTimeout(() => {
|
||||
if (!this.hasError) {
|
||||
this.hide();
|
||||
}
|
||||
}, delayMs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel scheduled hide
|
||||
*/
|
||||
private cancelHide(): void {
|
||||
if (this.hideTimeout) {
|
||||
clearTimeout(this.hideTimeout);
|
||||
this.hideTimeout = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle expanded state
|
||||
*/
|
||||
private toggleExpanded(): void {
|
||||
this.expanded = !this.expanded;
|
||||
if (this.expanded) {
|
||||
this.cancelHide();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all status and hide
|
||||
*/
|
||||
public clearStatus(): void {
|
||||
this.backendStatus = null;
|
||||
this.swStatus = null;
|
||||
this.networkStatus = null;
|
||||
this.hasError = false;
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Set success message (auto-hides)
|
||||
*/
|
||||
public setSuccess(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'connected',
|
||||
message,
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set error message (persists)
|
||||
*/
|
||||
public setError(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'error',
|
||||
message,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set transitional message (auto-hides)
|
||||
*/
|
||||
public setText(message: string, source: TStatusSource = 'backend'): void {
|
||||
this.updateStatus({
|
||||
source,
|
||||
type: 'reconnecting',
|
||||
message,
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render status indicators
|
||||
*/
|
||||
private renderStatusIndicators() {
|
||||
const indicators = [];
|
||||
|
||||
if (this.networkStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.networkStatus.type}"></span>
|
||||
<span class="status-label">Net</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.backendStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.backendStatus.type}"></span>
|
||||
<span class="status-label">API</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus) {
|
||||
indicators.push(html`
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot ${this.swStatus.type}"></span>
|
||||
<span class="status-label">SW</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
return indicators;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render expanded details
|
||||
*/
|
||||
private renderDetails() {
|
||||
const details = [];
|
||||
|
||||
if (this.networkStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Network</span>
|
||||
<span class="detail-value ${this.networkStatus.type === 'online' ? 'success' : 'error'}">
|
||||
${this.networkStatus.message}
|
||||
${this.networkStatus.details?.connectionType ? ` (${this.networkStatus.details.connectionType})` : ''}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.backendStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Backend</span>
|
||||
<span class="detail-value ${this.backendStatus.type === 'connected' ? 'success' : this.backendStatus.type === 'reconnecting' ? 'warning' : 'error'}">
|
||||
${this.backendStatus.message}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Service Worker</span>
|
||||
<span class="detail-value ${this.swStatus.type === 'connected' ? 'success' : this.swStatus.type === 'update' ? 'warning' : ''}">
|
||||
${this.swStatus.message}
|
||||
${this.swStatus.details?.version ? ` v${this.swStatus.details.version}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
`);
|
||||
|
||||
if (this.swStatus.details?.cacheHitRate !== undefined) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Cache Hit Rate</span>
|
||||
<span class="detail-value">${this.swStatus.details.cacheHitRate.toFixed(1)}%</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
if (this.swStatus.details?.resourceCount !== undefined) {
|
||||
details.push(html`
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Cached Resources</span>
|
||||
<span class="detail-value">${this.swStatus.details.resourceCount}</span>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
}
|
||||
|
||||
return details;
|
||||
}
|
||||
|
||||
public render() {
|
||||
const latestStatus = this.getLatestStatus();
|
||||
const message = latestStatus?.message || '';
|
||||
const indicators = this.renderStatusIndicators();
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="pill ${this.visible ? 'visible' : ''} ${this.getStatusClass()} ${this.expanded ? 'expanded' : ''}"
|
||||
@click="${this.toggleExpanded}"
|
||||
>
|
||||
<div class="pill-main">
|
||||
${indicators.length > 0 ? html`
|
||||
${indicators}
|
||||
${message ? html`<span class="separator"></span>` : ''}
|
||||
` : ''}
|
||||
${message ? html`<span class="status-message">${message}</span>` : ''}
|
||||
</div>
|
||||
<div class="pill-expanded">
|
||||
${this.renderDetails()}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './logging.js';
|
||||
import { getMetricsCollector } from './classes.metrics.js';
|
||||
import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
|
||||
import { getPersistentStore } from './classes.persistentstore.js';
|
||||
|
||||
// Add type definitions for ServiceWorker APIs
|
||||
declare global {
|
||||
@@ -41,11 +44,20 @@ declare global {
|
||||
*/
|
||||
export class ServiceworkerBackend {
|
||||
public deesComms = new plugins.deesComms.DeesComms();
|
||||
private swSelf: ServiceWorkerGlobalScope;
|
||||
private clientUpdateInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
// Throttling for metrics updates (max 1 per 500ms)
|
||||
private metricsUpdateThrottle: ReturnType<typeof setTimeout> | null = null;
|
||||
private pendingMetricsUpdate = false;
|
||||
private readonly METRICS_THROTTLE_MS = 500;
|
||||
|
||||
constructor(optionsArg: {
|
||||
self: any;
|
||||
purgeCache: (reqArg: interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['request']) => Promise<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache['response']>;
|
||||
}) {
|
||||
this.swSelf = optionsArg.self as unknown as ServiceWorkerGlobalScope;
|
||||
const metrics = getMetricsCollector();
|
||||
|
||||
// lets handle wakestuff
|
||||
optionsArg.self.addEventListener('message', (event) => {
|
||||
@@ -53,16 +65,220 @@ export class ServiceworkerBackend {
|
||||
console.log('sw-backend: got wake up call');
|
||||
}
|
||||
});
|
||||
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Client_Serviceworker_ConnectionPolling>('broadcastConnectionPolling', async reqArg => {
|
||||
// Record connection attempt
|
||||
metrics.recordConnectionAttempt();
|
||||
metrics.recordConnectionSuccess();
|
||||
// Update connected clients count
|
||||
await this.updateConnectedClientsCount();
|
||||
return {
|
||||
serviceworkerId: '123'
|
||||
};
|
||||
})
|
||||
});
|
||||
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_PurgeServiceWorkerCache>('purgeServiceWorkerCache', async reqArg => {
|
||||
console.log(`Executing purge cache in serviceworker backend.`)
|
||||
return await optionsArg.purgeCache?.(reqArg);
|
||||
});
|
||||
|
||||
// Handler for getting current SW status
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus', async () => {
|
||||
const metrics = getMetricsCollector();
|
||||
const metricsData = metrics.getMetrics();
|
||||
return {
|
||||
isActive: true,
|
||||
isOnline: metricsData.speedtest.isOnline,
|
||||
cacheHitRate: metrics.getCacheHitRate(),
|
||||
resourceCount: metrics.getResourceCount(),
|
||||
connectedClients: metricsData.connection.connectedClients,
|
||||
lastUpdateCheck: metricsData.update.lastCheckTimestamp,
|
||||
};
|
||||
});
|
||||
|
||||
// Handler for getting event log
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventLog>('serviceworker_getEventLog', async (reqArg) => {
|
||||
const persistentStore = getPersistentStore();
|
||||
return await persistentStore.getEventLog({
|
||||
limit: reqArg.limit,
|
||||
type: reqArg.type,
|
||||
since: reqArg.since,
|
||||
});
|
||||
});
|
||||
|
||||
// Handler for getting cumulative metrics
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetCumulativeMetrics>('serviceworker_getCumulativeMetrics', async () => {
|
||||
const persistentStore = getPersistentStore();
|
||||
return persistentStore.getCumulativeMetrics();
|
||||
});
|
||||
|
||||
// Handler for clearing event log
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_ClearEventLog>('serviceworker_clearEventLog', async () => {
|
||||
const persistentStore = getPersistentStore();
|
||||
const success = await persistentStore.clearEventLog();
|
||||
return { success };
|
||||
});
|
||||
|
||||
// Handler for getting event count since timestamp
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_GetEventCount>('serviceworker_getEventCount', async (reqArg) => {
|
||||
const persistentStore = getPersistentStore();
|
||||
const count = await persistentStore.getEventCount(reqArg.since);
|
||||
return { count };
|
||||
});
|
||||
|
||||
// Periodically update connected clients count
|
||||
this.startClientCountUpdates();
|
||||
|
||||
// Subscribe to EventBus and broadcast status updates
|
||||
this.setupEventBusSubscriptions();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up subscriptions to EventBus events and broadcasts them to clients
|
||||
*/
|
||||
private setupEventBusSubscriptions(): void {
|
||||
const eventBus = getEventBus();
|
||||
const persistentStore = getPersistentStore();
|
||||
|
||||
// Network status changes
|
||||
eventBus.on(ServiceWorkerEvent.NETWORK_ONLINE, async () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'network',
|
||||
type: 'online',
|
||||
message: 'Connection restored',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Log to persistent store
|
||||
await persistentStore.logEvent('network_online', 'Network connection restored');
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.NETWORK_OFFLINE, async () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'network',
|
||||
type: 'offline',
|
||||
message: 'Connection lost - offline mode',
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Log to persistent store
|
||||
await persistentStore.logEvent('network_offline', 'Network connection lost');
|
||||
});
|
||||
|
||||
// Update events
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_AVAILABLE, async (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: 'Update available',
|
||||
details: {
|
||||
version: payload.newVersion,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Log to persistent store
|
||||
await persistentStore.logEvent('update_check', `Update available: ${payload.newVersion}`, {
|
||||
newVersion: payload.newVersion,
|
||||
});
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_APPLIED, async (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'update',
|
||||
message: 'Update applied',
|
||||
details: {
|
||||
version: payload.newVersion,
|
||||
},
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Log to persistent store
|
||||
await persistentStore.logEvent('sw_updated', `Service worker updated to ${payload.newVersion}`, {
|
||||
newVersion: payload.newVersion,
|
||||
});
|
||||
});
|
||||
|
||||
eventBus.on(ServiceWorkerEvent.UPDATE_ERROR, async (_event, payload: any) => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'error',
|
||||
message: `Update error: ${payload.error || 'Unknown error'}`,
|
||||
persist: true,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Log to persistent store
|
||||
await persistentStore.logEvent('error', `Update error: ${payload.error || 'Unknown error'}`, {
|
||||
error: payload.error,
|
||||
});
|
||||
});
|
||||
|
||||
// Cache invalidation
|
||||
eventBus.on(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'cache',
|
||||
message: 'Clearing cache...',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Note: cache_invalidated event is logged in the ServiceWorker class
|
||||
});
|
||||
|
||||
// Lifecycle events
|
||||
eventBus.on(ServiceWorkerEvent.ACTIVATE, () => {
|
||||
this.broadcastStatusUpdate({
|
||||
source: 'serviceworker',
|
||||
type: 'connected',
|
||||
message: 'Service worker activated',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
// Note: sw_activated event is logged in the ServiceWorker class
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Broadcasts a status update to all connected clients
|
||||
*/
|
||||
public async broadcastStatusUpdate(status: interfaces.serviceworker.IStatusUpdate): Promise<void> {
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
method: 'serviceworker_statusUpdate',
|
||||
request: status,
|
||||
messageId: `sw_status_${Date.now()}`
|
||||
});
|
||||
logger.log('info', `Status update broadcast: ${status.source}:${status.type} - ${status.message}`);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to broadcast status update: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start periodic updates of connected client count
|
||||
*/
|
||||
private startClientCountUpdates(): void {
|
||||
// Update immediately
|
||||
this.updateConnectedClientsCount();
|
||||
|
||||
// Then update every 5 seconds
|
||||
this.clientUpdateInterval = setInterval(() => {
|
||||
this.updateConnectedClientsCount();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the connected clients count using the Clients API
|
||||
*/
|
||||
private async updateConnectedClientsCount(): Promise<void> {
|
||||
try {
|
||||
const clients = await this.swSelf.clients.matchAll({ type: 'window' });
|
||||
const metrics = getMetricsCollector();
|
||||
metrics.setConnectedClients(clients.length);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to update connected clients count: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -71,7 +287,7 @@ export class ServiceworkerBackend {
|
||||
public async triggerReloadAll() {
|
||||
try {
|
||||
logger.log('info', 'Triggering reload for all clients due to new version');
|
||||
|
||||
|
||||
// Send update message via DeesComms
|
||||
// This will be picked up by clients that have registered a handler for 'serviceworker_newVersion'
|
||||
await this.deesComms.postMessage({
|
||||
@@ -79,13 +295,15 @@ export class ServiceworkerBackend {
|
||||
request: {},
|
||||
messageId: `sw_update_${Date.now()}`
|
||||
});
|
||||
|
||||
|
||||
// As a fallback, also use the clients API to reload clients that might not catch the broadcast
|
||||
// We need to type-cast self since TypeScript doesn't recognize ServiceWorker API
|
||||
const swSelf = self as unknown as ServiceWorkerGlobalScope;
|
||||
const clients = await swSelf.clients.matchAll({ type: 'window' });
|
||||
const clients = await this.swSelf.clients.matchAll({ type: 'window' });
|
||||
logger.log('info', `Found ${clients.length} clients to reload`);
|
||||
|
||||
|
||||
// Update metrics with current client count
|
||||
const metrics = getMetricsCollector();
|
||||
metrics.setConnectedClients(clients.length);
|
||||
|
||||
for (const client of clients) {
|
||||
if ('navigate' in client) {
|
||||
// For modern browsers, navigate to the same URL to trigger reload
|
||||
@@ -139,7 +357,7 @@ export class ServiceworkerBackend {
|
||||
title: 'Alert',
|
||||
body: alertText
|
||||
});
|
||||
|
||||
|
||||
// Send message to clients who might be able to show an actual alert
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
@@ -152,4 +370,104 @@ export class ServiceworkerBackend {
|
||||
logger.log('error', `Failed to send alert to clients: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
}
|
||||
|
||||
// ===============
|
||||
// Push methods for real-time updates
|
||||
// ===============
|
||||
|
||||
/**
|
||||
* Pushes a new event log entry to all connected clients
|
||||
* Called immediately when an event is logged
|
||||
*/
|
||||
public async pushEvent(entry: interfaces.serviceworker.IEventLogEntry): Promise<void> {
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
method: 'serviceworker_eventLogged',
|
||||
request: entry,
|
||||
messageId: `sw_event_${entry.id}`
|
||||
});
|
||||
logger.log('note', `Pushed event to clients: ${entry.type}`);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to push event: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pushes a metrics update to all connected clients
|
||||
* Throttled to max 1 update per 500ms to prevent spam
|
||||
*/
|
||||
public pushMetricsUpdate(): void {
|
||||
// Mark that we have a pending update
|
||||
this.pendingMetricsUpdate = true;
|
||||
|
||||
// If we're already throttling, just wait for the next window
|
||||
if (this.metricsUpdateThrottle) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Send the update and start throttle window
|
||||
this.sendMetricsUpdate();
|
||||
|
||||
this.metricsUpdateThrottle = setTimeout(() => {
|
||||
this.metricsUpdateThrottle = null;
|
||||
// If there was a pending update during the throttle window, send it now
|
||||
if (this.pendingMetricsUpdate) {
|
||||
this.sendMetricsUpdate();
|
||||
}
|
||||
}, this.METRICS_THROTTLE_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Actually sends the metrics update via DeesComms
|
||||
*/
|
||||
private async sendMetricsUpdate(): Promise<void> {
|
||||
this.pendingMetricsUpdate = false;
|
||||
const metrics = getMetricsCollector();
|
||||
const metricsData = metrics.getMetrics();
|
||||
|
||||
const snapshot: interfaces.serviceworker.IMetricsSnapshot = {
|
||||
cache: {
|
||||
hits: metricsData.cache.hits,
|
||||
misses: metricsData.cache.misses,
|
||||
errors: metricsData.cache.errors,
|
||||
bytesServedFromCache: metricsData.cache.bytesServedFromCache,
|
||||
bytesFetched: metricsData.cache.bytesFetched,
|
||||
},
|
||||
network: {
|
||||
totalRequests: metricsData.network.totalRequests,
|
||||
successfulRequests: metricsData.network.successfulRequests,
|
||||
failedRequests: metricsData.network.failedRequests,
|
||||
},
|
||||
cacheHitRate: metrics.getCacheHitRate(),
|
||||
networkSuccessRate: metrics.getNetworkSuccessRate(),
|
||||
resourceCount: metrics.getResourceCount(),
|
||||
uptime: metricsData.uptime,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
method: 'serviceworker_metricsUpdate',
|
||||
request: snapshot,
|
||||
messageId: `sw_metrics_${Date.now()}`
|
||||
});
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to push metrics update: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Pushes notification when a resource is cached
|
||||
*/
|
||||
public async pushResourceCached(url: string, contentType: string, size: number, cached: boolean): Promise<void> {
|
||||
try {
|
||||
await this.deesComms.postMessage({
|
||||
method: 'serviceworker_resourceCached',
|
||||
request: { url, contentType, size, cached },
|
||||
messageId: `sw_resource_${Date.now()}`
|
||||
});
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to push resource cached: ${error}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,10 @@ import * as plugins from './plugins.js';
|
||||
import * as interfaces from './env.js';
|
||||
import { logger } from './logging.js';
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
import { getMetricsCollector } from './classes.metrics.js';
|
||||
import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
|
||||
import { getErrorHandler, ServiceWorkerErrorType } from './classes.errorhandler.js';
|
||||
import { getDashboardGenerator } from './classes.dashboard.js';
|
||||
|
||||
export class CacheManager {
|
||||
public losslessServiceWorkerRef: ServiceWorker;
|
||||
@@ -10,9 +14,113 @@ export class CacheManager {
|
||||
runtimeCacheName: 'runtime'
|
||||
};
|
||||
|
||||
// Request deduplication: tracks in-flight requests to prevent duplicate fetches
|
||||
private inFlightRequests: Map<string, Promise<Response>> = new Map();
|
||||
private readonly INFLIGHT_CLEANUP_INTERVAL = 30000; // 30 seconds
|
||||
private cleanupIntervalId: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
constructor(losslessServiceWorkerRefArg: ServiceWorker) {
|
||||
this.losslessServiceWorkerRef = losslessServiceWorkerRefArg;
|
||||
this._setupCache();
|
||||
this._setupInFlightCleanup();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up periodic cleanup of stale in-flight request entries
|
||||
*/
|
||||
private _setupInFlightCleanup(): void {
|
||||
// Clean up stale entries periodically
|
||||
this.cleanupIntervalId = setInterval(() => {
|
||||
// The Map should naturally clean up via .finally(), but this is a safety net
|
||||
if (this.inFlightRequests.size > 100) {
|
||||
logger.log('warn', `In-flight requests map has ${this.inFlightRequests.size} entries, clearing...`);
|
||||
this.inFlightRequests.clear();
|
||||
}
|
||||
}, this.INFLIGHT_CLEANUP_INTERVAL);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches a request with deduplication - coalesces identical concurrent requests
|
||||
*/
|
||||
private async fetchWithDeduplication(request: Request): Promise<Response> {
|
||||
const key = `${request.method}:${request.url}`;
|
||||
const metrics = getMetricsCollector();
|
||||
const eventBus = getEventBus();
|
||||
|
||||
// Check if we already have an in-flight request for this URL
|
||||
const existingRequest = this.inFlightRequests.get(key);
|
||||
if (existingRequest) {
|
||||
logger.log('note', `Deduplicating request for ${request.url}`);
|
||||
try {
|
||||
const response = await existingRequest;
|
||||
// Clone the response since it may have been consumed
|
||||
return response.clone();
|
||||
} catch (error) {
|
||||
// If the original request failed, we should try again
|
||||
this.inFlightRequests.delete(key);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Record the new request
|
||||
metrics.recordRequest(request.url);
|
||||
eventBus.emit(ServiceWorkerEvent.NETWORK_REQUEST_START, {
|
||||
url: request.url,
|
||||
method: request.method,
|
||||
});
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
// Create a new fetch promise and track it
|
||||
const fetchPromise = fetch(request)
|
||||
.then(async (response) => {
|
||||
const duration = Date.now() - startTime;
|
||||
|
||||
// Try to get response size
|
||||
const contentLength = response.headers.get('content-length');
|
||||
const bytes = contentLength ? parseInt(contentLength, 10) : 0;
|
||||
|
||||
metrics.recordRequestSuccess(request.url, duration, bytes);
|
||||
eventBus.emit(ServiceWorkerEvent.NETWORK_REQUEST_COMPLETE, {
|
||||
url: request.url,
|
||||
method: request.method,
|
||||
status: response.status,
|
||||
duration,
|
||||
bytes,
|
||||
});
|
||||
|
||||
return response;
|
||||
})
|
||||
.catch((error) => {
|
||||
const duration = Date.now() - startTime;
|
||||
const errorHandler = getErrorHandler();
|
||||
|
||||
errorHandler.handleNetworkError(
|
||||
`Fetch failed for ${request.url}: ${error?.message || error}`,
|
||||
request.url,
|
||||
error instanceof Error ? error : undefined,
|
||||
{ method: request.method, duration }
|
||||
);
|
||||
|
||||
metrics.recordRequestFailure(request.url, error?.message);
|
||||
eventBus.emit(ServiceWorkerEvent.NETWORK_REQUEST_ERROR, {
|
||||
url: request.url,
|
||||
method: request.method,
|
||||
duration,
|
||||
error: error?.message || 'Unknown error',
|
||||
});
|
||||
|
||||
throw error;
|
||||
})
|
||||
.finally(() => {
|
||||
// Remove from in-flight requests when done
|
||||
this.inFlightRequests.delete(key);
|
||||
});
|
||||
|
||||
// Track the in-flight request
|
||||
this.inFlightRequests.set(key, fetchPromise);
|
||||
|
||||
return fetchPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -96,6 +204,49 @@ export class CacheManager {
|
||||
const originalRequest: Request = fetchEventArg.request;
|
||||
const parsedUrl = new URL(originalRequest.url);
|
||||
|
||||
// Handle dashboard routes - serve directly from service worker
|
||||
if (parsedUrl.pathname === '/sw-dash' || parsedUrl.pathname === '/sw-dash/') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(Promise.resolve(dashboard.serveDashboard()));
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/metrics') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(Promise.resolve(dashboard.serveMetrics()));
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/speedtest') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(dashboard.runSpeedtest());
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/resources') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(Promise.resolve(dashboard.serveResources()));
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/events') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(dashboard.serveEventLog(parsedUrl.searchParams));
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/events/count') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(dashboard.serveEventCount(parsedUrl.searchParams));
|
||||
return;
|
||||
}
|
||||
if (parsedUrl.pathname === '/sw-dash/cumulative-metrics') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(dashboard.serveCumulativeMetrics());
|
||||
return;
|
||||
}
|
||||
// DELETE method for clearing events
|
||||
if (parsedUrl.pathname === '/sw-dash/events' && originalRequest.method === 'DELETE') {
|
||||
const dashboard = getDashboardGenerator();
|
||||
fetchEventArg.respondWith(dashboard.clearEventLog());
|
||||
return;
|
||||
}
|
||||
|
||||
// Block requests that we don't want the service worker to handle.
|
||||
if (
|
||||
parsedUrl.hostname.includes('paddle.com') ||
|
||||
@@ -128,16 +279,32 @@ export class CacheManager {
|
||||
|
||||
const matchRequest = createMatchRequest(originalRequest);
|
||||
const cachedResponse = await caches.match(matchRequest);
|
||||
const metrics = getMetricsCollector();
|
||||
const eventBus = getEventBus();
|
||||
|
||||
if (cachedResponse) {
|
||||
// Record cache hit
|
||||
const contentLength = cachedResponse.headers.get('content-length');
|
||||
const bytes = contentLength ? parseInt(contentLength, 10) : 0;
|
||||
const contentType = cachedResponse.headers.get('content-type') || 'unknown';
|
||||
metrics.recordCacheHit(matchRequest.url, bytes);
|
||||
metrics.recordResourceAccess(matchRequest.url, true, contentType, bytes);
|
||||
eventBus.emitCacheHit(matchRequest.url, bytes);
|
||||
|
||||
logger.log('ok', `CACHED: Found cached response for ${matchRequest.url}`);
|
||||
done.resolve(cachedResponse);
|
||||
return;
|
||||
}
|
||||
|
||||
// Record cache miss
|
||||
metrics.recordCacheMiss(matchRequest.url);
|
||||
eventBus.emitCacheMiss(matchRequest.url);
|
||||
|
||||
logger.log('info', `NOTYETCACHED: Trying to cache ${matchRequest.url}`);
|
||||
let newResponse: Response;
|
||||
try {
|
||||
newResponse = await fetch(matchRequest);
|
||||
// Use deduplicated fetch to prevent concurrent requests for the same resource
|
||||
newResponse = await this.fetchWithDeduplication(matchRequest);
|
||||
} catch (err: any) {
|
||||
logger.log('error', `Fetch error for ${matchRequest.url}: ${err}`);
|
||||
newResponse = await create500Response(matchRequest, new Response(err.message));
|
||||
@@ -196,6 +363,12 @@ export class CacheManager {
|
||||
});
|
||||
|
||||
await cache.put(matchRequest, newCachedResponse);
|
||||
|
||||
// Record resource access for per-resource tracking
|
||||
const cachedContentType = newResponse.headers.get('content-type') || 'unknown';
|
||||
const cachedSize = bodyBlob.size;
|
||||
metrics.recordResourceAccess(matchRequest.url, false, cachedContentType, cachedSize);
|
||||
|
||||
logger.log('ok', `NOWCACHED: Cached response for ${matchRequest.url} for subsequent requests!`);
|
||||
done.resolve(newResponse);
|
||||
} catch (err) {
|
||||
|
||||
232
ts_web_serviceworker/classes.config.ts
Normal file
232
ts_web_serviceworker/classes.config.ts
Normal file
@@ -0,0 +1,232 @@
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
/**
|
||||
* Configuration interface for service worker settings
|
||||
*/
|
||||
export interface IServiceWorkerConfig {
|
||||
// Cache settings
|
||||
cache: {
|
||||
maxAge: number; // Maximum cache age in milliseconds (default: 24 hours)
|
||||
offlineGracePeriod: number; // Grace period when offline (default: 7 days)
|
||||
runtimeCacheName: string; // Name of the runtime cache
|
||||
};
|
||||
|
||||
// Update check settings
|
||||
update: {
|
||||
minCheckInterval: number; // Minimum interval between update checks (default: 100 seconds)
|
||||
debounceTime: number; // Debounce time for update tasks (default: 2000ms)
|
||||
revalidationDebounce: number; // Debounce time for revalidation (default: 6000ms)
|
||||
};
|
||||
|
||||
// Network settings
|
||||
network: {
|
||||
requestTimeout: number; // Default request timeout (default: 5000ms)
|
||||
maxRetries: number; // Maximum retry attempts (default: 3)
|
||||
retryDelay: number; // Delay between retries (default: 1000ms)
|
||||
};
|
||||
|
||||
// Blocked domains - requests to these domains bypass the service worker
|
||||
blockedDomains: string[];
|
||||
|
||||
// Blocked paths - requests with these path prefixes bypass the service worker
|
||||
blockedPaths: string[];
|
||||
|
||||
// External cacheable domains - external domains that should be cached
|
||||
cacheableDomains: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Default configuration values
|
||||
*/
|
||||
const DEFAULT_CONFIG: IServiceWorkerConfig = {
|
||||
cache: {
|
||||
maxAge: 24 * 60 * 60 * 1000, // 24 hours
|
||||
offlineGracePeriod: 7 * 24 * 60 * 60 * 1000, // 7 days
|
||||
runtimeCacheName: 'runtime',
|
||||
},
|
||||
update: {
|
||||
minCheckInterval: 100000, // 100 seconds
|
||||
debounceTime: 2000,
|
||||
revalidationDebounce: 6000,
|
||||
},
|
||||
network: {
|
||||
requestTimeout: 5000,
|
||||
maxRetries: 3,
|
||||
retryDelay: 1000,
|
||||
},
|
||||
blockedDomains: [
|
||||
'paddle.com',
|
||||
'paypal.com',
|
||||
'reception.lossless.one',
|
||||
'umami.',
|
||||
],
|
||||
blockedPaths: [
|
||||
'/socket.io',
|
||||
'/api/',
|
||||
'smartserve/reloadcheck',
|
||||
],
|
||||
cacheableDomains: [
|
||||
'assetbroker.',
|
||||
'unpkg.com',
|
||||
'fonts.googleapis.com',
|
||||
'fonts.gstatic.com',
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* ServiceWorkerConfig manages the configuration for the service worker.
|
||||
* Configuration is persisted to WebStore and can be updated at runtime.
|
||||
*/
|
||||
export class ServiceWorkerConfig {
|
||||
private static readonly STORE_KEY = 'sw_config';
|
||||
private config: IServiceWorkerConfig;
|
||||
private store: plugins.webstore.WebStore;
|
||||
|
||||
constructor(store: plugins.webstore.WebStore) {
|
||||
this.store = store;
|
||||
this.config = { ...DEFAULT_CONFIG };
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads configuration from WebStore, falling back to defaults
|
||||
*/
|
||||
public async load(): Promise<void> {
|
||||
try {
|
||||
if (await this.store.check(ServiceWorkerConfig.STORE_KEY)) {
|
||||
const storedConfig = await this.store.get(ServiceWorkerConfig.STORE_KEY);
|
||||
this.config = this.mergeConfig(DEFAULT_CONFIG, storedConfig);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load service worker config, using defaults:', error);
|
||||
this.config = { ...DEFAULT_CONFIG };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves current configuration to WebStore
|
||||
*/
|
||||
public async save(): Promise<void> {
|
||||
await this.store.set(ServiceWorkerConfig.STORE_KEY, this.config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current configuration
|
||||
*/
|
||||
public get(): IServiceWorkerConfig {
|
||||
return this.config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates configuration with partial values
|
||||
*/
|
||||
public async update(partialConfig: Partial<IServiceWorkerConfig>): Promise<void> {
|
||||
this.config = this.mergeConfig(this.config, partialConfig);
|
||||
await this.save();
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets configuration to defaults
|
||||
*/
|
||||
public async reset(): Promise<void> {
|
||||
this.config = { ...DEFAULT_CONFIG };
|
||||
await this.save();
|
||||
}
|
||||
|
||||
// Getters for common configuration values
|
||||
public get cacheMaxAge(): number {
|
||||
return this.config.cache.maxAge;
|
||||
}
|
||||
|
||||
public get offlineGracePeriod(): number {
|
||||
return this.config.cache.offlineGracePeriod;
|
||||
}
|
||||
|
||||
public get runtimeCacheName(): string {
|
||||
return this.config.cache.runtimeCacheName;
|
||||
}
|
||||
|
||||
public get minCheckInterval(): number {
|
||||
return this.config.update.minCheckInterval;
|
||||
}
|
||||
|
||||
public get updateDebounceTime(): number {
|
||||
return this.config.update.debounceTime;
|
||||
}
|
||||
|
||||
public get revalidationDebounce(): number {
|
||||
return this.config.update.revalidationDebounce;
|
||||
}
|
||||
|
||||
public get requestTimeout(): number {
|
||||
return this.config.network.requestTimeout;
|
||||
}
|
||||
|
||||
public get maxRetries(): number {
|
||||
return this.config.network.maxRetries;
|
||||
}
|
||||
|
||||
public get retryDelay(): number {
|
||||
return this.config.network.retryDelay;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a URL should be blocked from service worker handling
|
||||
*/
|
||||
public shouldBlockUrl(url: string): boolean {
|
||||
try {
|
||||
const parsedUrl = new URL(url);
|
||||
|
||||
// Check blocked domains
|
||||
for (const domain of this.config.blockedDomains) {
|
||||
if (parsedUrl.hostname.includes(domain)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Check blocked paths
|
||||
for (const path of this.config.blockedPaths) {
|
||||
if (parsedUrl.pathname.includes(path)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if URL starts with blocked domain pattern
|
||||
if (url.startsWith('https://umami.')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if an external URL should be cached
|
||||
*/
|
||||
public shouldCacheExternalUrl(url: string): boolean {
|
||||
for (const domain of this.config.cacheableDomains) {
|
||||
if (url.includes(domain)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Deep merges two configuration objects
|
||||
*/
|
||||
private mergeConfig(
|
||||
base: IServiceWorkerConfig,
|
||||
override: Partial<IServiceWorkerConfig>
|
||||
): IServiceWorkerConfig {
|
||||
return {
|
||||
cache: { ...base.cache, ...override.cache },
|
||||
update: { ...base.update, ...override.update },
|
||||
network: { ...base.network, ...override.network },
|
||||
blockedDomains: override.blockedDomains ?? base.blockedDomains,
|
||||
blockedPaths: override.blockedPaths ?? base.blockedPaths,
|
||||
cacheableDomains: override.cacheableDomains ?? base.cacheableDomains,
|
||||
};
|
||||
}
|
||||
}
|
||||
295
ts_web_serviceworker/classes.dashboard.ts
Normal file
295
ts_web_serviceworker/classes.dashboard.ts
Normal file
@@ -0,0 +1,295 @@
|
||||
import { getMetricsCollector } from './classes.metrics.js';
|
||||
import { getServiceWorkerInstance } from './init.js';
|
||||
import { getPersistentStore } from './classes.persistentstore.js';
|
||||
import * as interfaces from './env.js';
|
||||
import type { serviceworker } from '../dist_ts_interfaces/index.js';
|
||||
|
||||
type TEventType = serviceworker.TEventType;
|
||||
|
||||
/**
|
||||
* Dashboard generator that creates a terminal-like metrics display
|
||||
* served directly from the service worker as a single-page app
|
||||
*/
|
||||
export class DashboardGenerator {
|
||||
/**
|
||||
* Serves the dashboard HTML page
|
||||
*/
|
||||
public serveDashboard(): Response {
|
||||
return new Response(this.generateDashboardHtml(), {
|
||||
headers: {
|
||||
'Content-Type': 'text/html; charset=utf-8',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves the metrics JSON endpoint
|
||||
*/
|
||||
public serveMetrics(): Response {
|
||||
return new Response(this.generateMetricsJson(), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves detailed resource data for the SPA views
|
||||
*/
|
||||
public serveResources(): Response {
|
||||
return new Response(this.generateResourcesJson(), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves event log data
|
||||
*/
|
||||
public async serveEventLog(searchParams: URLSearchParams): Promise<Response> {
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
|
||||
const limit = searchParams.get('limit') ? parseInt(searchParams.get('limit')!, 10) : undefined;
|
||||
const type = searchParams.get('type') as TEventType | undefined;
|
||||
const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : undefined;
|
||||
|
||||
const result = await persistentStore.getEventLog({ limit, type, since });
|
||||
|
||||
return new Response(JSON.stringify(result), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves event count since a timestamp
|
||||
*/
|
||||
public async serveEventCount(searchParams: URLSearchParams): Promise<Response> {
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
|
||||
const since = searchParams.get('since') ? parseInt(searchParams.get('since')!, 10) : Date.now() - 3600000; // Default: last hour
|
||||
|
||||
const count = await persistentStore.getEventCount(since);
|
||||
|
||||
return new Response(JSON.stringify({ count, since }), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Serves cumulative metrics
|
||||
*/
|
||||
public async serveCumulativeMetrics(): Promise<Response> {
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
const metrics = persistentStore.getCumulativeMetrics();
|
||||
|
||||
return new Response(JSON.stringify(metrics), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the event log
|
||||
*/
|
||||
public async clearEventLog(): Promise<Response> {
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
const success = await persistentStore.clearEventLog();
|
||||
|
||||
return new Response(JSON.stringify({ success }), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Speedtest configuration
|
||||
private static readonly TEST_DURATION_MS = 5000; // 5 seconds per test
|
||||
private static readonly CHUNK_SIZE_KB = 64; // 64KB chunks
|
||||
|
||||
/**
|
||||
* Runs a time-based speedtest and returns the results
|
||||
* Each test (download/upload) runs for TEST_DURATION_MS, transferring chunks continuously
|
||||
*/
|
||||
public async runSpeedtest(): Promise<Response> {
|
||||
const metrics = getMetricsCollector();
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
const results: {
|
||||
latency?: { durationMs: number };
|
||||
download?: { durationMs: number; speedMbps: number; bytesTransferred: number };
|
||||
upload?: { durationMs: number; speedMbps: number; bytesTransferred: number };
|
||||
error?: string;
|
||||
isOnline: boolean;
|
||||
} = { isOnline: false };
|
||||
|
||||
// Log speedtest start
|
||||
await persistentStore.logEvent('speedtest_started', 'Speedtest initiated');
|
||||
|
||||
try {
|
||||
const sw = getServiceWorkerInstance();
|
||||
|
||||
// Check if TypedSocket is connected
|
||||
if (!sw.typedsocket) {
|
||||
results.error = 'TypedSocket not connected';
|
||||
return new Response(JSON.stringify(results), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Create typed request for speedtest
|
||||
const speedtestRequest = sw.typedsocket.createTypedRequest<
|
||||
interfaces.serviceworker.IRequest_Serviceworker_Speedtest
|
||||
>('serviceworker_speedtest');
|
||||
|
||||
// Latency test - simple ping
|
||||
const latencyStart = Date.now();
|
||||
await speedtestRequest.fire({ type: 'latency' });
|
||||
const latencyDuration = Date.now() - latencyStart;
|
||||
results.latency = { durationMs: latencyDuration };
|
||||
metrics.recordSpeedtest('latency', latencyDuration);
|
||||
results.isOnline = true;
|
||||
metrics.setOnlineStatus(true);
|
||||
|
||||
// Download test - request chunks for TEST_DURATION_MS
|
||||
{
|
||||
const downloadStart = Date.now();
|
||||
let totalBytes = 0;
|
||||
while (Date.now() - downloadStart < DashboardGenerator.TEST_DURATION_MS) {
|
||||
const chunkResult = await speedtestRequest.fire({
|
||||
type: 'download_chunk',
|
||||
chunkSizeKB: DashboardGenerator.CHUNK_SIZE_KB,
|
||||
});
|
||||
totalBytes += chunkResult.bytesTransferred;
|
||||
}
|
||||
const downloadDuration = Date.now() - downloadStart;
|
||||
const downloadSpeedMbps = downloadDuration > 0 ? (totalBytes * 8) / (downloadDuration * 1000) : 0;
|
||||
results.download = { durationMs: downloadDuration, speedMbps: downloadSpeedMbps, bytesTransferred: totalBytes };
|
||||
metrics.recordSpeedtest('download', downloadSpeedMbps);
|
||||
}
|
||||
|
||||
// Upload test - send chunks for TEST_DURATION_MS
|
||||
{
|
||||
const uploadPayload = 'x'.repeat(DashboardGenerator.CHUNK_SIZE_KB * 1024);
|
||||
const uploadStart = Date.now();
|
||||
let totalBytes = 0;
|
||||
while (Date.now() - uploadStart < DashboardGenerator.TEST_DURATION_MS) {
|
||||
const chunkResult = await speedtestRequest.fire({
|
||||
type: 'upload_chunk',
|
||||
payload: uploadPayload,
|
||||
});
|
||||
totalBytes += chunkResult.bytesTransferred;
|
||||
}
|
||||
const uploadDuration = Date.now() - uploadStart;
|
||||
const uploadSpeedMbps = uploadDuration > 0 ? (totalBytes * 8) / (uploadDuration * 1000) : 0;
|
||||
results.upload = { durationMs: uploadDuration, speedMbps: uploadSpeedMbps, bytesTransferred: totalBytes };
|
||||
metrics.recordSpeedtest('upload', uploadSpeedMbps);
|
||||
}
|
||||
|
||||
// Log speedtest completion
|
||||
await persistentStore.logEvent('speedtest_completed', 'Speedtest finished', {
|
||||
downloadMbps: results.download?.speedMbps.toFixed(2),
|
||||
uploadMbps: results.upload?.speedMbps.toFixed(2),
|
||||
latencyMs: results.latency?.durationMs,
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
results.error = error instanceof Error ? error.message : String(error);
|
||||
results.isOnline = false;
|
||||
metrics.setOnlineStatus(false);
|
||||
|
||||
// Log speedtest failure
|
||||
await persistentStore.logEvent('speedtest_failed', `Speedtest failed: ${results.error}`, {
|
||||
error: results.error,
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(JSON.stringify(results), {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Cache-Control': 'no-store',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates JSON metrics response
|
||||
*/
|
||||
public generateMetricsJson(): string {
|
||||
const metrics = getMetricsCollector();
|
||||
return JSON.stringify({
|
||||
...metrics.getMetrics(),
|
||||
cacheHitRate: metrics.getCacheHitRate(),
|
||||
networkSuccessRate: metrics.getNetworkSuccessRate(),
|
||||
resourceCount: metrics.getResourceCount(),
|
||||
summary: metrics.getSummary(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates JSON response with detailed resource data
|
||||
*/
|
||||
public generateResourcesJson(): string {
|
||||
const metrics = getMetricsCollector();
|
||||
return JSON.stringify({
|
||||
resources: metrics.getCachedResources(),
|
||||
domains: metrics.getDomainStats(),
|
||||
contentTypes: metrics.getContentTypeStats(),
|
||||
resourceCount: metrics.getResourceCount(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a minimal HTML shell that loads the Lit-based dashboard bundle
|
||||
*/
|
||||
public generateDashboardHtml(): string {
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SW Dashboard</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<sw-dash-app></sw-dash-app>
|
||||
<script type="module" src="/sw-dash/bundle.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Export singleton getter
|
||||
let dashboardInstance: DashboardGenerator | null = null;
|
||||
export const getDashboardGenerator = (): DashboardGenerator => {
|
||||
if (!dashboardInstance) {
|
||||
dashboardInstance = new DashboardGenerator();
|
||||
}
|
||||
return dashboardInstance;
|
||||
};
|
||||
333
ts_web_serviceworker/classes.errorhandler.ts
Normal file
333
ts_web_serviceworker/classes.errorhandler.ts
Normal file
@@ -0,0 +1,333 @@
|
||||
import { logger } from './logging.js';
|
||||
|
||||
/**
|
||||
* Error types for categorizing service worker errors
|
||||
*/
|
||||
export enum ServiceWorkerErrorType {
|
||||
NETWORK = 'NETWORK',
|
||||
CACHE = 'CACHE',
|
||||
UPDATE = 'UPDATE',
|
||||
CONNECTION = 'CONNECTION',
|
||||
TIMEOUT = 'TIMEOUT',
|
||||
UNKNOWN = 'UNKNOWN',
|
||||
}
|
||||
|
||||
/**
|
||||
* Error severity levels
|
||||
*/
|
||||
export enum ErrorSeverity {
|
||||
DEBUG = 'debug',
|
||||
INFO = 'info',
|
||||
WARN = 'warn',
|
||||
ERROR = 'error',
|
||||
FATAL = 'fatal',
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for error context
|
||||
*/
|
||||
export interface IErrorContext {
|
||||
url?: string;
|
||||
method?: string;
|
||||
statusCode?: number;
|
||||
attempt?: number;
|
||||
maxAttempts?: number;
|
||||
duration?: number;
|
||||
componentName?: string;
|
||||
additionalInfo?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Service Worker Error class with type categorization and context
|
||||
*/
|
||||
export class ServiceWorkerError extends Error {
|
||||
public readonly type: ServiceWorkerErrorType;
|
||||
public readonly severity: ErrorSeverity;
|
||||
public readonly context: IErrorContext;
|
||||
public readonly timestamp: number;
|
||||
public readonly originalError?: Error;
|
||||
|
||||
constructor(
|
||||
message: string,
|
||||
type: ServiceWorkerErrorType = ServiceWorkerErrorType.UNKNOWN,
|
||||
severity: ErrorSeverity = ErrorSeverity.ERROR,
|
||||
context: IErrorContext = {},
|
||||
originalError?: Error
|
||||
) {
|
||||
super(message);
|
||||
this.name = 'ServiceWorkerError';
|
||||
this.type = type;
|
||||
this.severity = severity;
|
||||
this.context = context;
|
||||
this.timestamp = Date.now();
|
||||
this.originalError = originalError;
|
||||
|
||||
// Maintain proper stack trace in V8 environments
|
||||
if (Error.captureStackTrace) {
|
||||
Error.captureStackTrace(this, ServiceWorkerError);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a formatted log message
|
||||
*/
|
||||
public toLogMessage(): string {
|
||||
const parts = [
|
||||
`[${this.type}]`,
|
||||
this.message,
|
||||
];
|
||||
|
||||
if (this.context.url) {
|
||||
parts.push(`URL: ${this.context.url}`);
|
||||
}
|
||||
if (this.context.method) {
|
||||
parts.push(`Method: ${this.context.method}`);
|
||||
}
|
||||
if (this.context.statusCode !== undefined) {
|
||||
parts.push(`Status: ${this.context.statusCode}`);
|
||||
}
|
||||
if (this.context.attempt !== undefined && this.context.maxAttempts !== undefined) {
|
||||
parts.push(`Attempt: ${this.context.attempt}/${this.context.maxAttempts}`);
|
||||
}
|
||||
if (this.context.duration !== undefined) {
|
||||
parts.push(`Duration: ${this.context.duration}ms`);
|
||||
}
|
||||
|
||||
return parts.join(' | ');
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts to a plain object for serialization
|
||||
*/
|
||||
public toJSON(): Record<string, unknown> {
|
||||
return {
|
||||
name: this.name,
|
||||
message: this.message,
|
||||
type: this.type,
|
||||
severity: this.severity,
|
||||
context: this.context,
|
||||
timestamp: this.timestamp,
|
||||
stack: this.stack,
|
||||
originalError: this.originalError?.message,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Error handler for consistent error handling across service worker components
|
||||
*/
|
||||
export class ErrorHandler {
|
||||
private static instance: ErrorHandler;
|
||||
private errorHistory: ServiceWorkerError[] = [];
|
||||
private readonly maxHistorySize = 100;
|
||||
|
||||
private constructor() {}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance
|
||||
*/
|
||||
public static getInstance(): ErrorHandler {
|
||||
if (!ErrorHandler.instance) {
|
||||
ErrorHandler.instance = new ErrorHandler();
|
||||
}
|
||||
return ErrorHandler.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles an error with consistent logging and tracking
|
||||
*/
|
||||
public handle(
|
||||
error: Error | ServiceWorkerError | string,
|
||||
type: ServiceWorkerErrorType = ServiceWorkerErrorType.UNKNOWN,
|
||||
severity: ErrorSeverity = ErrorSeverity.ERROR,
|
||||
context: IErrorContext = {}
|
||||
): ServiceWorkerError {
|
||||
let swError: ServiceWorkerError;
|
||||
|
||||
if (error instanceof ServiceWorkerError) {
|
||||
swError = error;
|
||||
} else if (error instanceof Error) {
|
||||
swError = new ServiceWorkerError(error.message, type, severity, context, error);
|
||||
} else {
|
||||
swError = new ServiceWorkerError(String(error), type, severity, context);
|
||||
}
|
||||
|
||||
// Log the error
|
||||
this.logError(swError);
|
||||
|
||||
// Track the error
|
||||
this.trackError(swError);
|
||||
|
||||
return swError;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and handles a network error
|
||||
*/
|
||||
public handleNetworkError(
|
||||
message: string,
|
||||
url: string,
|
||||
originalError?: Error,
|
||||
context: Partial<IErrorContext> = {}
|
||||
): ServiceWorkerError {
|
||||
return this.handle(
|
||||
originalError || message,
|
||||
ServiceWorkerErrorType.NETWORK,
|
||||
ErrorSeverity.WARN,
|
||||
{ url, ...context }
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and handles a cache error
|
||||
*/
|
||||
public handleCacheError(
|
||||
message: string,
|
||||
url?: string,
|
||||
originalError?: Error,
|
||||
context: Partial<IErrorContext> = {}
|
||||
): ServiceWorkerError {
|
||||
return this.handle(
|
||||
originalError || message,
|
||||
ServiceWorkerErrorType.CACHE,
|
||||
ErrorSeverity.ERROR,
|
||||
{ url, ...context }
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and handles an update error
|
||||
*/
|
||||
public handleUpdateError(
|
||||
message: string,
|
||||
originalError?: Error,
|
||||
context: Partial<IErrorContext> = {}
|
||||
): ServiceWorkerError {
|
||||
return this.handle(
|
||||
originalError || message,
|
||||
ServiceWorkerErrorType.UPDATE,
|
||||
ErrorSeverity.ERROR,
|
||||
context
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and handles a connection error
|
||||
*/
|
||||
public handleConnectionError(
|
||||
message: string,
|
||||
originalError?: Error,
|
||||
context: Partial<IErrorContext> = {}
|
||||
): ServiceWorkerError {
|
||||
return this.handle(
|
||||
originalError || message,
|
||||
ServiceWorkerErrorType.CONNECTION,
|
||||
ErrorSeverity.WARN,
|
||||
context
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and handles a timeout error
|
||||
*/
|
||||
public handleTimeoutError(
|
||||
message: string,
|
||||
url?: string,
|
||||
duration?: number,
|
||||
context: Partial<IErrorContext> = {}
|
||||
): ServiceWorkerError {
|
||||
return this.handle(
|
||||
message,
|
||||
ServiceWorkerErrorType.TIMEOUT,
|
||||
ErrorSeverity.WARN,
|
||||
{ url, duration, ...context }
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the error history
|
||||
*/
|
||||
public getErrorHistory(): ServiceWorkerError[] {
|
||||
return [...this.errorHistory];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets errors by type
|
||||
*/
|
||||
public getErrorsByType(type: ServiceWorkerErrorType): ServiceWorkerError[] {
|
||||
return this.errorHistory.filter((e) => e.type === type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets errors within a time range
|
||||
*/
|
||||
public getRecentErrors(withinMs: number): ServiceWorkerError[] {
|
||||
const cutoff = Date.now() - withinMs;
|
||||
return this.errorHistory.filter((e) => e.timestamp >= cutoff);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the error history
|
||||
*/
|
||||
public clearHistory(): void {
|
||||
this.errorHistory = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets error statistics
|
||||
*/
|
||||
public getStats(): Record<ServiceWorkerErrorType, number> {
|
||||
const stats: Record<ServiceWorkerErrorType, number> = {
|
||||
[ServiceWorkerErrorType.NETWORK]: 0,
|
||||
[ServiceWorkerErrorType.CACHE]: 0,
|
||||
[ServiceWorkerErrorType.UPDATE]: 0,
|
||||
[ServiceWorkerErrorType.CONNECTION]: 0,
|
||||
[ServiceWorkerErrorType.TIMEOUT]: 0,
|
||||
[ServiceWorkerErrorType.UNKNOWN]: 0,
|
||||
};
|
||||
|
||||
for (const error of this.errorHistory) {
|
||||
stats[error.type]++;
|
||||
}
|
||||
|
||||
return stats;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logs an error with the appropriate severity
|
||||
*/
|
||||
private logError(error: ServiceWorkerError): void {
|
||||
const logMessage = error.toLogMessage();
|
||||
|
||||
switch (error.severity) {
|
||||
case ErrorSeverity.DEBUG:
|
||||
logger.log('note', logMessage);
|
||||
break;
|
||||
case ErrorSeverity.INFO:
|
||||
logger.log('info', logMessage);
|
||||
break;
|
||||
case ErrorSeverity.WARN:
|
||||
logger.log('warn', logMessage);
|
||||
break;
|
||||
case ErrorSeverity.ERROR:
|
||||
case ErrorSeverity.FATAL:
|
||||
logger.log('error', logMessage);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tracks an error in the history
|
||||
*/
|
||||
private trackError(error: ServiceWorkerError): void {
|
||||
this.errorHistory.push(error);
|
||||
|
||||
// Trim history if needed
|
||||
if (this.errorHistory.length > this.maxHistorySize) {
|
||||
this.errorHistory = this.errorHistory.slice(-this.maxHistorySize);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter for convenience
|
||||
export const getErrorHandler = (): ErrorHandler => ErrorHandler.getInstance();
|
||||
409
ts_web_serviceworker/classes.eventbus.ts
Normal file
409
ts_web_serviceworker/classes.eventbus.ts
Normal file
@@ -0,0 +1,409 @@
|
||||
import { logger } from './logging.js';
|
||||
|
||||
/**
|
||||
* Event types for service worker internal communication
|
||||
*/
|
||||
export enum ServiceWorkerEvent {
|
||||
// Cache events
|
||||
CACHE_HIT = 'cache:hit',
|
||||
CACHE_MISS = 'cache:miss',
|
||||
CACHE_ERROR = 'cache:error',
|
||||
CACHE_INVALIDATE = 'cache:invalidate',
|
||||
CACHE_INVALIDATE_ALL = 'cache:invalidate_all',
|
||||
CACHE_REVALIDATE = 'cache:revalidate',
|
||||
|
||||
// Update events
|
||||
UPDATE_CHECK_START = 'update:check_start',
|
||||
UPDATE_CHECK_COMPLETE = 'update:check_complete',
|
||||
UPDATE_AVAILABLE = 'update:available',
|
||||
UPDATE_APPLIED = 'update:applied',
|
||||
UPDATE_ERROR = 'update:error',
|
||||
|
||||
// Network events
|
||||
NETWORK_REQUEST_START = 'network:request_start',
|
||||
NETWORK_REQUEST_COMPLETE = 'network:request_complete',
|
||||
NETWORK_REQUEST_ERROR = 'network:request_error',
|
||||
NETWORK_ONLINE = 'network:online',
|
||||
NETWORK_OFFLINE = 'network:offline',
|
||||
|
||||
// Connection events
|
||||
CLIENT_CONNECTED = 'connection:client_connected',
|
||||
CLIENT_DISCONNECTED = 'connection:client_disconnected',
|
||||
|
||||
// Lifecycle events
|
||||
INSTALL = 'lifecycle:install',
|
||||
ACTIVATE = 'lifecycle:activate',
|
||||
READY = 'lifecycle:ready',
|
||||
}
|
||||
|
||||
/**
|
||||
* Event payload interfaces
|
||||
*/
|
||||
export interface ICacheEventPayload {
|
||||
url: string;
|
||||
method?: string;
|
||||
bytes?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface IUpdateEventPayload {
|
||||
oldVersion?: string;
|
||||
newVersion?: string;
|
||||
oldHash?: string;
|
||||
newHash?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface INetworkEventPayload {
|
||||
url: string;
|
||||
method?: string;
|
||||
status?: number;
|
||||
duration?: number;
|
||||
bytes?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface IConnectionEventPayload {
|
||||
clientId?: string;
|
||||
tabId?: string;
|
||||
}
|
||||
|
||||
export interface ILifecycleEventPayload {
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Union type for all event payloads
|
||||
*/
|
||||
export type TEventPayload =
|
||||
| ICacheEventPayload
|
||||
| IUpdateEventPayload
|
||||
| INetworkEventPayload
|
||||
| IConnectionEventPayload
|
||||
| ILifecycleEventPayload
|
||||
| Record<string, unknown>;
|
||||
|
||||
/**
|
||||
* Event listener callback type
|
||||
*/
|
||||
export type TEventListener<T extends TEventPayload = TEventPayload> = (
|
||||
event: ServiceWorkerEvent,
|
||||
payload: T
|
||||
) => void | Promise<void>;
|
||||
|
||||
/**
|
||||
* Subscription interface
|
||||
*/
|
||||
export interface ISubscription {
|
||||
unsubscribe: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event bus for decoupled communication between service worker components.
|
||||
* Implements a simple pub/sub pattern.
|
||||
*/
|
||||
export class EventBus {
|
||||
private static instance: EventBus;
|
||||
private listeners: Map<ServiceWorkerEvent, Set<TEventListener>>;
|
||||
private globalListeners: Set<TEventListener>;
|
||||
private eventHistory: Array<{ event: ServiceWorkerEvent; payload: TEventPayload; timestamp: number }>;
|
||||
private readonly maxHistorySize = 100;
|
||||
private debugMode = false;
|
||||
|
||||
private constructor() {
|
||||
this.listeners = new Map();
|
||||
this.globalListeners = new Set();
|
||||
this.eventHistory = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance
|
||||
*/
|
||||
public static getInstance(): EventBus {
|
||||
if (!EventBus.instance) {
|
||||
EventBus.instance = new EventBus();
|
||||
}
|
||||
return EventBus.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables or disables debug mode (logs all events)
|
||||
*/
|
||||
public setDebugMode(enabled: boolean): void {
|
||||
this.debugMode = enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits an event to all subscribed listeners
|
||||
*/
|
||||
public emit<T extends TEventPayload>(event: ServiceWorkerEvent, payload: T): void {
|
||||
if (this.debugMode) {
|
||||
logger.log('note', `[EventBus] Emit: ${event} ${JSON.stringify(payload)}`);
|
||||
}
|
||||
|
||||
// Record in history
|
||||
this.recordEvent(event, payload);
|
||||
|
||||
// Notify specific listeners
|
||||
const specificListeners = this.listeners.get(event);
|
||||
if (specificListeners) {
|
||||
for (const listener of specificListeners) {
|
||||
try {
|
||||
const result = listener(event, payload);
|
||||
if (result instanceof Promise) {
|
||||
result.catch((err) => {
|
||||
logger.log('error', `[EventBus] Async listener error for ${event}: ${err}`);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `[EventBus] Listener error for ${event}: ${err}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notify global listeners
|
||||
for (const listener of this.globalListeners) {
|
||||
try {
|
||||
const result = listener(event, payload);
|
||||
if (result instanceof Promise) {
|
||||
result.catch((err) => {
|
||||
logger.log('error', `[EventBus] Global async listener error for ${event}: ${err}`);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `[EventBus] Global listener error for ${event}: ${err}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to a specific event
|
||||
*/
|
||||
public on<T extends TEventPayload>(
|
||||
event: ServiceWorkerEvent,
|
||||
listener: TEventListener<T>
|
||||
): ISubscription {
|
||||
if (!this.listeners.has(event)) {
|
||||
this.listeners.set(event, new Set());
|
||||
}
|
||||
|
||||
this.listeners.get(event)!.add(listener as TEventListener);
|
||||
|
||||
return {
|
||||
unsubscribe: () => {
|
||||
this.off(event, listener as TEventListener);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to multiple events at once
|
||||
*/
|
||||
public onMany<T extends TEventPayload>(
|
||||
events: ServiceWorkerEvent[],
|
||||
listener: TEventListener<T>
|
||||
): ISubscription {
|
||||
const subscriptions = events.map((event) =>
|
||||
this.on(event, listener as TEventListener)
|
||||
);
|
||||
|
||||
return {
|
||||
unsubscribe: () => {
|
||||
subscriptions.forEach((sub) => sub.unsubscribe());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to all events
|
||||
*/
|
||||
public onAll<T extends TEventPayload>(listener: TEventListener<T>): ISubscription {
|
||||
this.globalListeners.add(listener as TEventListener);
|
||||
|
||||
return {
|
||||
unsubscribe: () => {
|
||||
this.globalListeners.delete(listener as TEventListener);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Subscribes to an event for only one emission
|
||||
*/
|
||||
public once<T extends TEventPayload>(
|
||||
event: ServiceWorkerEvent,
|
||||
listener: TEventListener<T>
|
||||
): ISubscription {
|
||||
const onceListener: TEventListener = (evt, payload) => {
|
||||
this.off(event, onceListener);
|
||||
return listener(evt, payload as T);
|
||||
};
|
||||
|
||||
return this.on(event, onceListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unsubscribes a listener from an event
|
||||
*/
|
||||
public off(event: ServiceWorkerEvent, listener: TEventListener): void {
|
||||
const listeners = this.listeners.get(event);
|
||||
if (listeners) {
|
||||
listeners.delete(listener);
|
||||
if (listeners.size === 0) {
|
||||
this.listeners.delete(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes all listeners for an event
|
||||
*/
|
||||
public removeAllListeners(event?: ServiceWorkerEvent): void {
|
||||
if (event) {
|
||||
this.listeners.delete(event);
|
||||
} else {
|
||||
this.listeners.clear();
|
||||
this.globalListeners.clear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the count of listeners for an event
|
||||
*/
|
||||
public listenerCount(event: ServiceWorkerEvent): number {
|
||||
const listeners = this.listeners.get(event);
|
||||
return (listeners?.size ?? 0) + this.globalListeners.size;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the event history
|
||||
*/
|
||||
public getHistory(): Array<{ event: ServiceWorkerEvent; payload: TEventPayload; timestamp: number }> {
|
||||
return [...this.eventHistory];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets events of a specific type from history
|
||||
*/
|
||||
public getHistoryByType(event: ServiceWorkerEvent): Array<{ payload: TEventPayload; timestamp: number }> {
|
||||
return this.eventHistory
|
||||
.filter((entry) => entry.event === event)
|
||||
.map(({ payload, timestamp }) => ({ payload, timestamp }));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears the event history
|
||||
*/
|
||||
public clearHistory(): void {
|
||||
this.eventHistory = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Waits for an event to be emitted (returns a promise)
|
||||
*/
|
||||
public waitFor<T extends TEventPayload>(
|
||||
event: ServiceWorkerEvent,
|
||||
timeout?: number
|
||||
): Promise<T> {
|
||||
return new Promise((resolve, reject) => {
|
||||
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
const subscription = this.once<T>(event, (_, payload) => {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
resolve(payload);
|
||||
});
|
||||
|
||||
if (timeout) {
|
||||
timeoutId = setTimeout(() => {
|
||||
subscription.unsubscribe();
|
||||
reject(new Error(`Timeout waiting for event: ${event}`));
|
||||
}, timeout);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Records an event in history
|
||||
*/
|
||||
private recordEvent(event: ServiceWorkerEvent, payload: TEventPayload): void {
|
||||
this.eventHistory.push({
|
||||
event,
|
||||
payload,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// Trim history if needed
|
||||
if (this.eventHistory.length > this.maxHistorySize) {
|
||||
this.eventHistory = this.eventHistory.slice(-this.maxHistorySize);
|
||||
}
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Convenience Methods
|
||||
// ===================
|
||||
|
||||
/**
|
||||
* Emits a cache hit event
|
||||
*/
|
||||
public emitCacheHit(url: string, bytes?: number): void {
|
||||
this.emit(ServiceWorkerEvent.CACHE_HIT, { url, bytes });
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a cache miss event
|
||||
*/
|
||||
public emitCacheMiss(url: string): void {
|
||||
this.emit(ServiceWorkerEvent.CACHE_MISS, { url });
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a cache error event
|
||||
*/
|
||||
public emitCacheError(url: string, error?: string): void {
|
||||
this.emit(ServiceWorkerEvent.CACHE_ERROR, { url, error });
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a cache invalidation event
|
||||
*/
|
||||
public emitCacheInvalidate(url?: string): void {
|
||||
if (url) {
|
||||
this.emit(ServiceWorkerEvent.CACHE_INVALIDATE, { url });
|
||||
} else {
|
||||
this.emit(ServiceWorkerEvent.CACHE_INVALIDATE_ALL, {});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits an update available event
|
||||
*/
|
||||
public emitUpdateAvailable(oldVersion: string, newVersion: string, oldHash: string, newHash: string): void {
|
||||
this.emit(ServiceWorkerEvent.UPDATE_AVAILABLE, { oldVersion, newVersion, oldHash, newHash });
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits an update applied event
|
||||
*/
|
||||
public emitUpdateApplied(newVersion: string, newHash: string): void {
|
||||
this.emit(ServiceWorkerEvent.UPDATE_APPLIED, { newVersion, newHash });
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a network online event
|
||||
*/
|
||||
public emitNetworkOnline(): void {
|
||||
this.emit(ServiceWorkerEvent.NETWORK_ONLINE, {});
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits a network offline event
|
||||
*/
|
||||
public emitNetworkOffline(): void {
|
||||
this.emit(ServiceWorkerEvent.NETWORK_OFFLINE, {});
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter for convenience
|
||||
export const getEventBus = (): EventBus => EventBus.getInstance();
|
||||
697
ts_web_serviceworker/classes.metrics.ts
Normal file
697
ts_web_serviceworker/classes.metrics.ts
Normal file
@@ -0,0 +1,697 @@
|
||||
import { logger } from './logging.js';
|
||||
import { getServiceWorkerBackend } from './init.js';
|
||||
|
||||
/**
|
||||
* Interface for cache metrics
|
||||
*/
|
||||
export interface ICacheMetrics {
|
||||
hits: number;
|
||||
misses: number;
|
||||
errors: number;
|
||||
bytesServedFromCache: number;
|
||||
bytesFetched: number;
|
||||
averageResponseTime: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for per-resource tracking
|
||||
*/
|
||||
export interface ICachedResource {
|
||||
url: string;
|
||||
domain: string;
|
||||
contentType: string;
|
||||
size: number;
|
||||
hitCount: number;
|
||||
missCount: number;
|
||||
lastAccessed: number;
|
||||
cachedAt: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for domain statistics
|
||||
*/
|
||||
export interface IDomainStats {
|
||||
domain: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for content-type statistics
|
||||
*/
|
||||
export interface IContentTypeStats {
|
||||
contentType: string;
|
||||
totalResources: number;
|
||||
totalSize: number;
|
||||
totalHits: number;
|
||||
totalMisses: number;
|
||||
hitRate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for network metrics
|
||||
*/
|
||||
export interface INetworkMetrics {
|
||||
totalRequests: number;
|
||||
successfulRequests: number;
|
||||
failedRequests: number;
|
||||
timeouts: number;
|
||||
averageLatency: number;
|
||||
totalBytesTransferred: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for update metrics
|
||||
*/
|
||||
export interface IUpdateMetrics {
|
||||
totalChecks: number;
|
||||
successfulChecks: number;
|
||||
failedChecks: number;
|
||||
updatesFound: number;
|
||||
updatesApplied: number;
|
||||
lastCheckTimestamp: number;
|
||||
lastUpdateTimestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for connection metrics
|
||||
*/
|
||||
export interface IConnectionMetrics {
|
||||
connectedClients: number;
|
||||
totalConnectionAttempts: number;
|
||||
successfulConnections: number;
|
||||
failedConnections: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Interface for speedtest metrics
|
||||
*/
|
||||
export interface ISpeedtestMetrics {
|
||||
lastDownloadSpeedMbps: number;
|
||||
lastUploadSpeedMbps: number;
|
||||
lastLatencyMs: number;
|
||||
lastTestTimestamp: number;
|
||||
testCount: number;
|
||||
isOnline: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Combined metrics interface
|
||||
*/
|
||||
export interface IServiceWorkerMetrics {
|
||||
cache: ICacheMetrics;
|
||||
network: INetworkMetrics;
|
||||
update: IUpdateMetrics;
|
||||
connection: IConnectionMetrics;
|
||||
speedtest: ISpeedtestMetrics;
|
||||
startTime: number;
|
||||
uptime: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Response time entry for calculating averages
|
||||
*/
|
||||
interface IResponseTimeEntry {
|
||||
url: string;
|
||||
duration: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metrics collector for service worker observability
|
||||
*/
|
||||
export class MetricsCollector {
|
||||
private static instance: MetricsCollector;
|
||||
|
||||
// Cache metrics
|
||||
private cacheHits = 0;
|
||||
private cacheMisses = 0;
|
||||
private cacheErrors = 0;
|
||||
private bytesServedFromCache = 0;
|
||||
private bytesFetched = 0;
|
||||
|
||||
// Network metrics
|
||||
private totalRequests = 0;
|
||||
private successfulRequests = 0;
|
||||
private failedRequests = 0;
|
||||
private timeouts = 0;
|
||||
private totalBytesTransferred = 0;
|
||||
|
||||
// Update metrics
|
||||
private totalUpdateChecks = 0;
|
||||
private successfulUpdateChecks = 0;
|
||||
private failedUpdateChecks = 0;
|
||||
private updatesFound = 0;
|
||||
private updatesApplied = 0;
|
||||
private lastCheckTimestamp = 0;
|
||||
private lastUpdateTimestamp = 0;
|
||||
|
||||
// Connection metrics
|
||||
private connectedClients = 0;
|
||||
private totalConnectionAttempts = 0;
|
||||
private successfulConnections = 0;
|
||||
private failedConnections = 0;
|
||||
|
||||
// Speedtest metrics
|
||||
private lastDownloadSpeedMbps = 0;
|
||||
private lastUploadSpeedMbps = 0;
|
||||
private lastLatencyMs = 0;
|
||||
private lastSpeedtestTimestamp = 0;
|
||||
private speedtestCount = 0;
|
||||
private isOnline = true;
|
||||
|
||||
// Response time tracking
|
||||
private responseTimes: IResponseTimeEntry[] = [];
|
||||
private readonly maxResponseTimeEntries = 1000;
|
||||
private readonly responseTimeWindow = 5 * 60 * 1000; // 5 minutes
|
||||
|
||||
// Per-resource tracking
|
||||
private resourceStats: Map<string, ICachedResource> = new Map();
|
||||
private readonly maxResourceEntries = 500;
|
||||
|
||||
// Start time
|
||||
private readonly startTime: number;
|
||||
|
||||
private constructor() {
|
||||
this.startTime = Date.now();
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggers a push metrics update to all connected clients (throttled in backend)
|
||||
*/
|
||||
private triggerPushUpdate(): void {
|
||||
try {
|
||||
const backend = getServiceWorkerBackend();
|
||||
if (backend) {
|
||||
backend.pushMetricsUpdate();
|
||||
}
|
||||
} catch (error) {
|
||||
// Silently ignore - push is best-effort
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance
|
||||
*/
|
||||
public static getInstance(): MetricsCollector {
|
||||
if (!MetricsCollector.instance) {
|
||||
MetricsCollector.instance = new MetricsCollector();
|
||||
}
|
||||
return MetricsCollector.instance;
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Cache Metrics
|
||||
// ===================
|
||||
|
||||
public recordCacheHit(url: string, bytes: number = 0): void {
|
||||
this.cacheHits++;
|
||||
this.bytesServedFromCache += bytes;
|
||||
logger.log('note', `[Metrics] Cache hit: ${url} (${bytes} bytes)`);
|
||||
this.triggerPushUpdate();
|
||||
}
|
||||
|
||||
public recordCacheMiss(url: string): void {
|
||||
this.cacheMisses++;
|
||||
logger.log('note', `[Metrics] Cache miss: ${url}`);
|
||||
this.triggerPushUpdate();
|
||||
}
|
||||
|
||||
public recordCacheError(url: string, error?: string): void {
|
||||
this.cacheErrors++;
|
||||
logger.log('warn', `[Metrics] Cache error: ${url} - ${error || 'unknown'}`);
|
||||
}
|
||||
|
||||
public recordBytesFetched(bytes: number): void {
|
||||
this.bytesFetched += bytes;
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Network Metrics
|
||||
// ===================
|
||||
|
||||
public recordRequest(_url: string): void {
|
||||
this.totalRequests++;
|
||||
}
|
||||
|
||||
public recordRequestSuccess(url: string, duration: number, bytes: number = 0): void {
|
||||
this.successfulRequests++;
|
||||
this.totalBytesTransferred += bytes;
|
||||
this.recordResponseTime(url, duration);
|
||||
this.triggerPushUpdate();
|
||||
}
|
||||
|
||||
public recordRequestFailure(url: string, error?: string): void {
|
||||
this.failedRequests++;
|
||||
logger.log('warn', `[Metrics] Request failed: ${url} - ${error || 'unknown'}`);
|
||||
this.triggerPushUpdate();
|
||||
}
|
||||
|
||||
public recordTimeout(url: string, duration: number): void {
|
||||
this.timeouts++;
|
||||
logger.log('warn', `[Metrics] Request timeout: ${url} after ${duration}ms`);
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Update Metrics
|
||||
// ===================
|
||||
|
||||
public recordUpdateCheck(success: boolean): void {
|
||||
this.totalUpdateChecks++;
|
||||
this.lastCheckTimestamp = Date.now();
|
||||
if (success) {
|
||||
this.successfulUpdateChecks++;
|
||||
} else {
|
||||
this.failedUpdateChecks++;
|
||||
}
|
||||
}
|
||||
|
||||
public recordUpdateFound(): void {
|
||||
this.updatesFound++;
|
||||
}
|
||||
|
||||
public recordUpdateApplied(): void {
|
||||
this.updatesApplied++;
|
||||
this.lastUpdateTimestamp = Date.now();
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Connection Metrics
|
||||
// ===================
|
||||
|
||||
public recordConnectionAttempt(): void {
|
||||
this.totalConnectionAttempts++;
|
||||
}
|
||||
|
||||
public recordConnectionSuccess(): void {
|
||||
this.successfulConnections++;
|
||||
this.connectedClients++;
|
||||
}
|
||||
|
||||
public recordConnectionFailure(): void {
|
||||
this.failedConnections++;
|
||||
}
|
||||
|
||||
public recordClientDisconnect(): void {
|
||||
this.connectedClients = Math.max(0, this.connectedClients - 1);
|
||||
}
|
||||
|
||||
public setConnectedClients(count: number): void {
|
||||
this.connectedClients = count;
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Speedtest Metrics
|
||||
// ===================
|
||||
|
||||
public recordSpeedtest(type: 'download' | 'upload' | 'latency', value: number): void {
|
||||
this.speedtestCount++;
|
||||
this.lastSpeedtestTimestamp = Date.now();
|
||||
this.isOnline = true;
|
||||
|
||||
switch (type) {
|
||||
case 'download':
|
||||
this.lastDownloadSpeedMbps = value;
|
||||
logger.log('info', `[Metrics] Speedtest download: ${value.toFixed(2)} Mbps`);
|
||||
break;
|
||||
case 'upload':
|
||||
this.lastUploadSpeedMbps = value;
|
||||
logger.log('info', `[Metrics] Speedtest upload: ${value.toFixed(2)} Mbps`);
|
||||
break;
|
||||
case 'latency':
|
||||
this.lastLatencyMs = value;
|
||||
logger.log('info', `[Metrics] Speedtest latency: ${value.toFixed(0)} ms`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public setOnlineStatus(online: boolean): void {
|
||||
this.isOnline = online;
|
||||
logger.log('info', `[Metrics] Online status: ${online ? 'online' : 'offline'}`);
|
||||
}
|
||||
|
||||
public getSpeedtestMetrics(): ISpeedtestMetrics {
|
||||
return {
|
||||
lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
|
||||
lastUploadSpeedMbps: this.lastUploadSpeedMbps,
|
||||
lastLatencyMs: this.lastLatencyMs,
|
||||
lastTestTimestamp: this.lastSpeedtestTimestamp,
|
||||
testCount: this.speedtestCount,
|
||||
isOnline: this.isOnline,
|
||||
};
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Response Time Tracking
|
||||
// ===================
|
||||
|
||||
private recordResponseTime(url: string, duration: number): void {
|
||||
const entry: IResponseTimeEntry = {
|
||||
url,
|
||||
duration,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
this.responseTimes.push(entry);
|
||||
|
||||
// Trim old entries
|
||||
this.cleanupResponseTimes();
|
||||
}
|
||||
|
||||
private cleanupResponseTimes(): void {
|
||||
const cutoff = Date.now() - this.responseTimeWindow;
|
||||
|
||||
// Remove old entries
|
||||
this.responseTimes = this.responseTimes.filter(
|
||||
(entry) => entry.timestamp >= cutoff
|
||||
);
|
||||
|
||||
// Keep within max size
|
||||
if (this.responseTimes.length > this.maxResponseTimeEntries) {
|
||||
this.responseTimes = this.responseTimes.slice(-this.maxResponseTimeEntries);
|
||||
}
|
||||
}
|
||||
|
||||
private calculateAverageResponseTime(): number {
|
||||
if (this.responseTimes.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const sum = this.responseTimes.reduce((acc, entry) => acc + entry.duration, 0);
|
||||
return Math.round(sum / this.responseTimes.length);
|
||||
}
|
||||
|
||||
private calculateAverageLatency(): number {
|
||||
// Same as response time for now
|
||||
return this.calculateAverageResponseTime();
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Metrics Retrieval
|
||||
// ===================
|
||||
|
||||
/**
|
||||
* Gets all metrics
|
||||
*/
|
||||
public getMetrics(): IServiceWorkerMetrics {
|
||||
const now = Date.now();
|
||||
this.cleanupResponseTimes();
|
||||
|
||||
return {
|
||||
cache: {
|
||||
hits: this.cacheHits,
|
||||
misses: this.cacheMisses,
|
||||
errors: this.cacheErrors,
|
||||
bytesServedFromCache: this.bytesServedFromCache,
|
||||
bytesFetched: this.bytesFetched,
|
||||
averageResponseTime: this.calculateAverageResponseTime(),
|
||||
},
|
||||
network: {
|
||||
totalRequests: this.totalRequests,
|
||||
successfulRequests: this.successfulRequests,
|
||||
failedRequests: this.failedRequests,
|
||||
timeouts: this.timeouts,
|
||||
averageLatency: this.calculateAverageLatency(),
|
||||
totalBytesTransferred: this.totalBytesTransferred,
|
||||
},
|
||||
update: {
|
||||
totalChecks: this.totalUpdateChecks,
|
||||
successfulChecks: this.successfulUpdateChecks,
|
||||
failedChecks: this.failedUpdateChecks,
|
||||
updatesFound: this.updatesFound,
|
||||
updatesApplied: this.updatesApplied,
|
||||
lastCheckTimestamp: this.lastCheckTimestamp,
|
||||
lastUpdateTimestamp: this.lastUpdateTimestamp,
|
||||
},
|
||||
connection: {
|
||||
connectedClients: this.connectedClients,
|
||||
totalConnectionAttempts: this.totalConnectionAttempts,
|
||||
successfulConnections: this.successfulConnections,
|
||||
failedConnections: this.failedConnections,
|
||||
},
|
||||
speedtest: {
|
||||
lastDownloadSpeedMbps: this.lastDownloadSpeedMbps,
|
||||
lastUploadSpeedMbps: this.lastUploadSpeedMbps,
|
||||
lastLatencyMs: this.lastLatencyMs,
|
||||
lastTestTimestamp: this.lastSpeedtestTimestamp,
|
||||
testCount: this.speedtestCount,
|
||||
isOnline: this.isOnline,
|
||||
},
|
||||
startTime: this.startTime,
|
||||
uptime: now - this.startTime,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets cache hit rate as a percentage
|
||||
*/
|
||||
public getCacheHitRate(): number {
|
||||
const total = this.cacheHits + this.cacheMisses;
|
||||
if (total === 0) {
|
||||
return 0;
|
||||
}
|
||||
return Math.round((this.cacheHits / total) * 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets network success rate as a percentage
|
||||
*/
|
||||
public getNetworkSuccessRate(): number {
|
||||
if (this.totalRequests === 0) {
|
||||
return 100;
|
||||
}
|
||||
return Math.round((this.successfulRequests / this.totalRequests) * 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets all metrics
|
||||
*/
|
||||
public reset(): void {
|
||||
this.cacheHits = 0;
|
||||
this.cacheMisses = 0;
|
||||
this.cacheErrors = 0;
|
||||
this.bytesServedFromCache = 0;
|
||||
this.bytesFetched = 0;
|
||||
|
||||
this.totalRequests = 0;
|
||||
this.successfulRequests = 0;
|
||||
this.failedRequests = 0;
|
||||
this.timeouts = 0;
|
||||
this.totalBytesTransferred = 0;
|
||||
|
||||
this.totalUpdateChecks = 0;
|
||||
this.successfulUpdateChecks = 0;
|
||||
this.failedUpdateChecks = 0;
|
||||
this.updatesFound = 0;
|
||||
this.updatesApplied = 0;
|
||||
this.lastCheckTimestamp = 0;
|
||||
this.lastUpdateTimestamp = 0;
|
||||
|
||||
this.totalConnectionAttempts = 0;
|
||||
this.successfulConnections = 0;
|
||||
this.failedConnections = 0;
|
||||
|
||||
this.lastDownloadSpeedMbps = 0;
|
||||
this.lastUploadSpeedMbps = 0;
|
||||
this.lastLatencyMs = 0;
|
||||
this.lastSpeedtestTimestamp = 0;
|
||||
this.speedtestCount = 0;
|
||||
// Note: isOnline is not reset as it reflects current state
|
||||
|
||||
this.responseTimes = [];
|
||||
this.resourceStats.clear();
|
||||
|
||||
logger.log('info', '[Metrics] All metrics reset');
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a summary string for logging
|
||||
*/
|
||||
public getSummary(): string {
|
||||
const metrics = this.getMetrics();
|
||||
return [
|
||||
`Cache: ${this.getCacheHitRate()}% hit rate (${metrics.cache.hits}/${metrics.cache.hits + metrics.cache.misses})`,
|
||||
`Network: ${this.getNetworkSuccessRate()}% success (${metrics.network.successfulRequests}/${metrics.network.totalRequests})`,
|
||||
`Updates: ${metrics.update.updatesFound} found, ${metrics.update.updatesApplied} applied`,
|
||||
`Uptime: ${Math.round(metrics.uptime / 1000)}s`,
|
||||
].join(' | ');
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Per-Resource Tracking
|
||||
// ===================
|
||||
|
||||
/**
|
||||
* Extracts domain from URL
|
||||
*/
|
||||
private extractDomain(url: string): string {
|
||||
try {
|
||||
const parsedUrl = new URL(url);
|
||||
return parsedUrl.hostname;
|
||||
} catch {
|
||||
return 'unknown';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Records a resource access (cache hit or miss) with details
|
||||
*/
|
||||
public recordResourceAccess(
|
||||
url: string,
|
||||
isHit: boolean,
|
||||
contentType: string = 'unknown',
|
||||
size: number = 0
|
||||
): void {
|
||||
const now = Date.now();
|
||||
const domain = this.extractDomain(url);
|
||||
|
||||
let resource = this.resourceStats.get(url);
|
||||
|
||||
if (!resource) {
|
||||
resource = {
|
||||
url,
|
||||
domain,
|
||||
contentType,
|
||||
size,
|
||||
hitCount: 0,
|
||||
missCount: 0,
|
||||
lastAccessed: now,
|
||||
cachedAt: now,
|
||||
};
|
||||
this.resourceStats.set(url, resource);
|
||||
}
|
||||
|
||||
// Update resource stats
|
||||
if (isHit) {
|
||||
resource.hitCount++;
|
||||
} else {
|
||||
resource.missCount++;
|
||||
}
|
||||
resource.lastAccessed = now;
|
||||
|
||||
// Update content-type and size if provided (may come from response headers)
|
||||
if (contentType !== 'unknown') {
|
||||
resource.contentType = contentType;
|
||||
}
|
||||
if (size > 0) {
|
||||
resource.size = size;
|
||||
}
|
||||
|
||||
// Trim old entries if needed
|
||||
this.cleanupResourceStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleans up old resource entries to prevent memory bloat
|
||||
*/
|
||||
private cleanupResourceStats(): void {
|
||||
if (this.resourceStats.size <= this.maxResourceEntries) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert to array and sort by lastAccessed (oldest first)
|
||||
const entries = Array.from(this.resourceStats.entries())
|
||||
.sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
|
||||
|
||||
// Remove oldest entries until we're under the limit
|
||||
const toRemove = entries.slice(0, entries.length - this.maxResourceEntries);
|
||||
for (const [url] of toRemove) {
|
||||
this.resourceStats.delete(url);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all cached resources
|
||||
*/
|
||||
public getCachedResources(): ICachedResource[] {
|
||||
return Array.from(this.resourceStats.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets domain statistics
|
||||
*/
|
||||
public getDomainStats(): IDomainStats[] {
|
||||
const domainMap = new Map<string, IDomainStats>();
|
||||
|
||||
for (const resource of this.resourceStats.values()) {
|
||||
let stats = domainMap.get(resource.domain);
|
||||
|
||||
if (!stats) {
|
||||
stats = {
|
||||
domain: resource.domain,
|
||||
totalResources: 0,
|
||||
totalSize: 0,
|
||||
totalHits: 0,
|
||||
totalMisses: 0,
|
||||
hitRate: 0,
|
||||
};
|
||||
domainMap.set(resource.domain, stats);
|
||||
}
|
||||
|
||||
stats.totalResources++;
|
||||
stats.totalSize += resource.size;
|
||||
stats.totalHits += resource.hitCount;
|
||||
stats.totalMisses += resource.missCount;
|
||||
}
|
||||
|
||||
// Calculate hit rates
|
||||
for (const stats of domainMap.values()) {
|
||||
const total = stats.totalHits + stats.totalMisses;
|
||||
stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
|
||||
}
|
||||
|
||||
return Array.from(domainMap.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets content-type statistics
|
||||
*/
|
||||
public getContentTypeStats(): IContentTypeStats[] {
|
||||
const typeMap = new Map<string, IContentTypeStats>();
|
||||
|
||||
for (const resource of this.resourceStats.values()) {
|
||||
// Normalize content-type (extract base type)
|
||||
const baseType = resource.contentType.split(';')[0].trim() || 'unknown';
|
||||
|
||||
let stats = typeMap.get(baseType);
|
||||
|
||||
if (!stats) {
|
||||
stats = {
|
||||
contentType: baseType,
|
||||
totalResources: 0,
|
||||
totalSize: 0,
|
||||
totalHits: 0,
|
||||
totalMisses: 0,
|
||||
hitRate: 0,
|
||||
};
|
||||
typeMap.set(baseType, stats);
|
||||
}
|
||||
|
||||
stats.totalResources++;
|
||||
stats.totalSize += resource.size;
|
||||
stats.totalHits += resource.hitCount;
|
||||
stats.totalMisses += resource.missCount;
|
||||
}
|
||||
|
||||
// Calculate hit rates
|
||||
for (const stats of typeMap.values()) {
|
||||
const total = stats.totalHits + stats.totalMisses;
|
||||
stats.hitRate = total > 0 ? Math.round((stats.totalHits / total) * 100) : 0;
|
||||
}
|
||||
|
||||
return Array.from(typeMap.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets resource count
|
||||
*/
|
||||
public getResourceCount(): number {
|
||||
return this.resourceStats.size;
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter for convenience
|
||||
export const getMetricsCollector = (): MetricsCollector => MetricsCollector.getInstance();
|
||||
418
ts_web_serviceworker/classes.persistentstore.ts
Normal file
418
ts_web_serviceworker/classes.persistentstore.ts
Normal file
@@ -0,0 +1,418 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import { logger } from './logging.js';
|
||||
import type { serviceworker } from '../dist_ts_interfaces/index.js';
|
||||
import { getServiceWorkerBackend } from './init.js';
|
||||
|
||||
type ICumulativeMetrics = serviceworker.ICumulativeMetrics;
|
||||
type IEventLogEntry = serviceworker.IEventLogEntry;
|
||||
type TEventType = serviceworker.TEventType;
|
||||
|
||||
/**
|
||||
* Generates a simple UUID
|
||||
*/
|
||||
function generateId(): string {
|
||||
return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default cumulative metrics
|
||||
*/
|
||||
function createDefaultMetrics(): ICumulativeMetrics {
|
||||
return {
|
||||
firstSeenTimestamp: Date.now(),
|
||||
totalCacheHits: 0,
|
||||
totalCacheMisses: 0,
|
||||
totalCacheErrors: 0,
|
||||
totalBytesServedFromCache: 0,
|
||||
totalBytesFetched: 0,
|
||||
totalNetworkRequests: 0,
|
||||
totalNetworkSuccesses: 0,
|
||||
totalNetworkFailures: 0,
|
||||
totalNetworkTimeouts: 0,
|
||||
totalBytesTransferred: 0,
|
||||
totalUpdateChecks: 0,
|
||||
totalUpdatesApplied: 0,
|
||||
totalSpeedtests: 0,
|
||||
swRestartCount: 0,
|
||||
lastUpdatedTimestamp: Date.now(),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* PersistentStore manages persistent data for the service worker:
|
||||
* - Cumulative metrics: Persist across SW restarts, reset on cache invalidation
|
||||
* - Event log: Persists across SW restarts AND cache invalidation
|
||||
*/
|
||||
export class PersistentStore {
|
||||
private static instance: PersistentStore;
|
||||
private store: plugins.webstore.WebStore;
|
||||
private initialized = false;
|
||||
|
||||
// Storage keys
|
||||
private readonly CUMULATIVE_KEY = 'metrics_cumulative';
|
||||
private readonly EVENT_LOG_KEY = 'event_log';
|
||||
|
||||
// Retention settings
|
||||
private readonly MAX_EVENTS = 10000;
|
||||
private readonly MAX_AGE_DAYS = 30;
|
||||
private readonly MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days in ms
|
||||
|
||||
// Save interval (60 seconds)
|
||||
private readonly SAVE_INTERVAL_MS = 60000;
|
||||
private saveInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
// In-memory cache for cumulative metrics
|
||||
private cumulativeMetrics: ICumulativeMetrics | null = null;
|
||||
private isDirty = false;
|
||||
|
||||
private constructor() {
|
||||
this.store = new plugins.webstore.WebStore({
|
||||
dbName: 'losslessServiceworkerPersistent',
|
||||
storeName: 'persistentStore',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the singleton instance
|
||||
*/
|
||||
public static getInstance(): PersistentStore {
|
||||
if (!PersistentStore.instance) {
|
||||
PersistentStore.instance = new PersistentStore();
|
||||
}
|
||||
return PersistentStore.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the store and starts periodic saving
|
||||
*/
|
||||
public async init(): Promise<void> {
|
||||
if (this.initialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Initialize the WebStore (required before using any methods)
|
||||
await this.store.init();
|
||||
await this.loadCumulativeMetrics();
|
||||
|
||||
// Increment restart count
|
||||
if (this.cumulativeMetrics) {
|
||||
this.cumulativeMetrics.swRestartCount++;
|
||||
this.isDirty = true;
|
||||
await this.saveCumulativeMetrics();
|
||||
}
|
||||
|
||||
// Start periodic save
|
||||
this.startPeriodicSave();
|
||||
|
||||
this.initialized = true;
|
||||
logger.log('ok', '[PersistentStore] Initialized successfully');
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to initialize: ${error}`);
|
||||
// Don't throw - allow SW to continue even if persistent store fails
|
||||
this.initialized = true; // Mark as initialized to prevent retry loops
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts periodic saving of metrics
|
||||
*/
|
||||
private startPeriodicSave(): void {
|
||||
if (this.saveInterval) {
|
||||
clearInterval(this.saveInterval);
|
||||
}
|
||||
|
||||
this.saveInterval = setInterval(async () => {
|
||||
if (this.isDirty) {
|
||||
await this.saveCumulativeMetrics();
|
||||
}
|
||||
}, this.SAVE_INTERVAL_MS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops periodic saving
|
||||
*/
|
||||
public stopPeriodicSave(): void {
|
||||
if (this.saveInterval) {
|
||||
clearInterval(this.saveInterval);
|
||||
this.saveInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Cumulative Metrics
|
||||
// ===================
|
||||
|
||||
/**
|
||||
* Loads cumulative metrics from store
|
||||
*/
|
||||
public async loadCumulativeMetrics(): Promise<ICumulativeMetrics> {
|
||||
try {
|
||||
if (await this.store.check(this.CUMULATIVE_KEY)) {
|
||||
this.cumulativeMetrics = await this.store.get(this.CUMULATIVE_KEY);
|
||||
} else {
|
||||
this.cumulativeMetrics = createDefaultMetrics();
|
||||
this.isDirty = true;
|
||||
}
|
||||
} catch (error) {
|
||||
logger.log('warn', `[PersistentStore] Failed to load metrics: ${error}`);
|
||||
this.cumulativeMetrics = createDefaultMetrics();
|
||||
this.isDirty = true;
|
||||
}
|
||||
|
||||
return this.cumulativeMetrics!;
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves cumulative metrics to store
|
||||
*/
|
||||
public async saveCumulativeMetrics(): Promise<void> {
|
||||
if (!this.cumulativeMetrics) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.cumulativeMetrics.lastUpdatedTimestamp = Date.now();
|
||||
await this.store.set(this.CUMULATIVE_KEY, this.cumulativeMetrics);
|
||||
this.isDirty = false;
|
||||
logger.log('note', '[PersistentStore] Cumulative metrics saved');
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to save metrics: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the current cumulative metrics
|
||||
*/
|
||||
public getCumulativeMetrics(): ICumulativeMetrics {
|
||||
if (!this.cumulativeMetrics) {
|
||||
return createDefaultMetrics();
|
||||
}
|
||||
return { ...this.cumulativeMetrics };
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates cumulative metrics with session delta
|
||||
*/
|
||||
public updateCumulativeMetrics(delta: Partial<ICumulativeMetrics>): void {
|
||||
if (!this.cumulativeMetrics) {
|
||||
this.cumulativeMetrics = createDefaultMetrics();
|
||||
}
|
||||
|
||||
// Add delta values to cumulative
|
||||
if (delta.totalCacheHits !== undefined) {
|
||||
this.cumulativeMetrics.totalCacheHits += delta.totalCacheHits;
|
||||
}
|
||||
if (delta.totalCacheMisses !== undefined) {
|
||||
this.cumulativeMetrics.totalCacheMisses += delta.totalCacheMisses;
|
||||
}
|
||||
if (delta.totalCacheErrors !== undefined) {
|
||||
this.cumulativeMetrics.totalCacheErrors += delta.totalCacheErrors;
|
||||
}
|
||||
if (delta.totalBytesServedFromCache !== undefined) {
|
||||
this.cumulativeMetrics.totalBytesServedFromCache += delta.totalBytesServedFromCache;
|
||||
}
|
||||
if (delta.totalBytesFetched !== undefined) {
|
||||
this.cumulativeMetrics.totalBytesFetched += delta.totalBytesFetched;
|
||||
}
|
||||
if (delta.totalNetworkRequests !== undefined) {
|
||||
this.cumulativeMetrics.totalNetworkRequests += delta.totalNetworkRequests;
|
||||
}
|
||||
if (delta.totalNetworkSuccesses !== undefined) {
|
||||
this.cumulativeMetrics.totalNetworkSuccesses += delta.totalNetworkSuccesses;
|
||||
}
|
||||
if (delta.totalNetworkFailures !== undefined) {
|
||||
this.cumulativeMetrics.totalNetworkFailures += delta.totalNetworkFailures;
|
||||
}
|
||||
if (delta.totalNetworkTimeouts !== undefined) {
|
||||
this.cumulativeMetrics.totalNetworkTimeouts += delta.totalNetworkTimeouts;
|
||||
}
|
||||
if (delta.totalBytesTransferred !== undefined) {
|
||||
this.cumulativeMetrics.totalBytesTransferred += delta.totalBytesTransferred;
|
||||
}
|
||||
if (delta.totalUpdateChecks !== undefined) {
|
||||
this.cumulativeMetrics.totalUpdateChecks += delta.totalUpdateChecks;
|
||||
}
|
||||
if (delta.totalUpdatesApplied !== undefined) {
|
||||
this.cumulativeMetrics.totalUpdatesApplied += delta.totalUpdatesApplied;
|
||||
}
|
||||
if (delta.totalSpeedtests !== undefined) {
|
||||
this.cumulativeMetrics.totalSpeedtests += delta.totalSpeedtests;
|
||||
}
|
||||
|
||||
this.isDirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets cumulative metrics (called on cache invalidation)
|
||||
*/
|
||||
public async resetCumulativeMetrics(): Promise<void> {
|
||||
this.cumulativeMetrics = createDefaultMetrics();
|
||||
this.isDirty = true;
|
||||
await this.saveCumulativeMetrics();
|
||||
logger.log('info', '[PersistentStore] Cumulative metrics reset');
|
||||
}
|
||||
|
||||
// ===================
|
||||
// Event Log
|
||||
// ===================
|
||||
|
||||
/**
|
||||
* Logs an event to the persistent event log
|
||||
*/
|
||||
public async logEvent(
|
||||
type: TEventType,
|
||||
message: string,
|
||||
details?: Record<string, any>
|
||||
): Promise<void> {
|
||||
const entry: IEventLogEntry = {
|
||||
id: generateId(),
|
||||
timestamp: Date.now(),
|
||||
type,
|
||||
message,
|
||||
details,
|
||||
};
|
||||
|
||||
try {
|
||||
// Ensure initialized
|
||||
if (!this.initialized) {
|
||||
await this.init();
|
||||
}
|
||||
|
||||
let events: IEventLogEntry[] = [];
|
||||
|
||||
if (await this.store.check(this.EVENT_LOG_KEY)) {
|
||||
events = await this.store.get(this.EVENT_LOG_KEY);
|
||||
}
|
||||
|
||||
// Add new entry
|
||||
events.push(entry);
|
||||
|
||||
// Apply retention policy
|
||||
events = this.applyRetentionPolicy(events);
|
||||
|
||||
await this.store.set(this.EVENT_LOG_KEY, events);
|
||||
logger.log('note', `[PersistentStore] Logged event: ${type} - ${message}`);
|
||||
|
||||
// Push event to connected clients via DeesComms
|
||||
try {
|
||||
const backend = getServiceWorkerBackend();
|
||||
if (backend) {
|
||||
await backend.pushEvent(entry);
|
||||
}
|
||||
} catch (pushError) {
|
||||
// Don't fail the log operation if push fails
|
||||
logger.log('warn', `[PersistentStore] Failed to push event: ${pushError}`);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to log event: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets event log entries
|
||||
*/
|
||||
public async getEventLog(options?: {
|
||||
limit?: number;
|
||||
type?: TEventType;
|
||||
since?: number;
|
||||
}): Promise<{ events: IEventLogEntry[]; totalCount: number }> {
|
||||
try {
|
||||
let events: IEventLogEntry[] = [];
|
||||
|
||||
if (await this.store.check(this.EVENT_LOG_KEY)) {
|
||||
events = await this.store.get(this.EVENT_LOG_KEY);
|
||||
}
|
||||
|
||||
const totalCount = events.length;
|
||||
|
||||
// Filter by type if specified
|
||||
if (options?.type) {
|
||||
events = events.filter(e => e.type === options.type);
|
||||
}
|
||||
|
||||
// Filter by since timestamp if specified
|
||||
if (options?.since) {
|
||||
events = events.filter(e => e.timestamp >= options.since);
|
||||
}
|
||||
|
||||
// Sort by timestamp (newest first)
|
||||
events.sort((a, b) => b.timestamp - a.timestamp);
|
||||
|
||||
// Apply limit if specified
|
||||
if (options?.limit && options.limit > 0) {
|
||||
events = events.slice(0, options.limit);
|
||||
}
|
||||
|
||||
return { events, totalCount };
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to get event log: ${error}`);
|
||||
return { events: [], totalCount: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets count of events since a timestamp
|
||||
*/
|
||||
public async getEventCount(since: number): Promise<number> {
|
||||
try {
|
||||
if (!(await this.store.check(this.EVENT_LOG_KEY))) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const events: IEventLogEntry[] = await this.store.get(this.EVENT_LOG_KEY);
|
||||
return events.filter(e => e.timestamp >= since).length;
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to get event count: ${error}`);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clears all events from the log
|
||||
*/
|
||||
public async clearEventLog(): Promise<boolean> {
|
||||
try {
|
||||
await this.store.set(this.EVENT_LOG_KEY, []);
|
||||
logger.log('info', '[PersistentStore] Event log cleared');
|
||||
return true;
|
||||
} catch (error) {
|
||||
logger.log('error', `[PersistentStore] Failed to clear event log: ${error}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies retention policy to event log:
|
||||
* - Max 10,000 events
|
||||
* - Max 30 days old
|
||||
*/
|
||||
private applyRetentionPolicy(events: IEventLogEntry[]): IEventLogEntry[] {
|
||||
const now = Date.now();
|
||||
const cutoffTime = now - this.MAX_AGE_MS;
|
||||
|
||||
// Filter out events older than 30 days
|
||||
let filtered = events.filter(e => e.timestamp >= cutoffTime);
|
||||
|
||||
// If still over limit, remove oldest entries
|
||||
if (filtered.length > this.MAX_EVENTS) {
|
||||
// Sort by timestamp (oldest first) then keep only newest MAX_EVENTS
|
||||
filtered.sort((a, b) => a.timestamp - b.timestamp);
|
||||
filtered = filtered.slice(filtered.length - this.MAX_EVENTS);
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flushes pending changes (call before SW stops)
|
||||
*/
|
||||
public async flush(): Promise<void> {
|
||||
if (this.isDirty && this.cumulativeMetrics) {
|
||||
await this.saveCumulativeMetrics();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton getter for convenience
|
||||
export const getPersistentStore = (): PersistentStore => PersistentStore.getInstance();
|
||||
@@ -12,6 +12,7 @@ import { UpdateManager } from './classes.updatemanager.js';
|
||||
import { NetworkManager } from './classes.networkmanager.js';
|
||||
import { TaskManager } from './classes.taskmanager.js';
|
||||
import { ServiceworkerBackend } from './classes.backend.js';
|
||||
import { getPersistentStore } from './classes.persistentstore.js';
|
||||
|
||||
export class ServiceWorker {
|
||||
// STATIC
|
||||
@@ -27,6 +28,10 @@ export class ServiceWorker {
|
||||
public taskManager: TaskManager;
|
||||
public store: plugins.webstore.WebStore;
|
||||
|
||||
// TypedSocket connection for server communication
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
constructor(selfArg: interfaces.ServiceWindow) {
|
||||
logger.log('info', `Service worker instantiating at ${Date.now()}`);
|
||||
this.serviceWindowRef = selfArg;
|
||||
@@ -59,6 +64,14 @@ export class ServiceWorker {
|
||||
// its important to not go async before event.waitUntil
|
||||
try {
|
||||
logger.log('success', `service worker installed! TimeStamp = ${new Date().toISOString()}`);
|
||||
|
||||
// Log installation event
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init();
|
||||
await persistentStore.logEvent('sw_installed', 'Service worker installed', {
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
selfArg.skipWaiting();
|
||||
logger.log('note', `Called skip waiting!`);
|
||||
done.resolve();
|
||||
@@ -76,16 +89,71 @@ export class ServiceWorker {
|
||||
try {
|
||||
await selfArg.clients.claim();
|
||||
logger.log('ok', 'Clients claimed successfully');
|
||||
|
||||
|
||||
await this.cacheManager.cleanCaches('new service worker loaded! :)');
|
||||
logger.log('ok', 'Caches cleaned successfully');
|
||||
|
||||
|
||||
// Log activation event
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init(); // Ensure store is initialized (safe to call multiple times)
|
||||
await persistentStore.logEvent('sw_activated', 'Service worker activated', {
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
done.resolve();
|
||||
logger.log('success', `Service worker activated at ${new Date().toISOString()}`);
|
||||
|
||||
// Connect to TypedServer for cache invalidation after activation
|
||||
this.connectToServer();
|
||||
} catch (error) {
|
||||
logger.log('error', `Service worker activation error: ${error}`);
|
||||
done.reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to TypedServer via TypedSocket for cache invalidation
|
||||
*/
|
||||
private async connectToServer(): Promise<void> {
|
||||
try {
|
||||
// Register handler for cache invalidation from server
|
||||
this.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_CacheInvalidate>(
|
||||
new plugins.typedrequest.TypedHandler('serviceworker_cacheInvalidate', async (reqArg) => {
|
||||
logger.log('info', `Cache invalidation requested from server: ${reqArg.reason}`);
|
||||
|
||||
// Log cache invalidation event (survives)
|
||||
const persistentStore = getPersistentStore();
|
||||
await persistentStore.init(); // Ensure store is initialized
|
||||
await persistentStore.logEvent('cache_invalidated', `Cache invalidated: ${reqArg.reason}`, {
|
||||
reason: reqArg.reason,
|
||||
timestamp: reqArg.timestamp,
|
||||
});
|
||||
|
||||
// Reset cumulative metrics (they don't survive cache invalidation)
|
||||
await persistentStore.resetCumulativeMetrics();
|
||||
|
||||
await this.cacheManager.cleanCaches(reqArg.reason);
|
||||
// Notify all clients to reload
|
||||
await this.leleServiceWorkerBackend.triggerReloadAll();
|
||||
return { success: true };
|
||||
})
|
||||
);
|
||||
|
||||
// Connect to server via TypedSocket
|
||||
this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
|
||||
this.typedrouter,
|
||||
this.serviceWindowRef.location.origin
|
||||
);
|
||||
|
||||
// Tag this connection as a service worker for server-side filtering
|
||||
await this.typedsocket.setTag('serviceworker', {});
|
||||
|
||||
logger.log('ok', 'Service worker connected to TypedServer via TypedSocket');
|
||||
} catch (error: any) {
|
||||
logger.log('warn', `Service worker TypedSocket connection failed: ${error?.message || error}`);
|
||||
// Retry connection after a delay
|
||||
setTimeout(() => this.connectToServer(), 10000);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,9 @@ import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
import { logger } from './logging.js';
|
||||
import { CacheManager } from './classes.cachemanager.js';
|
||||
import { getMetricsCollector } from './classes.metrics.js';
|
||||
import { getEventBus, ServiceWorkerEvent } from './classes.eventbus.js';
|
||||
import { getErrorHandler, ServiceWorkerErrorType } from './classes.errorhandler.js';
|
||||
|
||||
export class UpdateManager {
|
||||
public lastUpdateCheck: number = 0;
|
||||
@@ -10,6 +13,10 @@ export class UpdateManager {
|
||||
|
||||
public serviceworkerRef: ServiceWorker;
|
||||
|
||||
// Rate limiting for update checks
|
||||
private isCheckInProgress = false;
|
||||
private pendingCheckPromise: Promise<boolean> | null = null;
|
||||
|
||||
constructor(serviceWorkerRefArg: ServiceWorker) {
|
||||
this.serviceworkerRef = serviceWorkerRefArg;
|
||||
}
|
||||
@@ -22,75 +29,144 @@ export class UpdateManager {
|
||||
private readonly OFFLINE_GRACE_PERIOD = 7 * 24 * 60 * 60 * 1000; // 7 days grace period when offline
|
||||
private lastCacheTimestamp: number = 0;
|
||||
|
||||
public async checkUpdate(cacheManager: CacheManager): Promise<boolean> {
|
||||
const lswVersionInfoKey = 'versionInfo';
|
||||
const cacheTimestampKey = 'cacheTimestamp';
|
||||
|
||||
// Initialize or load version info
|
||||
if (!this.lastVersionInfo && !(await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
|
||||
this.lastVersionInfo = {
|
||||
appHash: '',
|
||||
appSemVer: 'v0.0.0',
|
||||
};
|
||||
} else if (!this.lastVersionInfo && (await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
|
||||
this.lastVersionInfo = await this.serviceworkerRef.store.get(lswVersionInfoKey);
|
||||
}
|
||||
|
||||
// Load or initialize cache timestamp
|
||||
if (await this.serviceworkerRef.store.check(cacheTimestampKey)) {
|
||||
this.lastCacheTimestamp = await this.serviceworkerRef.store.get(cacheTimestampKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* Public method to trigger an update check (rate-limited)
|
||||
*/
|
||||
public async checkUpdate(_cacheManager: CacheManager): Promise<boolean> {
|
||||
const now = Date.now();
|
||||
const millisSinceLastCheck = now - this.lastUpdateCheck;
|
||||
const cacheAge = now - this.lastCacheTimestamp;
|
||||
|
||||
// Check if we need to handle stale cache
|
||||
if (cacheAge > this.MAX_CACHE_AGE) {
|
||||
const isOnline = await this.serviceworkerRef.networkManager.checkOnlineStatus();
|
||||
|
||||
if (isOnline) {
|
||||
logger.log('info', `Cache is older than ${this.MAX_CACHE_AGE}ms, forcing update...`);
|
||||
await this.forceUpdate(cacheManager);
|
||||
return true;
|
||||
} else if (cacheAge > this.OFFLINE_GRACE_PERIOD) {
|
||||
// If we're offline and beyond grace period, warn but continue serving cached content
|
||||
logger.log('warn', `Cache is stale and device is offline. Cache age: ${cacheAge}ms. Using cached content with warning.`);
|
||||
// We could potentially show a warning to the user here
|
||||
return false;
|
||||
} else {
|
||||
logger.log('info', `Cache is stale but device is offline. Within grace period. Using cached content.`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Regular update check interval
|
||||
if (millisSinceLastCheck < this.MIN_CHECK_INTERVAL && cacheAge < this.MAX_CACHE_AGE) {
|
||||
// Rate limit: skip if we checked recently
|
||||
if (millisSinceLastCheck < this.MIN_CHECK_INTERVAL) {
|
||||
return false;
|
||||
}
|
||||
logger.log('info', 'checking for update of the app by comparing app hashes...');
|
||||
this.lastUpdateCheck = now;
|
||||
const currentVersionInfo = await this.getVersionInfoFromServer();
|
||||
logger.log('info', `old versionInfo: ${JSON.stringify(this.lastVersionInfo)}`);
|
||||
logger.log('info', `current versionInfo: ${JSON.stringify(currentVersionInfo)}`);
|
||||
const needsUpdate = this.lastVersionInfo.appHash !== currentVersionInfo.appHash ? true : false;
|
||||
if (needsUpdate) {
|
||||
logger.log('info', 'Caches need to be updated');
|
||||
logger.log('info', 'starting a debounced update task');
|
||||
this.performAsyncUpdateDebouncedTask.trigger();
|
||||
this.lastVersionInfo = currentVersionInfo;
|
||||
await this.serviceworkerRef.store.set(lswVersionInfoKey, this.lastVersionInfo);
|
||||
|
||||
// Update cache timestamp
|
||||
this.lastCacheTimestamp = now;
|
||||
await this.serviceworkerRef.store.set('cacheTimestamp', now);
|
||||
} else {
|
||||
logger.log('ok', 'caches are still valid, performing revalidation in a bit...');
|
||||
this.performAsyncCacheRevalidationDebouncedTask.trigger();
|
||||
|
||||
// Update cache timestamp after successful revalidation
|
||||
this.lastCacheTimestamp = now;
|
||||
await this.serviceworkerRef.store.set('cacheTimestamp', now);
|
||||
|
||||
// If a check is in progress, return the existing promise
|
||||
if (this.pendingCheckPromise) {
|
||||
return this.pendingCheckPromise;
|
||||
}
|
||||
|
||||
// Perform the check
|
||||
this.pendingCheckPromise = this.performUpdateCheck().finally(() => {
|
||||
this.pendingCheckPromise = null;
|
||||
});
|
||||
|
||||
return this.pendingCheckPromise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal method that performs the actual update check
|
||||
*/
|
||||
private async performUpdateCheck(): Promise<boolean> {
|
||||
// Prevent concurrent checks
|
||||
if (this.isCheckInProgress) {
|
||||
logger.log('note', 'Update check already in progress, skipping...');
|
||||
return false;
|
||||
}
|
||||
|
||||
this.isCheckInProgress = true;
|
||||
const metrics = getMetricsCollector();
|
||||
const eventBus = getEventBus();
|
||||
const errorHandler = getErrorHandler();
|
||||
|
||||
try {
|
||||
eventBus.emit(ServiceWorkerEvent.UPDATE_CHECK_START, { timestamp: Date.now() });
|
||||
|
||||
const lswVersionInfoKey = 'versionInfo';
|
||||
const cacheTimestampKey = 'cacheTimestamp';
|
||||
|
||||
// Initialize or load version info
|
||||
if (!this.lastVersionInfo && !(await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
|
||||
this.lastVersionInfo = {
|
||||
appHash: '',
|
||||
appSemVer: 'v0.0.0',
|
||||
};
|
||||
} else if (!this.lastVersionInfo && (await this.serviceworkerRef.store.check(lswVersionInfoKey))) {
|
||||
this.lastVersionInfo = await this.serviceworkerRef.store.get(lswVersionInfoKey);
|
||||
}
|
||||
|
||||
// Load or initialize cache timestamp
|
||||
if (await this.serviceworkerRef.store.check(cacheTimestampKey)) {
|
||||
this.lastCacheTimestamp = await this.serviceworkerRef.store.get(cacheTimestampKey);
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const cacheAge = now - this.lastCacheTimestamp;
|
||||
|
||||
// Check if we need to handle stale cache
|
||||
if (cacheAge > this.MAX_CACHE_AGE) {
|
||||
const isOnline = await this.serviceworkerRef.networkManager.checkOnlineStatus();
|
||||
|
||||
if (isOnline) {
|
||||
logger.log('info', `Cache is older than ${this.MAX_CACHE_AGE}ms, forcing update...`);
|
||||
await this.forceUpdate(this.serviceworkerRef.cacheManager);
|
||||
metrics.recordUpdateCheck(true);
|
||||
return true;
|
||||
} else if (cacheAge > this.OFFLINE_GRACE_PERIOD) {
|
||||
logger.log('warn', `Cache is stale and device is offline. Cache age: ${cacheAge}ms. Using cached content with warning.`);
|
||||
metrics.recordUpdateCheck(false);
|
||||
return false;
|
||||
} else {
|
||||
logger.log('info', `Cache is stale but device is offline. Within grace period. Using cached content.`);
|
||||
metrics.recordUpdateCheck(false);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
logger.log('info', 'checking for update of the app by comparing app hashes...');
|
||||
this.lastUpdateCheck = Date.now();
|
||||
|
||||
const currentVersionInfo = await this.getVersionInfoFromServer();
|
||||
logger.log('info', `old versionInfo: ${JSON.stringify(this.lastVersionInfo)}`);
|
||||
logger.log('info', `current versionInfo: ${JSON.stringify(currentVersionInfo)}`);
|
||||
|
||||
const needsUpdate = this.lastVersionInfo.appHash !== currentVersionInfo.appHash;
|
||||
|
||||
if (needsUpdate) {
|
||||
logger.log('info', 'Caches need to be updated');
|
||||
logger.log('info', 'starting a debounced update task');
|
||||
|
||||
metrics.recordUpdateFound();
|
||||
eventBus.emitUpdateAvailable(
|
||||
this.lastVersionInfo.appSemVer,
|
||||
currentVersionInfo.appSemVer,
|
||||
this.lastVersionInfo.appHash,
|
||||
currentVersionInfo.appHash
|
||||
);
|
||||
|
||||
this.performAsyncUpdateDebouncedTask.trigger();
|
||||
this.lastVersionInfo = currentVersionInfo;
|
||||
await this.serviceworkerRef.store.set(lswVersionInfoKey, this.lastVersionInfo);
|
||||
|
||||
// Update cache timestamp
|
||||
this.lastCacheTimestamp = now;
|
||||
await this.serviceworkerRef.store.set('cacheTimestamp', now);
|
||||
} else {
|
||||
logger.log('ok', 'caches are still valid, performing revalidation in a bit...');
|
||||
this.performAsyncCacheRevalidationDebouncedTask.trigger();
|
||||
|
||||
// Update cache timestamp after successful revalidation
|
||||
this.lastCacheTimestamp = now;
|
||||
await this.serviceworkerRef.store.set('cacheTimestamp', now);
|
||||
}
|
||||
|
||||
metrics.recordUpdateCheck(true);
|
||||
eventBus.emit(ServiceWorkerEvent.UPDATE_CHECK_COMPLETE, {
|
||||
needsUpdate,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
return needsUpdate;
|
||||
} catch (error) {
|
||||
const err = errorHandler.handleUpdateError(
|
||||
`Update check failed: ${error?.message || error}`,
|
||||
error instanceof Error ? error : undefined
|
||||
);
|
||||
metrics.recordUpdateCheck(false);
|
||||
eventBus.emit(ServiceWorkerEvent.UPDATE_ERROR, { error: err.message });
|
||||
return false;
|
||||
} finally {
|
||||
this.isCheckInProgress = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -140,9 +216,18 @@ export class UpdateManager {
|
||||
name: 'performAsyncUpdate',
|
||||
taskFunction: async () => {
|
||||
logger.log('info', 'trying to update PWA with serviceworker');
|
||||
const metrics = getMetricsCollector();
|
||||
const eventBus = getEventBus();
|
||||
|
||||
await this.serviceworkerRef.cacheManager.cleanCaches('a new app version has been communicated by the server.');
|
||||
// lets notify all current clients about the update
|
||||
await this.serviceworkerRef.leleServiceWorkerBackend.triggerReloadAll();
|
||||
|
||||
metrics.recordUpdateApplied();
|
||||
eventBus.emitUpdateApplied(
|
||||
this.lastVersionInfo?.appSemVer || 'unknown',
|
||||
this.lastVersionInfo?.appHash || 'unknown'
|
||||
);
|
||||
},
|
||||
debounceTimeInMillis: 2000,
|
||||
});
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
// TypeScript declatations
|
||||
import * as env from './env.js';
|
||||
declare var self: env.ServiceWindow;
|
||||
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
|
||||
const sw = new ServiceWorker(self);
|
||||
// Service worker entry point - NO EXPORTS here!
|
||||
// Exports at entry point cause tsbundle to output ESM format which service workers can't use.
|
||||
// The actual initialization happens in init.ts which other modules can import from.
|
||||
import './init.js';
|
||||
|
||||
13
ts_web_serviceworker/init.ts
Normal file
13
ts_web_serviceworker/init.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// Service worker initialization - creates and exports the SW instance
|
||||
// Other modules in the bundle can import from here
|
||||
import * as env from './env.js';
|
||||
declare var self: env.ServiceWindow;
|
||||
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
import type { ServiceworkerBackend } from './classes.backend.js';
|
||||
|
||||
const sw = new ServiceWorker(self);
|
||||
|
||||
export const getServiceWorkerInstance = (): ServiceWorker => sw;
|
||||
|
||||
export const getServiceWorkerBackend = (): ServiceworkerBackend => sw.leleServiceWorkerBackend;
|
||||
@@ -5,8 +5,9 @@ export { interfaces };
|
||||
|
||||
// @apiglobal scope
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
import * as typedsocket from '@api.global/typedsocket';
|
||||
|
||||
export { typedrequest };
|
||||
export { typedrequest, typedsocket };
|
||||
|
||||
// @pushrocks scope
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
|
||||
@@ -2,13 +2,38 @@ import * as plugins from './plugins.js';
|
||||
import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './logging.js';
|
||||
|
||||
/**
|
||||
* Connection options for service worker connection attempts
|
||||
*/
|
||||
export interface IConnectionOptions {
|
||||
timeoutMs: number; // Total timeout for all attempts (default: 30000)
|
||||
maxRetries: number; // Maximum number of retry attempts (default: 10)
|
||||
initialDelayMs: number; // Initial delay between retries (default: 500)
|
||||
maxDelayMs: number; // Maximum delay between retries (default: 5000)
|
||||
backoffMultiplier: number; // Multiplier for exponential backoff (default: 1.5)
|
||||
}
|
||||
|
||||
const DEFAULT_CONNECTION_OPTIONS: IConnectionOptions = {
|
||||
timeoutMs: 30000,
|
||||
maxRetries: 10,
|
||||
initialDelayMs: 500,
|
||||
maxDelayMs: 5000,
|
||||
backoffMultiplier: 1.5,
|
||||
};
|
||||
|
||||
/**
|
||||
* MessageManager implements two ways of serviceworker communication
|
||||
* * the serviceWorker method
|
||||
* * the deesComms method using BroadcastChannel
|
||||
*/
|
||||
/**
|
||||
* Callback type for status update subscriptions
|
||||
*/
|
||||
export type TStatusUpdateCallback = (status: interfaces.serviceworker.IStatusUpdate) => void;
|
||||
|
||||
export class ActionManager {
|
||||
public deesComms = new plugins.deesComms.DeesComms();
|
||||
private statusCallbacks: Set<TStatusUpdateCallback> = new Set();
|
||||
|
||||
constructor() {
|
||||
// lets define handlers on the client/tab side
|
||||
@@ -18,30 +43,141 @@ export class ActionManager {
|
||||
}, 200);
|
||||
return {};
|
||||
});
|
||||
|
||||
// Handler for status updates from service worker
|
||||
this.deesComms.createTypedHandler<interfaces.serviceworker.IMessage_Serviceworker_StatusUpdate>('serviceworker_statusUpdate', async (status) => {
|
||||
// Forward to all registered callbacks
|
||||
for (const callback of this.statusCallbacks) {
|
||||
try {
|
||||
callback(status);
|
||||
} catch (error) {
|
||||
logger.log('warn', `Status callback error: ${error}`);
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
}
|
||||
|
||||
public async waitForServiceWorkerConnection () {
|
||||
console.log('waiting for service worker connection...')
|
||||
const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Client_Serviceworker_ConnectionPolling>('broadcastConnectionPolling');
|
||||
let connected = false;
|
||||
while (!connected) {
|
||||
tr.fire({
|
||||
tabId: '123'
|
||||
}).then(response => {
|
||||
if (response.serviceworkerId) {
|
||||
console.log('connected to serviceworker!');
|
||||
connected = true;
|
||||
}
|
||||
}).catch();
|
||||
await plugins.smartdelay.delayFor(777);
|
||||
if (!connected) {
|
||||
// lets wake it up.
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
type: 'wakeUpCall',
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Subscribe to status updates from the service worker
|
||||
* @returns Unsubscribe function
|
||||
*/
|
||||
public subscribeToStatusUpdates(callback: TStatusUpdateCallback): () => void {
|
||||
this.statusCallbacks.add(callback);
|
||||
logger.log('info', 'Subscribed to service worker status updates');
|
||||
return () => {
|
||||
this.statusCallbacks.delete(callback);
|
||||
logger.log('info', 'Unsubscribed from service worker status updates');
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current service worker status
|
||||
*/
|
||||
public async getServiceWorkerStatus(): Promise<interfaces.serviceworker.IRequest_Serviceworker_GetStatus['response'] | null> {
|
||||
try {
|
||||
const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Serviceworker_GetStatus>('serviceworker_getStatus');
|
||||
const response = await Promise.race([
|
||||
tr.fire({}),
|
||||
new Promise<null>((resolve) => setTimeout(() => resolve(null), 5000)),
|
||||
]);
|
||||
return response;
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to get service worker status: ${error}`);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Waits for service worker connection with timeout and retry logic.
|
||||
* Returns a result object instead of blocking forever.
|
||||
*/
|
||||
public async waitForServiceWorkerConnection(
|
||||
options: Partial<IConnectionOptions> = {}
|
||||
): Promise<interfaces.serviceworker.IConnectionResult> {
|
||||
const opts = { ...DEFAULT_CONNECTION_OPTIONS, ...options };
|
||||
const startTime = Date.now();
|
||||
let attempt = 0;
|
||||
let currentDelay = opts.initialDelayMs;
|
||||
|
||||
logger.log('info', 'Waiting for service worker connection...');
|
||||
|
||||
const tr = this.deesComms.createTypedRequest<interfaces.serviceworker.IRequest_Client_Serviceworker_ConnectionPolling>('broadcastConnectionPolling');
|
||||
|
||||
while (attempt < opts.maxRetries) {
|
||||
// Check total timeout
|
||||
const elapsed = Date.now() - startTime;
|
||||
if (elapsed >= opts.timeoutMs) {
|
||||
logger.log('warn', `Service worker connection timeout after ${elapsed}ms (${attempt} attempts)`);
|
||||
return {
|
||||
connected: false,
|
||||
error: 'timeout',
|
||||
attempts: attempt,
|
||||
duration: elapsed,
|
||||
};
|
||||
}
|
||||
|
||||
attempt++;
|
||||
|
||||
try {
|
||||
// Create a per-request timeout
|
||||
const requestTimeout = Math.min(currentDelay * 2, opts.maxDelayMs);
|
||||
const response = await Promise.race([
|
||||
tr.fire({ tabId: crypto.randomUUID?.() || String(Date.now()) }),
|
||||
new Promise<null>((_, reject) =>
|
||||
setTimeout(() => reject(new Error('Request timeout')), requestTimeout)
|
||||
),
|
||||
]);
|
||||
|
||||
if (response && response.serviceworkerId) {
|
||||
const duration = Date.now() - startTime;
|
||||
logger.log('ok', `Connected to service worker after ${attempt} attempt(s) (${duration}ms)`);
|
||||
return {
|
||||
connected: true,
|
||||
attempts: attempt,
|
||||
duration,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
// Request failed or timed out, continue with retry
|
||||
logger.log('note', `Connection attempt ${attempt} failed: ${error?.message || 'unknown error'}`);
|
||||
}
|
||||
|
||||
// Try to wake up the service worker
|
||||
if (navigator.serviceWorker.controller) {
|
||||
try {
|
||||
navigator.serviceWorker.controller.postMessage({
|
||||
type: 'wakeUpCall',
|
||||
});
|
||||
} catch {
|
||||
// Ignore errors when posting message
|
||||
}
|
||||
}
|
||||
|
||||
// Wait before next attempt with exponential backoff
|
||||
await plugins.smartdelay.delayFor(currentDelay);
|
||||
currentDelay = Math.min(currentDelay * opts.backoffMultiplier, opts.maxDelayMs);
|
||||
}
|
||||
|
||||
const duration = Date.now() - startTime;
|
||||
logger.log('warn', `Service worker connection failed after ${opts.maxRetries} attempts (${duration}ms)`);
|
||||
return {
|
||||
connected: false,
|
||||
error: 'max_retries_exceeded',
|
||||
attempts: attempt,
|
||||
duration,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Legacy method for backward compatibility - blocks until connected or gives up
|
||||
* @deprecated Use waitForServiceWorkerConnection() instead which returns a result
|
||||
*/
|
||||
public async waitForServiceWorkerConnectionBlocking(): Promise<void> {
|
||||
const result = await this.waitForServiceWorkerConnection();
|
||||
if (!result.connected) {
|
||||
logger.log('warn', `Failed to connect to service worker: ${result.error}`);
|
||||
}
|
||||
console.log('ok, got serviceworker connection.')
|
||||
}
|
||||
|
||||
public async purgeServiceWorkerCache () {
|
||||
|
||||
@@ -5,28 +5,54 @@ import { NotificationManager } from './classes.notificationmanager.js';
|
||||
import { ActionManager } from './classes.actionmanager.js';
|
||||
import { GlobalSW } from './classes.globalsw.js'
|
||||
|
||||
/**
|
||||
* Polling options for service worker update checks
|
||||
*/
|
||||
export interface IPollingOptions {
|
||||
intervalMs: number; // Interval between update checks (default: 60000 - 1 minute)
|
||||
pauseWhenHidden: boolean; // Pause polling when page is hidden (default: true)
|
||||
initialDelayMs: number; // Initial delay before first poll (default: 2000)
|
||||
}
|
||||
|
||||
const DEFAULT_POLLING_OPTIONS: IPollingOptions = {
|
||||
intervalMs: 60000, // 1 minute
|
||||
pauseWhenHidden: true,
|
||||
initialDelayMs: 2000,
|
||||
};
|
||||
|
||||
export class ServiceworkerClient {
|
||||
// STATIC
|
||||
public static async createServiceWorker(): Promise<ServiceworkerClient> {
|
||||
private static pollingController: AbortController | null = null;
|
||||
private static swRegistration: ServiceWorkerRegistration | null = null;
|
||||
private static isPollingActive = false;
|
||||
|
||||
public static async createServiceWorker(
|
||||
pollingOptions: Partial<IPollingOptions> = {}
|
||||
): Promise<ServiceworkerClient> {
|
||||
if ('serviceWorker' in navigator) {
|
||||
try {
|
||||
logger.log('info', 'trying to register serviceworker');
|
||||
// this is some magic for Parcel to not pick up the serviceworker
|
||||
const serviceworkerInNavigator: ServiceWorkerContainer = navigator.serviceWorker;
|
||||
const swRegistration: ServiceWorkerRegistration = await serviceworkerInNavigator.register('/serviceworker.bundle.js', {
|
||||
this.swRegistration = await serviceworkerInNavigator.register('/serviceworker.bundle.js', {
|
||||
scope: '/',
|
||||
updateViaCache: 'none'
|
||||
});
|
||||
plugins.smartdelay.delayFor(2000).then(async () => {
|
||||
swRegistration.onupdatefound = () => {
|
||||
logger.log('info', 'update found for service worker!');
|
||||
logger.log('warn', 'trying to find convenient time to update');
|
||||
};
|
||||
while(true) {
|
||||
await plugins.smartdelay.delayFor(60000);
|
||||
swRegistration.update();
|
||||
}
|
||||
});
|
||||
|
||||
this.swRegistration.onupdatefound = () => {
|
||||
logger.log('info', 'update found for service worker!');
|
||||
logger.log('warn', 'trying to find convenient time to update');
|
||||
};
|
||||
|
||||
// Start polling with controllable abort mechanism
|
||||
const opts = { ...DEFAULT_POLLING_OPTIONS, ...pollingOptions };
|
||||
this.startPolling(opts);
|
||||
|
||||
// Set up visibility change handler to pause/resume polling
|
||||
if (opts.pauseWhenHidden) {
|
||||
this.setupVisibilityHandler(opts);
|
||||
}
|
||||
|
||||
logger.log('ok', 'serviceworker registered');
|
||||
await navigator.serviceWorker.ready;
|
||||
logger.log('ok', 'serviceworker is ready!');
|
||||
@@ -41,6 +67,120 @@ export class ServiceworkerClient {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts the update polling loop with an AbortController
|
||||
*/
|
||||
private static startPolling(opts: IPollingOptions): void {
|
||||
// Cancel any existing polling
|
||||
this.stopPolling();
|
||||
|
||||
this.pollingController = new AbortController();
|
||||
this.isPollingActive = true;
|
||||
const signal = this.pollingController.signal;
|
||||
|
||||
const poll = async () => {
|
||||
// Initial delay
|
||||
await plugins.smartdelay.delayFor(opts.initialDelayMs);
|
||||
|
||||
while (!signal.aborted && this.swRegistration) {
|
||||
try {
|
||||
// Check for updates
|
||||
await this.swRegistration.update();
|
||||
logger.log('note', 'Service worker update check completed');
|
||||
} catch (err) {
|
||||
if (!signal.aborted) {
|
||||
logger.log('warn', `Service worker update check failed: ${err?.message || err}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Wait for next interval, but check abort signal
|
||||
if (!signal.aborted) {
|
||||
await this.delayWithAbort(opts.intervalMs, signal);
|
||||
}
|
||||
}
|
||||
|
||||
this.isPollingActive = false;
|
||||
logger.log('info', 'Service worker polling stopped');
|
||||
};
|
||||
|
||||
// Start polling (fire and forget)
|
||||
poll().catch((err) => {
|
||||
if (!signal.aborted) {
|
||||
logger.log('error', `Service worker polling error: ${err?.message || err}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops the polling loop
|
||||
*/
|
||||
public static stopPolling(): void {
|
||||
if (this.pollingController) {
|
||||
this.pollingController.abort();
|
||||
this.pollingController = null;
|
||||
}
|
||||
this.isPollingActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up visibility change handler to pause/resume polling
|
||||
*/
|
||||
private static setupVisibilityHandler(opts: IPollingOptions): void {
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.visibilityState === 'hidden') {
|
||||
// Page is hidden, stop polling to save resources
|
||||
logger.log('note', 'Page hidden, pausing service worker polling');
|
||||
this.stopPolling();
|
||||
} else if (document.visibilityState === 'visible') {
|
||||
// Page is visible again, resume polling
|
||||
if (!this.isPollingActive && this.swRegistration) {
|
||||
logger.log('note', 'Page visible, resuming service worker polling');
|
||||
this.startPolling(opts);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Delay that can be aborted
|
||||
*/
|
||||
private static delayWithAbort(ms: number, signal: AbortSignal): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
const timeout = setTimeout(() => {
|
||||
resolve();
|
||||
}, ms);
|
||||
|
||||
signal.addEventListener('abort', () => {
|
||||
clearTimeout(timeout);
|
||||
resolve();
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Manually triggers an update check
|
||||
*/
|
||||
public static async triggerUpdateCheck(): Promise<void> {
|
||||
if (this.swRegistration) {
|
||||
try {
|
||||
await this.swRegistration.update();
|
||||
logger.log('ok', 'Manual service worker update check completed');
|
||||
} catch (err) {
|
||||
logger.log('error', `Manual update check failed: ${err?.message || err}`);
|
||||
throw err;
|
||||
}
|
||||
} else {
|
||||
logger.log('warn', 'Cannot trigger update check: no service worker registration');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets whether polling is currently active
|
||||
*/
|
||||
public static get isPolling(): boolean {
|
||||
return this.isPollingActive;
|
||||
}
|
||||
|
||||
private static async waitForController() {
|
||||
const done = new plugins.smartpromise.Deferred();
|
||||
const checkReady = () => {
|
||||
@@ -66,4 +206,11 @@ export class ServiceworkerClient {
|
||||
this.actionManager = new ActionManager();
|
||||
this.globalSw = new GlobalSW(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup method to stop polling when the client is no longer needed
|
||||
*/
|
||||
public destroy(): void {
|
||||
ServiceworkerClient.stopPolling();
|
||||
}
|
||||
}
|
||||
@@ -11,14 +11,17 @@ export type {
|
||||
import { logger } from './logging.js';
|
||||
logger.log('note', 'mainthread console initialized!');
|
||||
|
||||
import { ServiceworkerClient } from './classes.serviceworkerclient.js';
|
||||
import { ServiceworkerClient, type IPollingOptions } from './classes.serviceworkerclient.js';
|
||||
import { type IConnectionOptions } from './classes.actionmanager.js';
|
||||
|
||||
export type {
|
||||
ServiceworkerClient
|
||||
ServiceworkerClient,
|
||||
IPollingOptions,
|
||||
IConnectionOptions,
|
||||
}
|
||||
|
||||
export const getServiceworkerClient = async () => {
|
||||
const swClient = await ServiceworkerClient.createServiceWorker(); // lets setup the service worker
|
||||
export const getServiceworkerClient = async (pollingOptions?: Partial<IPollingOptions>) => {
|
||||
const swClient = await ServiceworkerClient.createServiceWorker(pollingOptions); // lets setup the service worker
|
||||
logger.log('ok', 'service worker ready!'); // and wait for it to be ready
|
||||
return swClient;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user