Compare commits
273 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d3330880c0 | |||
| dbbfd313ae | |||
| eabee2d658 | |||
| 95cd681380 | |||
| 9f6290f7aa | |||
| 065a253b3e | |||
| 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 | |||
| c6792396df | |||
| fc6829f607 | |||
| 424b742f84 | |||
| c25daba1c1 | |||
| dce2e926e4 | |||
| 27c96949a1 | |||
| c17d6dac35 | |||
| 1c0c88a7cb | |||
| 8557c769fa | |||
| bce84c6838 | |||
| ba08fcdebc | |||
| 588a9d1df6 | |||
| b1d376207a | |||
| 43d8aea4e1 | |||
| 776d6fb95d | |||
| 0f22c91499 | |||
| a0f714a561 | |||
| 9477eac268 | |||
| 8cbae75ae4 | |||
| db05fc91c4 | |||
| 6e647a3556 | |||
| 6da22ab607 | |||
| fb98b3294a | |||
| 848ef1d3d1 | |||
| 497b267b43 | |||
| d5875d5031 | |||
| b06c67ebac | |||
| 3d7e5c439d | |||
| 84f7d8d4a0 | |||
| 42e8e575d8 | |||
| d5f7fbbb9a | |||
| 0dcb9edcbe | |||
| 85ca50fc8b | |||
| b3726cb518 | |||
| ec6754be52 | |||
| 1ced20c887 | |||
| 3556594501 | |||
| dd6babdf81 | |||
| 75ce27a4bf | |||
| 435a4a0349 | |||
| b1983edcd7 | |||
| 1a9c656f2e | |||
| 569fa4fc46 | |||
| cbb10d7c19 | |||
| ab4c302cea | |||
| 0017a559ca | |||
| 270230b0ca | |||
| 6cedd53d61 | |||
| f518300d68 | |||
| 8f6f177d19 | |||
| 4e560a9a51 | |||
| 7999e370f6 | |||
| efade7a78e | |||
| 0fecf69420 | |||
| 804537c059 | |||
| aebcbe4a61 | |||
| c5cb8c1f01 | |||
| 8202ce6227 | |||
| 4598bd0e25 | |||
| 021c980a4f | |||
| c7dca75827 | |||
| 4f7b2888ab | |||
| e552a48c02 | |||
| 2ea4139974 | |||
| e225c693a8 | |||
| 6393336ea6 | |||
| d7158734d2 | |||
| 557724718c | |||
| d7a9b26873 | |||
| 511de8040a | |||
| 952e95f82f | |||
| 42115cb6be | |||
| e1206bdf4c | |||
| e32e7272ba | |||
| 3f317fffd5 | |||
| a49309566c | |||
| 0fb1d54e06 | |||
| f31ca98b2c | |||
| dfcda87196 | |||
| 108bcb41bf | |||
| 1b18961539 | |||
| 4fcfd0f52c | |||
| 8f1464c97e | |||
| 96a88911a7 | |||
| 1d5af30e78 | |||
| 8fe5b6985c | |||
| 72e02bd611 | |||
| fb7c1242a9 | |||
| 360766d8b4 | |||
| 9968dda0fa | |||
| 77b9e41bdb | |||
| 8bea58b434 | |||
| bd9397eb13 | |||
| 6e7316d2b1 | |||
| cba65bfb81 | |||
| f06f25b4db | |||
| 316625c41b | |||
| ee67c68c17 | |||
| 8fb2d8b3e8 | |||
| 75c89b040b | |||
| b6d0843e3e | |||
| 1c5e2845d1 | |||
| 7798bf7e0a | |||
| 76db7d1733 | |||
| 1db472ab01 | |||
| 23e88030be | |||
| 1644cbbfad | |||
| 84e214d087 | |||
| 0bb7e438d5 | |||
| 1ce6d2ab01 | |||
| d225a9584f | |||
| fedb37ee16 | |||
| e99196b227 | |||
| 3d6723d06c | |||
| fd7aadaf79 | |||
| 5e4878e492 | |||
| 64d4fb011d | |||
| 6671bbe793 | |||
| 14bfa3f62f | |||
| 9e4413c276 | |||
| dd91691064 | |||
| bf4794c06f | |||
| 7e04474a66 | |||
| 907d51a842 | |||
| 2114ff28c0 | |||
| fd9431f82b | |||
| e8c1a66e15 | |||
| 1e98fd99f4 | |||
| da6aa9827c | |||
| ca3b8a4580 | |||
| a7ddb6b6a8 | |||
| e1dfe30273 | |||
| 754fa38fe8 | |||
| 7e59146e73 | |||
| 3b550eacf7 | |||
| 6342895320 | |||
| b6a4095a53 | |||
| 622da78180 | |||
| 21938e5f20 | |||
| 99427f5835 | |||
| 552a15bb2f | |||
| b0efc48b96 | |||
| 8c3aad69a0 | |||
| fb2692b50e | |||
| 65c868aefe | |||
| 11df25f028 | |||
| efb4229f58 | |||
| 61dcc6badc | |||
| 585da9bc79 | |||
| 60a2efaecb | |||
| 2c8f550830 | |||
| c9688159e5 | |||
| a710473d33 | |||
| 61c62672fc | |||
| 1a7150e1f8 | |||
| f35360adba | |||
| 9774567dc0 | |||
| 529c5feeb1 | |||
| d2cac36a6e | |||
| 2cdef55f13 | |||
| 05444b757b | |||
| 1ef5c0da06 | |||
| 00b4108803 | |||
| 7e75cccbcb | |||
| f93d10d394 | |||
| d949a05c79 | |||
| d281569bbb | |||
| ef06dd138e | |||
| 60b610fc4a | |||
| b4e9bd5174 | |||
| 1754524184 | |||
| 618f382ce9 | |||
| ef9883f100 | |||
| 99db788d11 | |||
| f7966e1f58 | |||
| 9828f7bc13 | |||
| dab87b274d | |||
| 85171cb736 | |||
| 0fd5e0a209 | |||
| eadab07f17 | |||
| 378592acc3 | |||
| f885e49e34 | |||
| 078730153d | |||
| 4467ab76aa | |||
| a0bbf31f75 | |||
| 13e9ac7a98 | |||
| 0ec00a5404 | |||
| b0f48ba598 | |||
| ec4a51668c | |||
| 07739bec27 | |||
| 9aebd59c08 | |||
| be7f4c503e | |||
| e1e1d4bf65 | |||
| 20ecb86a9e | |||
| 83890d7cab | |||
| 4c87ea8273 | |||
| 4be625a0d9 | |||
| c305ca517a | |||
| 23dccae01b | |||
| d5f8d215a2 | |||
| 3d4f8d1bbe | |||
| 4724629efa | |||
| ff9aea12c3 | |||
| 910b9a495e | |||
| 7fdf0a71a7 | |||
| bf2c6660f2 | |||
| 49afc16422 | |||
| bb6f239075 | |||
| 5bd5916696 | |||
| 62df38d083 | |||
| d7fe947107 | |||
| dd426a4ca4 | |||
| 2a2d4dabe4 | |||
| 830682d382 | |||
| d160a92bee | |||
| cc421c3321 | |||
| 92ecef30d3 | |||
| de4aab6df0 | |||
| 5624e9dc1f | |||
| c7e40e4cde | |||
| 0704febfc0 | |||
| b8b1a61ae5 | |||
| 45155bbce0 | |||
| 35bcf717cb | |||
| 4d3be1064d | |||
| 8ee72f9380 | |||
| 049ceb7d15 | |||
| 87a5337db3 | |||
| 2372e36367 | |||
| 748fc931c6 |
67
.gitea/workflows/default_nottags.yaml
Normal file
67
.gitea/workflows/default_nottags.yaml
Normal file
@@ -0,0 +1,67 @@
|
||||
name: Default (not tags)
|
||||
|
||||
on:
|
||||
push:
|
||||
tags-ignore:
|
||||
- '**'
|
||||
|
||||
env:
|
||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||
|
||||
jobs:
|
||||
|
||||
security:
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Install pnpm and npmci
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
|
||||
- name: Run npm prepare
|
||||
run: npmci npm prepare
|
||||
|
||||
- name: Audit production dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --prod
|
||||
continue-on-error: true
|
||||
|
||||
- name: Audit development dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --dev
|
||||
continue-on-error: true
|
||||
|
||||
test:
|
||||
if: ${{ always() }}
|
||||
needs: security
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Test stable
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm test
|
||||
|
||||
- name: Test build
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm build
|
||||
110
.gitea/workflows/default_tags.yaml
Normal file
110
.gitea/workflows/default_tags.yaml
Normal file
@@ -0,0 +1,110 @@
|
||||
name: Default (tags)
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- '*'
|
||||
|
||||
env:
|
||||
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
|
||||
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
|
||||
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
|
||||
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
|
||||
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
|
||||
|
||||
jobs:
|
||||
|
||||
security:
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Install pnpm and npmci
|
||||
run: |
|
||||
pnpm install -g pnpm
|
||||
pnpm install -g @shipzone/npmci
|
||||
|
||||
- name: Run npm prepare
|
||||
run: npmci npm prepare
|
||||
|
||||
- name: Audit production dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --prod
|
||||
continue-on-error: true
|
||||
|
||||
- name: Audit development dependencies
|
||||
run: |
|
||||
npmci command npm config set registry https://registry.npmjs.org
|
||||
npmci command pnpm audit --audit-level=high --dev
|
||||
continue-on-error: true
|
||||
|
||||
test:
|
||||
if: ${{ always() }}
|
||||
needs: security
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Test stable
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm test
|
||||
|
||||
- name: Test build
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
npmci npm build
|
||||
|
||||
release:
|
||||
needs: test
|
||||
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Release
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm publish
|
||||
|
||||
metadata:
|
||||
needs: test
|
||||
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
|
||||
runs-on: ubuntu-latest
|
||||
container:
|
||||
image: ${{ env.IMAGE }}
|
||||
continue-on-error: true
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- name: Code quality
|
||||
run: |
|
||||
npmci command npm install -g typescript
|
||||
npmci npm prepare
|
||||
npmci npm install
|
||||
|
||||
- name: Trigger
|
||||
run: npmci trigger
|
||||
|
||||
- name: Build docs and upload artifacts
|
||||
run: |
|
||||
npmci node install stable
|
||||
npmci npm install
|
||||
pnpm install -g @git.zone/tsdoc
|
||||
npmci command tsdoc
|
||||
continue-on-error: true
|
||||
128
.gitlab-ci.yml
128
.gitlab-ci.yml
@@ -1,128 +0,0 @@
|
||||
# gitzone ci_default
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
|
||||
cache:
|
||||
paths:
|
||||
- .npmci_cache/
|
||||
key: '$CI_BUILD_STAGE'
|
||||
|
||||
stages:
|
||||
- security
|
||||
- test
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- pnpm install -g pnpm
|
||||
- pnpm install -g @shipzone/npmci
|
||||
- npmci npm prepare
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --prod
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command pnpm audit --audit-level=high --dev
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
# ====================
|
||||
|
||||
testStable:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- docker
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci npm build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- docker
|
||||
|
||||
release:
|
||||
stage: release
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm publish
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
# ====================
|
||||
# metadata stage
|
||||
# ====================
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
trigger:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci trigger
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
pages:
|
||||
stage: metadata
|
||||
script:
|
||||
- npmci node install stable
|
||||
- npmci npm install
|
||||
- npmci command npm run buildDocs
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
only:
|
||||
- tags
|
||||
artifacts:
|
||||
expire_in: 1 week
|
||||
paths:
|
||||
- public
|
||||
allow_failure: true
|
||||
648
changelog.md
Normal file
648
changelog.md
Normal file
@@ -0,0 +1,648 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-04 - 7.7.1 - fix(web_serviceworker)
|
||||
Standardize DeesComms message format in service worker backend
|
||||
|
||||
- Add createMessage helper to generate consistent TypedRequest-shaped messages (includes messageId and correlation.id/phase).
|
||||
- Replace inline postMessage payloads with createMessage(...) calls across ServiceworkerBackend (status updates, new-version broadcasts, alerts, event pushes, metrics updates, resource-cached notifications).
|
||||
- Improves message consistency and enables easier correlation/tracing of DeesComms messages; behavior should remain backward-compatible.
|
||||
|
||||
## 2025-12-04 - 7.7.0 - feat(typedserver)
|
||||
Add SPA fallback support to TypedServer
|
||||
|
||||
- Introduce new IServerOptions.spaFallback boolean to enable SPA routing fallback.
|
||||
- When enabled, GET requests for paths without a file extension will serve serveDir/index.html.
|
||||
- Preserves existing HTML injection behavior: injectReload still injects devtools script and typedserver metadata into <head> when enabled.
|
||||
- Responses from SPA fallback include Cache-Control: no-cache and appHash header for cache-busting; falls through to 404 on errors.
|
||||
- Non-file routes that contain a dot (.) are not considered for SPA fallback to avoid interfering with asset requests.
|
||||
|
||||
## 2025-12-04 - 7.6.0 - feat(typedserver)
|
||||
Remove legacy Express-based servertools, drop express deps, and refactor TypedServer to SmartServe + typedrouter with CORS support
|
||||
|
||||
- Remove legacy ts/servertools module and many Express-based helpers (classes.server, handler, handlerstatic, handlerproxy, compressor, sitemap, feed, tools.*). The servertools compatibility layer is no longer available.
|
||||
- Drop express-related dependencies from package.json (@types/express, express, body-parser, cors, express-force-ssl).
|
||||
- Refactor core API: ts/index.ts no longer exports servertools and ts/plugins.ts no longer re-exports Express middleware — consumers must migrate to SmartServe/typedrequest/typedsocket primitives.
|
||||
- TypedServer rewritten: integrates with @push.rocks/smartserve ControllerRegistry, adds custom route parsing, CORS header helper and OPTIONS preflight handling, improved static file handling with optional reload injection, file watching, typedrouter and typedsocket integration.
|
||||
- UtilityWebsiteServer now registers the serviceworker versionInfo handler on typedrouter instead of using the removed servertools.serviceworker helper.
|
||||
- This is a breaking change — public APIs and dependency surface changed; bump major version.
|
||||
|
||||
## 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
|
||||
|
||||
- Updated ts/controllers/controller.devtools.ts: decorator changed from @plugins.smartserve.Get('/reloadcheck') to @plugins.smartserve.Post('/reloadcheck').
|
||||
- Clients that previously performed GET requests against /reloadcheck must be updated to use POST. This is a breaking API change.
|
||||
- Bump major version to reflect the change in the public HTTP API.
|
||||
|
||||
## 2025-12-02 - 4.1.1 - fix(classes.typedserver)
|
||||
Instantiate and register DevToolsController only when injectReload is enabled; compile ControllerRegistry routes after registration
|
||||
|
||||
- DevToolsController is now created and registered only if options.injectReload is true to avoid unnecessary/invalid registrations when live reload is disabled.
|
||||
- ControllerRegistry.compileRoutes() is invoked after registering controllers to precompile decorated routes for faster route matching.
|
||||
|
||||
## 2025-12-02 - 4.1.0 - feat(TypedServer)
|
||||
Integrate SmartServe controller routing; add built-in routes controller and refactor TypedServer to use controllers and FileServer
|
||||
|
||||
- Add BuiltInRoutesController exposing /robots.txt, /manifest.json, /sitemap, /sitemap-news, /feed and /appversion
|
||||
- Refactor TypedRequestHandler into a SmartServe-decorated TypedRequestController and register it with ControllerRegistry
|
||||
- Refactor TypedServer to use SmartServe: register controller instances, use ControllerRegistry matching, and delegate WebSocket integration to SmartServe
|
||||
- Introduce FileServer-based static serving with HTML reload script injection and improved default root handling
|
||||
- Expand supported HTTP methods to include HEAD and OPTIONS
|
||||
- Remove legacy FeedHelper and consolidate sitemap/feed handling into controllers and helpers
|
||||
- Enhance servertools legacy Express utilities: improved HandlerProxy, HandlerStatic, Compressor with caching and preferred compression support
|
||||
- Service worker subsystem improvements: CacheManager, NetworkManager, UpdateManager and backend enhancements for robust caching, revalidation and client reloads
|
||||
- Web-inject LitElement properties switched from private fields to accessor syntax (typedserver_web.infoscreen)
|
||||
|
||||
## 2025-12-02 - 4.0.0 - BREAKING CHANGE(typedserver)
|
||||
Migrate to new push.rocks packages and async smartfs API; replace smartchok with smartwatch; update deps and service worker handling
|
||||
|
||||
- Major dependency updates: @push.rocks packages upgraded (smartfile -> v13, smartfs added v1.2.0, smartenv v6, smartrequest v5, smartwatch v5, webrequest v4), Express and dev-tooling bumped.
|
||||
- Replace sync smartfile APIs with async SmartFs instance (plugins.fsInstance). All file reads now use async smartfs calls.
|
||||
- smartfile v13 migration: removed sync fs helpers; added plugins.fsInstance (SmartFs + Node provider).
|
||||
- Renamed file watcher usage: Smartchok -> Smartwatch and property names updated (smartwatchInstance).
|
||||
- WebRequest class rename handled: WebRequest -> WebrequestClient (webrequest v4).
|
||||
- Service worker bundle is lazy-loaded (avoid startup sync file reads) and added routes for bundle and source map.
|
||||
- Service worker & SW-related improvements: more robust caching, enhanced cache headers, offline handling, revalidation, and update forcing logic.
|
||||
- createServeDirHash now uses smartfs.directory().recursive().treeHash() and truncates hash to 12 chars; fallback hash logic retained.
|
||||
- HandlerStatic, HandlerProxy and route handling hardened for Express 5 wildcard params (array/various shapes supported).
|
||||
- Various runtime improvements: safer start/stop handling, improved error logging, and non-blocking initialization of optional features (file watcher, TypedSocket).
|
||||
- Updated tooling/dev deps: @git.zone/tsbuild/tsbundle/tstest and @types/node updated.
|
||||
|
||||
## 2025-11-19 - 3.0.80 - fix(dependencies)
|
||||
Bump dependencies and devDependencies to updated versions
|
||||
|
||||
- Upgrade @push.rocks/smartfeed: ^1.0.11 → ^1.4.0
|
||||
- Upgrade @push.rocks/smartfile: ^11.2.5 → ^11.2.7
|
||||
- Upgrade @push.rocks/smartjson: ^5.0.20 → ^5.2.0
|
||||
- Upgrade @push.rocks/smartlog: ^3.1.8 → ^3.1.10
|
||||
- Upgrade @push.rocks/smartsitemap: ^2.0.3 → ^2.0.4
|
||||
- Upgrade @push.rocks/taskbuffer: ^3.1.7 → ^3.4.0
|
||||
- Upgrade @tsclass/tsclass: ^9.2.0 → ^9.3.0
|
||||
- Upgrade @types/express: ^5.0.3 → ^5.0.5
|
||||
- Dev: Upgrade @git.zone/tsbuild: ^2.6.4 → ^3.1.0
|
||||
- Dev: Upgrade @git.zone/tsbundle: ^2.5.1 → ^2.5.2
|
||||
- Dev: Upgrade @git.zone/tsrun: ^1.3.3 → ^2.0.0
|
||||
- Dev: Upgrade @git.zone/tstest: ^2.3.4 → ^2.8.2
|
||||
|
||||
## 2025-09-03 - 3.0.79 - fix(servertools)
|
||||
Normalize Express wildcard parameter notation to /{*splat} across server routes and handlers; add local Claude settings
|
||||
|
||||
- Replaced route pattern '/*splat' with '/{*splat}' in ts/classes.typedserver.ts and ts/servertools/tools.sslredirect.ts
|
||||
- Updated Express options route to use '/{*splat}' in ts/servertools/classes.server.ts
|
||||
- Clarified wildcard handling comments and array-join logic for splat params in ts/servertools/classes.handlerproxy.ts and ts/servertools/classes.handlerstatic.ts
|
||||
- Added .claude/settings.local.json containing local tool permissions for Claude/dev onboarding
|
||||
- No functional API changes — routing pattern normalization and comment/handler improvements only
|
||||
|
||||
## 2025-09-03 - 3.0.78 - fix(servertools)
|
||||
Fix wildcard path extraction for static/proxy handlers, correct serviceworker route, add local settings and test typo fix
|
||||
|
||||
- Make HandlerProxy and HandlerStatic robust to Express 5 wildcard param shapes (handle req.params.splat, numeric params, req.baseUrl and root routes) to correctly compute relative paths
|
||||
- Change serviceworker route registration to use '/serviceworker/*splat' (instead of previous pattern) for consistent wildcard handling
|
||||
- Fix test wording typo in test/test.server.ts ('exposer' -> 'expose')
|
||||
- Add .claude/settings.local.json with local tool permissions and add .serena/.gitignore to ignore /cache
|
||||
|
||||
## 2025-08-17 - 3.0.77 - fix(servertools)
|
||||
Adjust route wildcard patterns and CORS handling; update serviceworker and SSL redirect patterns; bump express dependency; add local Claude settings
|
||||
|
||||
- Normalize route wildcard patterns to use splat tokens (e.g. '/someroute/*' -> '/someroute/*splat', '/*' -> '/*splat') for consistent route matching
|
||||
- Update serviceworker route registration to '/serviceworker{.*}' and adjust related handler
|
||||
- Change SSL redirect route from '*' to '/*splat'
|
||||
- Adjust CORS preflight options path to '/*splat' and update tests to reflect new route patterns
|
||||
- Bump express dependency from ^4.21.2 to ^5.1.0
|
||||
- Add .claude/settings.local.json for local Claude tool permissions
|
||||
|
||||
## 2025-08-16 - 3.0.76 - fix(handlerproxy)
|
||||
Use SmartRequest API and improve proxy/asset response handling; update tests and bump dependencies; add local project configuration files
|
||||
|
||||
- Replace deprecated smartrequest.request usage with SmartRequest fluent API in ts/servertools/classes.handlerproxy.ts and add explicit handling for GET/POST/PUT/DELETE/PATCH methods.
|
||||
- Normalize proxied response body handling by using arrayBuffer()/text() and converting to Buffer to avoid body type inconsistencies.
|
||||
- Switch asset fetching in ts/utilityservers/classes.websiteserver.ts to SmartRequest + arrayBuffer for reliable binary handling.
|
||||
- Update tests (test/test.server.ts) to use SmartRequest.create() and to read response bodies via response.text(), matching the updated request API.
|
||||
- Bump dependencies: @push.rocks/smartrequest -> ^4.2.1 and body-parser -> ^2.2.0.
|
||||
- Add local project configuration files: .claude/settings.local.json and .serena/project.yml.
|
||||
|
||||
## 2025-08-16 - 3.0.75 - fix(deps)
|
||||
Update dependencies, test tooling and test imports; enhance npm test script
|
||||
|
||||
- Bump multiple runtime dependencies to newer patch/minor versions (notable updates: @cloudflare/workers-types, @push.rocks/* packages such as smartchok, smartfile, smartlog, smartpath, smartrx, and others, @tsclass/tsclass, @types/express, lit).
|
||||
- Upgrade dev tooling versions: @git.zone/tsbuild and @git.zone/tsbundle; update @git.zone/tstest to v2.3.4.
|
||||
- Improve npm test script by adding --verbose, --logfile and increased --timeout.
|
||||
- Fix test imports to use @git.zone/tstest/tapbundle in test/test.reload.ts and test/test.server.ts.
|
||||
|
||||
## 2025-04-12 - 3.0.74 - fix(commit-info)
|
||||
chore: update commit metadata (no source code changes)
|
||||
|
||||
- Uncommitted diff shows no changes in source files; the commit updates internal commit info only.
|
||||
|
||||
## 2025-04-11 - 3.0.73 - fix(metadata)
|
||||
Update repository URLs and metadata to reflect the new organization scope
|
||||
|
||||
- Changed gitscope from 'pushrocks' to 'api.global' in npmextra.json
|
||||
- Updated repository URL, bugs URL, and homepage in package.json to use code.foss.global/api.global/typedserver
|
||||
|
||||
## 2025-04-11 - 3.0.72 - fix(project)
|
||||
chore: no changes - commit metadata update
|
||||
|
||||
|
||||
## 2025-04-11 - 3.0.71 - fix(serviceworker)
|
||||
Improve error handling and logging in service worker backend and network manager; update multiple dependency versions and packageManager settings.
|
||||
|
||||
- Upgrade dependency versions in package.json (e.g. @cloudflare/workers-types, @push.rocks/smartfile, @push.rocks/smartpromise, @push.rocks/smartrequest, @tsclass/tsclass, and @types/express)
|
||||
- Add packageManager field to package.json
|
||||
- Enhance error handling in ServiceworkerBackend (using try/catch and detailed logging) during client reload, notification display, and alert message sending
|
||||
- Improve network request handling by clearing timeouts and converting errors reliably in NetworkManager
|
||||
- Wrap service worker install and activate event handlers with try/catch to log errors appropriately
|
||||
|
||||
## 2025-03-16 - 3.0.70 - fix(TypedServer)
|
||||
Improve error handling in server startup and response buffering. Validate configuration for reload injections, wrap file watching and TypedSocket initialization in try/catch blocks, enhance client notification and stop procedures, and ensure proper Buffer conversion in the proxy handler.
|
||||
|
||||
- Add validation to throw error if reload script is enabled without a serve directory
|
||||
- Wrap file watching and TypedSocket initialization in try/catch to prevent crashes during startup
|
||||
- Update the reload function to safely notify clients and handle notification errors
|
||||
- Enhance the stop procedure to aggregate cleanup tasks with error handling
|
||||
- Ensure consistent conversion of response bodies to Buffer in HandlerProxy with fallback when undefined
|
||||
- Include fallback hash generation in createServeDirHash for error resilience
|
||||
|
||||
## 2025-03-16 - 3.0.69 - fix(servertools)
|
||||
Fix compression stream creation returns, handler proxy buffer conversion, and sitemap URL concatenation
|
||||
|
||||
- Return compression stream immediately in createCompressionStream for each case instead of using break statements
|
||||
- Convert proxied response to a Buffer in handler proxy rather than throwing an error when it isn't a string
|
||||
- Fix addUrls method in sitemap to correctly concatenate new URLs without duplicating existing entries
|
||||
|
||||
## 2025-02-07 - 3.0.68 - fix(cache-manager)
|
||||
Simplify cache control headers in cache manager
|
||||
|
||||
- Removed unnecessary cache control headers while setting modern Cache-Control.
|
||||
|
||||
## 2025-02-06 - 3.0.67 - fix(serviceworker)
|
||||
Enhance header security for cached resources in service worker
|
||||
|
||||
- Added Cross-Origin-Resource-Policy header management for service worker cached resources.
|
||||
|
||||
## 2025-02-06 - 3.0.66 - fix(serviceworker)
|
||||
Improve error handling and logging in cache manager and update manager.
|
||||
|
||||
- Enhanced error handling and logging in cache management functions.
|
||||
- Corrected network request handling in update manager.
|
||||
- Added missing error handling for fetch events.
|
||||
|
||||
## 2025-02-04 - 3.0.65 - fix(readme)
|
||||
Update documentation with advanced usage and examples
|
||||
|
||||
- Added section on advanced usage including service worker and edge worker setup
|
||||
- Detailed integration examples for type-safe API requests and WebSocket communication
|
||||
- Expanded configuration options and cache strategies
|
||||
|
||||
## 2025-02-04 - 3.0.64 - fix(serviceworker)
|
||||
Improve cache handling and response header management in service worker.
|
||||
|
||||
- Addressed issue preventing caching of certain responses due to missing CORS headers.
|
||||
- Added 'Vary: Origin' header to ensure proper response handling.
|
||||
- Included 'Access-Control-Expose-Headers' for better CORS support.
|
||||
|
||||
## 2025-02-04 - 3.0.63 - fix(core)
|
||||
Refactored caching strategy for service worker to improve compatibility and performance.
|
||||
|
||||
- Removed hard and soft caching distinctions.
|
||||
- Simplified cache setup process.
|
||||
- Improved browser caching control headers.
|
||||
|
||||
## 2025-02-04 - 3.0.62 - fix(Service Worker)
|
||||
Refactor and clean up the cache logic in the Service Worker to improve maintainability and handle Safari-specific cache behavior.
|
||||
|
||||
- Refactored logic for determining cached domains, enhancing the readability and maintainability of the code.
|
||||
- Improved handling of CORS settings in caching requests, notably bypassing caching for soft cached domains in Safari to avoid CORS issues.
|
||||
- Enhanced error response creation for failed resource fetching, maintaining clarity on why and how certain resources were not fetched or cached.
|
||||
- Revised the structure of the caching logic to ensure consistent behavior across all supported browsers.
|
||||
|
||||
## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
|
||||
Fixed caching mechanism to better support Safari's handling of soft-cached domains.
|
||||
|
||||
- Added logic to differentiate between hard and soft cached domains.
|
||||
- Implemented special handling for soft cached domains on Safari by bypassing caching.
|
||||
- Ensured appropriate CORS headers are present in cached responses.
|
||||
- Improved error handling with informative 500 error responses.
|
||||
- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
|
||||
|
||||
## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
|
||||
Fixed caching mechanism to better support Safari's handling of soft-cached domains.
|
||||
|
||||
- Added logic to differentiate between hard and soft cached domains.
|
||||
- Implemented special handling for soft cached domains on Safari by bypassing caching.
|
||||
- Ensured appropriate CORS headers are present in cached responses.
|
||||
- Improved error handling with informative 500 error responses.
|
||||
- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
|
||||
|
||||
## 2025-02-04 - 3.0.61 - fix(ServiceWorkerCacheManager)
|
||||
Fixed caching mechanism to better support Safari's handling of soft-cached domains.
|
||||
|
||||
- Added logic to differentiate between hard and soft cached domains.
|
||||
- Implemented special handling for soft cached domains on Safari by bypassing caching.
|
||||
- Ensured appropriate CORS headers are present in cached responses.
|
||||
- Improved error handling with informative 500 error responses.
|
||||
- Optimized caching logic to prevent redundant caching and potential issues with locked streams on Safari.
|
||||
|
||||
## 2025-02-04 - 3.0.60 - fix(cachemanager)
|
||||
Improve cache management and error handling
|
||||
|
||||
- Updated comments for clarity and consistency.
|
||||
- Enhanced error handling in `fetch` event listener.
|
||||
- Optimized cache key management and cleanup process.
|
||||
- Ensured CORS headers are set for cached responses.
|
||||
- Improved logging for caching operations.
|
||||
|
||||
## 2025-02-03 - 3.0.59 - fix(serviceworker)
|
||||
Fixed CORS and Cache Control handling for Service Worker
|
||||
|
||||
- Improved handling of CORS settings for external requests.
|
||||
- Preserved important headers while excluding caching headers.
|
||||
- Ensured the presence of CORS headers in cached responses.
|
||||
- Adjusted Cache-Control headers to prevent browser caching but allow service worker caching.
|
||||
|
||||
## 2025-02-03 - 3.0.58 - fix(network-manager)
|
||||
Refined network management logic for better offline handling.
|
||||
|
||||
- Improved logic to handle missing connections more gracefully.
|
||||
- Added detailed online/offline connection status logging.
|
||||
- Implemented a check for stale cache with a grace period for offline scenarios.
|
||||
- Network requests now use optimized retries and timeouts.
|
||||
|
||||
## 2025-02-03 - 3.0.57 - fix(updateManager)
|
||||
Refine cache management for service worker updates.
|
||||
|
||||
- Ensured cache is forcibly updated if older than defined maximum age.
|
||||
- Implemented interval checks and forced updates for cache staleness.
|
||||
- Updated version information and cache timestamps upon forced updates or validations.
|
||||
|
||||
## 2025-02-03 - 3.0.56 - fix(cachemanager)
|
||||
Adjust cache control headers and fix redundant code
|
||||
|
||||
- Remove duplicate assetbroker URLs in the cache evaluation logic.
|
||||
- Update cache control headers to improve caching behavior.
|
||||
- Increase the timeout for fetch operations to improve compatibility.
|
||||
|
||||
## 2025-01-28 - 3.0.55 - fix(server)
|
||||
Fix response content manipulation for HTML files with injectReload
|
||||
|
||||
- Moved fileString declaration inside HTML file handling block to prevent unnecessary string conversion for non-HTML files.
|
||||
- Corrected responseContent assignment to ensure modified HTML strings are converted back to Buffer format.
|
||||
|
||||
## 2025-01-28 - 3.0.54 - fix(servertools)
|
||||
Fixed an issue with compression results handling in HandlerStatic where content was always being written even if not compressed.
|
||||
|
||||
- Corrected the double writing of response in HandlerStatic.
|
||||
- Ensured that file buffers are only conditionally written based on compression availability.
|
||||
|
||||
## 2024-12-26 - 3.0.53 - fix(infohtml)
|
||||
Remove Sentry script and logo from HTML template
|
||||
|
||||
- Removed Sentry script from the HTML template.
|
||||
- Removed Lossless GmbH logo and contact info.
|
||||
- Updated footer link to point to foss.global.
|
||||
|
||||
## 2024-12-25 - 3.0.52 - fix(dependencies)
|
||||
Bump package versions in dependencies and exports.
|
||||
|
||||
- Updated package dependencies to their latest versions.
|
||||
- Added './infohtml' in package exports.
|
||||
|
||||
## 2024-08-27 - 3.0.51 - fix(core)
|
||||
Update dependencies and fix service worker cache manager and task manager functionalities
|
||||
|
||||
- Updated dependencies in package.json to their latest versions
|
||||
- Enhanced service worker cache manager to include additional scoped URLs
|
||||
- Fixed task manager to start the task manager and added update task functionality
|
||||
- Removed .gitlab-ci.yml from the repository as part of the cleanup
|
||||
|
||||
## 2024-05-25 - 3.0.43 to 3.0.50 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.43 to 3.0.50
|
||||
|
||||
## 2024-05-23 - 3.0.37 to 3.0.42 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.37 to 3.0.42
|
||||
|
||||
## 2024-05-17 - 3.0.37 - Core
|
||||
Routine update and bug fix
|
||||
|
||||
- Updated core functionalities
|
||||
|
||||
## 2024-05-14 - 3.0.33 to 3.0.36 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.33 to 3.0.36
|
||||
|
||||
## 2024-05-13 - 3.0.31 to 3.0.32 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.31 to 3.0.32
|
||||
|
||||
## 2024-05-11 - 3.0.29 to 3.0.31 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.29 to 3.0.31
|
||||
|
||||
## 2024-04-19 - 3.0.27 to 3.0.28 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.27 to 3.0.28
|
||||
|
||||
## 2024-04-14 - 3.0.27 - Documentation
|
||||
Updated Documentation
|
||||
|
||||
- Improved and updated documentation
|
||||
|
||||
## 2024-03-01 - 3.0.25 to 3.0.26 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.25 to 3.0.26
|
||||
|
||||
## 2024-02-21 - 3.0.20 to 3.0.24 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.20 to 3.0.24
|
||||
|
||||
## 2024-01-19 - 3.0.19 to 3.0.20 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.19 to 3.0.20
|
||||
|
||||
## 2024-01-09 - 3.0.14 to 3.0.18 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.14 to 3.0.18
|
||||
|
||||
## 2024-01-08 - 3.0.11 to 3.0.13 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.11 to 3.0.13
|
||||
|
||||
## 2024-01-07 - 3.0.9 to 3.0.10 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.9 to 3.0.10
|
||||
|
||||
## 2023-11-06 - 3.0.8 to 3.0.9 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.8 to 3.0.9
|
||||
|
||||
## 2023-10-23 - 3.0.6 to 3.0.7 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.6 to 3.0.7
|
||||
|
||||
## 2023-10-20 - 3.0.5 to 3.0.6 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.5 to 3.0.6
|
||||
|
||||
## 2023-09-21 - 3.0.4 to 3.0.5 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.4 to 3.0.5
|
||||
|
||||
## 2023-08-06 - 3.0.2 to 3.0.3 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.2 to 3.0.3
|
||||
|
||||
## 2023-08-03 - 3.0.1 to 3.0.0 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 3.0.1 to 3.0.0
|
||||
|
||||
## 2023-08-03 - 2.0.65 - Core
|
||||
Breaking change in core update
|
||||
|
||||
- Introduced breaking changes updating core functionalities
|
||||
|
||||
## 2023-07-02 - 2.0.59 to 2.0.64 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.59 to 2.0.64
|
||||
|
||||
## 2023-07-01 - 2.0.54 to 2.0.58 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.54 to 2.0.58
|
||||
|
||||
## 2023-06-12 - 2.0.53 - Core
|
||||
Routine update and bug fix
|
||||
|
||||
- Updated core functionalities
|
||||
|
||||
## 2023-04-10 - 2.0.52 to 2.0.53 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.52 to 2.0.53
|
||||
|
||||
## 2023-04-04 - 2.0.49 to 2.0.51 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.49 to 2.0.51
|
||||
|
||||
## 2023-03-31 - 2.0.45 to 2.0.48 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.45 to 2.0.48
|
||||
|
||||
## 2023-03-30 - 2.0.37 to 2.0.44 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.37 to 2.0.44
|
||||
|
||||
## 2023-03-29 - 2.0.33 to 2.0.36 - Core
|
||||
Routine updates and bug fixes
|
||||
|
||||
- Updated core functionalities for better performance and stability in versions 2.0.33 to 2.0.36
|
||||
@@ -5,12 +5,31 @@
|
||||
"gitzone": {
|
||||
"projectType": "npm",
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "pushrocks",
|
||||
"githost": "code.foss.global",
|
||||
"gitscope": "api.global",
|
||||
"gitrepo": "typedserver",
|
||||
"description": "easy serving of static files",
|
||||
"npmPackagename": "@apiglobal/typedserver",
|
||||
"license": "MIT"
|
||||
"description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
|
||||
"npmPackagename": "@api.global/typedserver",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"TypeScript",
|
||||
"static file serving",
|
||||
"live reload",
|
||||
"compression",
|
||||
"typed requests",
|
||||
"HTTP server",
|
||||
"SSL",
|
||||
"cors",
|
||||
"express middleware",
|
||||
"proxy",
|
||||
"sitemap",
|
||||
"feeds",
|
||||
"robots.txt",
|
||||
"compression (gzip, deflate, brotli)"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tsdoc": {
|
||||
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
||||
}
|
||||
}
|
||||
110
package.json
110
package.json
@@ -1,31 +1,52 @@
|
||||
{
|
||||
"name": "@apiglobal/typedserver",
|
||||
"version": "2.0.36",
|
||||
"description": "easy serving of static files",
|
||||
"main": "dist_ts/index.js",
|
||||
"typings": "dist_ts/index.d.ts",
|
||||
"name": "@api.global/typedserver",
|
||||
"version": "7.7.1",
|
||||
"description": "A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./dist_ts/index.js",
|
||||
"./infohtml": "./dist_ts/infohtml/index.js",
|
||||
"./backend": "./dist_ts/index.js",
|
||||
"./edgeworker": "./dist_ts_edgeworker/index.js",
|
||||
"./web_inject": "./dist_ts_web_inject/index.js",
|
||||
"./web_serviceworker": "./dist_ts_web_serviceworker/index.js",
|
||||
"./web_serviceworker_client": "./dist_ts_web_serviceworker_client/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "npm run build && tstest test/",
|
||||
"build": "tsbuild --web --allowimplicitany && tsbundle --from ./ts_web/index.ts --to ./dist_ts_web/bundle.js",
|
||||
"buildDocs": "tsdoc"
|
||||
"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 && tsbundle --from ./ts_swdash/index.ts --to ./dist_ts_swdash/bundle.js",
|
||||
"interfaces": "tsbuild interfaces --web --allowimplicitany --skiplibcheck",
|
||||
"docs": "tsdoc aidoc"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/pushrocks/easyserve.git"
|
||||
"url": "https://code.foss.global/api.global/typedserver.git"
|
||||
},
|
||||
"keywords": [
|
||||
"serve",
|
||||
"browser-sync"
|
||||
"TypeScript",
|
||||
"static file serving",
|
||||
"live reload",
|
||||
"compression",
|
||||
"typed requests",
|
||||
"HTTP server",
|
||||
"SSL",
|
||||
"cors",
|
||||
"proxy",
|
||||
"sitemap",
|
||||
"feeds",
|
||||
"robots.txt",
|
||||
"compression (gzip, deflate, brotli)"
|
||||
],
|
||||
"author": "Lossless GmbH <office@lossless.com> (https://lossless.com)",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/pushrocks/easyserve/issues"
|
||||
"url": "https://code.foss.global/api.global/typedserver/issues"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
"ts_web/**/*",
|
||||
"ts_swdash/**/*",
|
||||
"dist/**/*",
|
||||
"dist_*/**/*",
|
||||
"dist_ts/**/*",
|
||||
@@ -35,34 +56,53 @@
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"homepage": "https://github.com/pushrocks/easyserve",
|
||||
"homepage": "https://code.foss.global/api.global/typedserver",
|
||||
"dependencies": {
|
||||
"@apiglobal/typedrequest": "^2.0.12",
|
||||
"@apiglobal/typedrequest-interfaces": "^2.0.1",
|
||||
"@apiglobal/typedsocket": "^2.0.23",
|
||||
"@pushrocks/smartchok": "^1.0.23",
|
||||
"@pushrocks/smartdelay": "^2.0.13",
|
||||
"@pushrocks/smartexpress": "^4.0.34",
|
||||
"@pushrocks/smartfile": "^10.0.7",
|
||||
"@pushrocks/smartlog": "^3.0.1",
|
||||
"@pushrocks/smartlog-destination-devtools": "^1.0.10",
|
||||
"@pushrocks/smartopen": "^2.0.0",
|
||||
"@pushrocks/smartpath": "^5.0.5",
|
||||
"@pushrocks/smartpromise": "^3.1.7",
|
||||
"@pushrocks/smartrx": "^3.0.0",
|
||||
"@pushrocks/webstore": "^2.0.5",
|
||||
"lit": "^2.7.0"
|
||||
"@api.global/typedrequest": "^3.1.11",
|
||||
"@api.global/typedrequest-interfaces": "^3.0.19",
|
||||
"@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",
|
||||
"@push.rocks/smartdelay": "^3.0.5",
|
||||
"@push.rocks/smartenv": "^6.0.0",
|
||||
"@push.rocks/smartfeed": "^1.4.0",
|
||||
"@push.rocks/smartfile": "^13.1.0",
|
||||
"@push.rocks/smartfs": "^1.2.0",
|
||||
"@push.rocks/smartjson": "^5.2.0",
|
||||
"@push.rocks/smartlog": "^3.1.10",
|
||||
"@push.rocks/smartlog-destination-devtools": "^1.0.12",
|
||||
"@push.rocks/smartlog-interfaces": "^3.0.2",
|
||||
"@push.rocks/smartmanifest": "^2.0.2",
|
||||
"@push.rocks/smartmatch": "^2.0.0",
|
||||
"@push.rocks/smartmime": "^2.0.4",
|
||||
"@push.rocks/smartntml": "^2.0.8",
|
||||
"@push.rocks/smartopen": "^2.0.0",
|
||||
"@push.rocks/smartpath": "^6.0.0",
|
||||
"@push.rocks/smartpromise": "^4.2.3",
|
||||
"@push.rocks/smartrequest": "^5.0.1",
|
||||
"@push.rocks/smartrx": "^3.0.10",
|
||||
"@push.rocks/smartserve": "^1.1.2",
|
||||
"@push.rocks/smartsitemap": "^2.0.4",
|
||||
"@push.rocks/smartstream": "^3.2.5",
|
||||
"@push.rocks/smarttime": "^4.1.1",
|
||||
"@push.rocks/smartwatch": "^5.0.0",
|
||||
"@push.rocks/taskbuffer": "^3.4.0",
|
||||
"@push.rocks/webrequest": "^4.0.1",
|
||||
"@push.rocks/webstore": "^2.0.20",
|
||||
"@tsclass/tsclass": "^9.3.0",
|
||||
"lit": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.63",
|
||||
"@gitzone/tsbundle": "^2.0.6",
|
||||
"@gitzone/tsrun": "^1.2.39",
|
||||
"@gitzone/tstest": "^1.0.72",
|
||||
"@pushrocks/tapbundle": "^5.0.4",
|
||||
"@types/node": "^18.15.11"
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.3",
|
||||
"@git.zone/tsrun": "^2.0.0",
|
||||
"@git.zone/tstest": "^3.1.3",
|
||||
"@types/node": "^24.10.1"
|
||||
},
|
||||
"private": false,
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
]
|
||||
],
|
||||
"packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
|
||||
}
|
||||
|
||||
12328
pnpm-lock.yaml
generated
12328
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
41
readme.hints.md
Normal file
41
readme.hints.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Project Hints - @api.global/typedserver
|
||||
|
||||
## Recent Changes (December 2025)
|
||||
|
||||
### Dependency Updates
|
||||
- `@push.rocks/smartchok` replaced with `@push.rocks/smartwatch` (renamed package, same API)
|
||||
- `@push.rocks/smartfile` upgraded from v11 to v13 (major API change - `fs` module removed)
|
||||
- `@push.rocks/smartfs` added for filesystem operations (v1.2.0+)
|
||||
- `@push.rocks/smartenv` upgraded to v6.0.0
|
||||
- `@push.rocks/smartrequest` upgraded to v5.0.1
|
||||
- `@push.rocks/webrequest` upgraded to v4.0.1 (`WebRequest` renamed to `WebrequestClient`)
|
||||
- Express upgraded to v5.2.1
|
||||
- All `@git.zone/*` dev dependencies updated to latest
|
||||
|
||||
### Code Migration Notes
|
||||
|
||||
#### smartfile v13 Migration
|
||||
- Old: `plugins.smartfile.fs.toStringSync(path)` / `plugins.smartfile.fs.toBufferSync(path)`
|
||||
- New: Use `plugins.fsInstance` (SmartFs instance with Node provider)
|
||||
- String: `await plugins.fsInstance.file(path).encoding('utf8').read() as string`
|
||||
- Buffer: `await plugins.fsInstance.file(path).read() as Buffer`
|
||||
|
||||
#### smartfs treeHash
|
||||
- Old: `plugins.smartfile.fs.fileTreeToHash(dir, pattern)`
|
||||
- New: `await plugins.fsInstance.directory(dir).recursive().treeHash()`
|
||||
|
||||
#### smartwatch (formerly smartchok)
|
||||
- Class renamed: `Smartchok` → `Smartwatch`
|
||||
- API remains the same: `new Smartwatch([paths])`, `.start()`, `.stop()`, `.getObservableFor(event)`
|
||||
|
||||
#### webrequest v4
|
||||
- Class renamed: `WebRequest` → `WebrequestClient`
|
||||
|
||||
### Architecture
|
||||
- `plugins.fsInstance` is a pre-configured SmartFs instance with SmartFsProviderNode
|
||||
- All file operations should be async using smartfs
|
||||
- Sync file operations have been removed
|
||||
|
||||
### Express 5 Notes
|
||||
- Wildcard routes use `/{*splat}` notation
|
||||
- `req.params.splat` can be an array, use `Array.isArray()` check
|
||||
301
readme.md
301
readme.md
@@ -1,49 +1,278 @@
|
||||
# @apiglobal/typedserver
|
||||
easy serving of static files
|
||||
# @api.global/typedserver
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@apiglobal/typedserver)
|
||||
* [gitlab.com (source)](https://gitlab.com/pushrocks/typedserver)
|
||||
* [github.com (source mirror)](https://github.com/pushrocks/typedserver)
|
||||
* [docs (typedoc)](https://pushrocks.gitlab.io/typedserver/)
|
||||
A powerful TypeScript-first web server framework featuring static file serving, live reload, compression, and seamless type-safe API integration. Part of the `@api.global` ecosystem, it provides a modern foundation for building full-stack TypeScript applications with first-class support for typed HTTP requests and WebSocket communication.
|
||||
|
||||
## Status for master
|
||||
## Issue Reporting and Security
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
||||
|
||||
## Usage
|
||||
## ✨ Features
|
||||
|
||||
Use TypeScript for best in class instellisense.
|
||||
- 🔒 **Type-Safe API Ecosystem** - Full TypeScript support with `@api.global/typedrequest` and `@api.global/typedsocket`
|
||||
- ⚡ **Live Reload** - Automatic browser refresh on file changes during development
|
||||
- 🗜️ **Compression** - Built-in support for gzip, deflate, and brotli compression
|
||||
- 🌐 **CORS Management** - Flexible cross-origin resource sharing configuration
|
||||
- 🔧 **Service Worker Integration** - Advanced caching and offline capabilities
|
||||
- ☁️ **Edge Worker Support** - Cloudflare Workers compatible edge computing
|
||||
- 📡 **WebSocket Support** - Real-time bidirectional communication via TypedSocket
|
||||
- 🗺️ **Sitemap & Feeds** - Automatic sitemap and RSS feed generation
|
||||
- 🤖 **Robots.txt** - Built-in robots.txt handling
|
||||
|
||||
```javascript
|
||||
import { TypedServer } from '@apiglobal/typedserver';
|
||||
## 📦 Installation
|
||||
|
||||
let myTypedserver = new TypedServer('/some/path/to/webroot', 8080);
|
||||
myTypedserver.start().then(() => {
|
||||
// this is executed when server is running guaranteed
|
||||
myTypedserver.stop(); // .stop() will work even if not waiting for server to be fully started
|
||||
});
|
||||
```bash
|
||||
# Using pnpm (recommended)
|
||||
pnpm add @api.global/typedserver
|
||||
|
||||
myTypedserver.reload(); // reloads all connected browsers of this instance
|
||||
# Using npm
|
||||
npm install @api.global/typedserver
|
||||
```
|
||||
|
||||
## Contribution
|
||||
## 🚀 Quick Start
|
||||
|
||||
We are always happy for code contributions. If you are not the code contributing type that is ok. Still, maintaining Open Source repositories takes considerable time and thought. If you like the quality of what we do and our modules are useful to you we would appreciate a little monthly contribution: You can [contribute one time](https://lossless.link/contribute-onetime) or [contribute monthly](https://lossless.link/contribute). :)
|
||||
### Basic Static File Server
|
||||
|
||||
For further information read the linked docs at the top of this readme.
|
||||
```typescript
|
||||
import { TypedServer } from '@api.global/typedserver';
|
||||
|
||||
## Legal
|
||||
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||
const server = new TypedServer({
|
||||
serveDir: './public',
|
||||
cors: true,
|
||||
watch: true, // Enable file watching
|
||||
injectReload: true, // Inject live reload script
|
||||
});
|
||||
|
||||
await server.start();
|
||||
console.log('Server running on port 3000');
|
||||
```
|
||||
|
||||
### Server with All Options
|
||||
|
||||
```typescript
|
||||
import { TypedServer } from '@api.global/typedserver';
|
||||
|
||||
const server = new TypedServer({
|
||||
port: 8080,
|
||||
serveDir: './dist',
|
||||
cors: true,
|
||||
watch: true,
|
||||
injectReload: true,
|
||||
enableCompression: true,
|
||||
preferredCompressionMethod: 'brotli',
|
||||
forceSsl: false,
|
||||
sitemap: true,
|
||||
feed: true,
|
||||
robots: true,
|
||||
domain: 'example.com',
|
||||
appVersion: 'v1.0.0',
|
||||
manifest: {
|
||||
name: 'My App',
|
||||
short_name: 'myapp',
|
||||
start_url: '/',
|
||||
display: 'standalone',
|
||||
background_color: '#ffffff',
|
||||
theme_color: '#000000',
|
||||
},
|
||||
});
|
||||
|
||||
await server.start();
|
||||
```
|
||||
|
||||
## 🔌 Type-Safe API Integration
|
||||
|
||||
### Adding TypedRequest Handlers
|
||||
|
||||
```typescript
|
||||
import { TypedServer, servertools } from '@api.global/typedserver';
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
|
||||
// Define your typed request interface
|
||||
interface IGetUser {
|
||||
method: 'getUser';
|
||||
request: { userId: string };
|
||||
response: { name: string; email: string };
|
||||
}
|
||||
|
||||
const server = new TypedServer({ serveDir: './public', cors: true });
|
||||
|
||||
// Create a typed router
|
||||
const typedRouter = new typedrequest.TypedRouter();
|
||||
|
||||
// Add a typed handler
|
||||
typedRouter.addTypedHandler<IGetUser>(
|
||||
new typedrequest.TypedHandler('getUser', async (data) => {
|
||||
// Your logic here
|
||||
return { name: 'John Doe', email: 'john@example.com' };
|
||||
})
|
||||
);
|
||||
|
||||
// Attach the router to the server
|
||||
server.server.addRoute('/api', new servertools.HandlerTypedRouter(typedRouter));
|
||||
|
||||
await server.start();
|
||||
```
|
||||
|
||||
### WebSocket Communication with TypedSocket
|
||||
|
||||
```typescript
|
||||
import { TypedServer } from '@api.global/typedserver';
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
import * as typedsocket from '@api.global/typedsocket';
|
||||
|
||||
const server = new TypedServer({ serveDir: './public', cors: true });
|
||||
const typedRouter = new typedrequest.TypedRouter();
|
||||
|
||||
await server.start();
|
||||
|
||||
// Create WebSocket server attached to the HTTP server
|
||||
const socketServer = await typedsocket.TypedSocket.createServer(
|
||||
typedRouter,
|
||||
server.server
|
||||
);
|
||||
|
||||
// Handle real-time events
|
||||
interface IChatMessage {
|
||||
method: 'sendMessage';
|
||||
request: { text: string; room: string };
|
||||
response: { messageId: string; timestamp: number };
|
||||
}
|
||||
|
||||
typedRouter.addTypedHandler<IChatMessage>(
|
||||
new typedrequest.TypedHandler('sendMessage', async (data) => {
|
||||
return { messageId: crypto.randomUUID(), timestamp: Date.now() };
|
||||
})
|
||||
);
|
||||
```
|
||||
|
||||
## 🛠️ Server Tools
|
||||
|
||||
### Custom Route Handlers
|
||||
|
||||
```typescript
|
||||
import { servertools } from '@api.global/typedserver';
|
||||
|
||||
const server = new servertools.Server({
|
||||
cors: true,
|
||||
domain: 'example.com',
|
||||
});
|
||||
|
||||
// Add a custom route with handler
|
||||
server.addRoute('/api/hello', new servertools.Handler('GET', async (req, res) => {
|
||||
res.json({ message: 'Hello, World!' });
|
||||
}));
|
||||
|
||||
// Serve static files from a directory
|
||||
server.addRoute('/{*splat}', new servertools.HandlerStatic('./public', {
|
||||
serveIndexHtmlDefault: true,
|
||||
enableCompression: true,
|
||||
}));
|
||||
|
||||
await server.start(3000);
|
||||
```
|
||||
|
||||
### Proxy Handler
|
||||
|
||||
```typescript
|
||||
import { servertools } from '@api.global/typedserver';
|
||||
|
||||
const server = new servertools.Server({ cors: true });
|
||||
|
||||
// Proxy requests to another server
|
||||
server.addRoute('/proxy/{*splat}', new servertools.HandlerProxy({
|
||||
target: 'https://api.example.com',
|
||||
}));
|
||||
|
||||
await server.start(3000);
|
||||
```
|
||||
|
||||
## ☁️ Edge Worker (Cloudflare Workers)
|
||||
|
||||
```typescript
|
||||
import { EdgeWorker, DomainRouter } from '@api.global/typedserver/edgeworker';
|
||||
|
||||
const router = new DomainRouter();
|
||||
|
||||
router.addDomainInstruction({
|
||||
domainPattern: '*.example.com',
|
||||
originUrl: 'https://origin.example.com',
|
||||
cacheConfig: { maxAge: 3600 },
|
||||
});
|
||||
|
||||
const worker = new EdgeWorker(router);
|
||||
|
||||
// In your Cloudflare Worker entry point
|
||||
export default {
|
||||
fetch: (request: Request, env: any, ctx: any) => worker.handleRequest(request, env, ctx),
|
||||
};
|
||||
```
|
||||
|
||||
## 🔧 Service Worker Client
|
||||
|
||||
```typescript
|
||||
import { ServiceWorkerClient } from '@api.global/typedserver/web_serviceworker_client';
|
||||
|
||||
const swClient = new ServiceWorkerClient();
|
||||
|
||||
// Register and manage service worker
|
||||
await swClient.register('/serviceworker.bundle.js');
|
||||
|
||||
// Listen for updates
|
||||
swClient.onUpdate(() => {
|
||||
console.log('New version available!');
|
||||
});
|
||||
```
|
||||
|
||||
## 📋 Configuration Reference
|
||||
|
||||
### IServerOptions
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
|--------|------|---------|-------------|
|
||||
| `serveDir` | `string` | - | Directory to serve static files from |
|
||||
| `port` | `number \| string` | `3000` | Port to listen on |
|
||||
| `cors` | `boolean` | `true` | Enable CORS headers |
|
||||
| `watch` | `boolean` | `false` | Watch files for changes |
|
||||
| `injectReload` | `boolean` | `false` | Inject live reload script into HTML |
|
||||
| `enableCompression` | `boolean` | `false` | Enable response compression |
|
||||
| `preferredCompressionMethod` | `'gzip' \| 'deflate' \| 'brotli'` | - | Preferred compression algorithm |
|
||||
| `forceSsl` | `boolean` | `false` | Redirect HTTP to HTTPS |
|
||||
| `sitemap` | `boolean` | `false` | Generate sitemap at `/sitemap` |
|
||||
| `feed` | `boolean` | `false` | Generate RSS feed at `/feed` |
|
||||
| `robots` | `boolean` | `false` | Serve robots.txt |
|
||||
| `domain` | `string` | - | Domain name for sitemap/feeds |
|
||||
| `appVersion` | `string` | - | Application version string |
|
||||
| `manifest` | `object` | - | Web App Manifest configuration |
|
||||
| `publicKey` | `string` | - | SSL certificate |
|
||||
| `privateKey` | `string` | - | SSL private key |
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
```
|
||||
@api.global/typedserver
|
||||
├── /backend - Main server exports (TypedServer, servertools)
|
||||
├── /edgeworker - Cloudflare Workers edge computing
|
||||
├── /web_inject - Live reload script injection
|
||||
├── /web_serviceworker - Service Worker implementation
|
||||
└── /web_serviceworker_client - Service Worker client utilities
|
||||
```
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
|
||||
|
||||
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
|
||||
|
||||
### Trademarks
|
||||
|
||||
This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
|
||||
|
||||
Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.
|
||||
|
||||
### Company Information
|
||||
|
||||
Task Venture Capital GmbH
|
||||
Registered at District Court Bremen HRB 35230 HB, Germany
|
||||
|
||||
For any legal inquiries or further information, please contact us via email at hello@task.vc.
|
||||
|
||||
By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { tap, expect } from '@pushrocks/tapbundle';
|
||||
import * as smartpath from '@pushrocks/smartpath';
|
||||
import { tap, expect } from '@git.zone/tstest/tapbundle';
|
||||
import * as smartpath from '@push.rocks/smartpath';
|
||||
|
||||
import { TypedServer } from '../ts/index.js';
|
||||
|
||||
@@ -10,6 +10,7 @@ tap.test('should create a valid instance of TypedServer', async () => {
|
||||
port: 3000,
|
||||
serveDir: smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
|
||||
watch: true,
|
||||
cors: true,
|
||||
});
|
||||
expect(testTypedServer).toBeInstanceOf(TypedServer);
|
||||
});
|
||||
138
test/test.server.ts
Normal file
138
test/test.server.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
// tslint:disable-next-line:no-implicit-dependencies
|
||||
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
||||
|
||||
// helper dependencies
|
||||
// tslint:disable-next-line:no-implicit-dependencies
|
||||
|
||||
import * as smartpath from '@push.rocks/smartpath';
|
||||
import * as smartrequest from '@push.rocks/smartrequest';
|
||||
|
||||
import * as typedserver from '../ts/index.js';
|
||||
|
||||
let testServer: typedserver.servertools.Server;
|
||||
let testRoute: typedserver.servertools.Route;
|
||||
let testRoute2: typedserver.servertools.Route;
|
||||
let testHandler: typedserver.servertools.Handler;
|
||||
|
||||
// =================
|
||||
// Test class Server
|
||||
// =================
|
||||
|
||||
tap.test('should create a valid Server', async () => {
|
||||
testServer = new typedserver.servertools.Server({
|
||||
cors: true,
|
||||
domain: 'testing.git.zone',
|
||||
forceSsl: false,
|
||||
appVersion: 'v3.2.1',
|
||||
manifest: {
|
||||
name: 'Test App',
|
||||
short_name: 'testapp',
|
||||
start_url: '/',
|
||||
display: 'standalone',
|
||||
background_color: '#000',
|
||||
theme_color: '#000',
|
||||
scope: '/',
|
||||
lang: 'en',
|
||||
display_override: ['window-controls-overlay'],
|
||||
},
|
||||
feed: true,
|
||||
sitemap: true,
|
||||
robots: true,
|
||||
});
|
||||
expect(testServer).toBeInstanceOf(typedserver.servertools.Server);
|
||||
});
|
||||
|
||||
// ================
|
||||
// Test class Route
|
||||
// ================
|
||||
|
||||
tap.test('should create a valid Route', async () => {
|
||||
testRoute = testServer.addRoute('/someroute');
|
||||
testRoute2 = testServer.addRoute('/someroute/*splat');
|
||||
expect(testRoute).toBeInstanceOf(typedserver.servertools.Route);
|
||||
});
|
||||
|
||||
// ==================
|
||||
// Test class Handler
|
||||
// ==================
|
||||
|
||||
tap.test('should produce a valid handler', async () => {
|
||||
testHandler = new typedserver.servertools.Handler('POST', (request, response) => {
|
||||
console.log('request body is:');
|
||||
console.log(request.body);
|
||||
response.send('hi');
|
||||
});
|
||||
expect(testHandler).toBeInstanceOf(typedserver.servertools.Handler);
|
||||
});
|
||||
|
||||
tap.test('should add handler to route', async () => {
|
||||
testRoute.addHandler(testHandler);
|
||||
});
|
||||
|
||||
tap.test('should create a valid StaticHandler', async () => {
|
||||
testRoute2.addHandler(
|
||||
new typedserver.servertools.HandlerStatic(
|
||||
smartpath.get.dirnameFromImportMetaUrl(import.meta.url)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
tap.test('should add typedrequest and typedsocket', async () => {
|
||||
const typedrequest = await import('@api.global/typedrequest');
|
||||
|
||||
const typedrouter = new typedrequest.TypedRouter();
|
||||
testServer.addTypedRequest(typedrouter);
|
||||
testServer.addTypedSocket(typedrouter);
|
||||
});
|
||||
|
||||
// =====================
|
||||
// start the server and test the configuration
|
||||
// =====================
|
||||
|
||||
tap.test('should start the server allright', async () => {
|
||||
await testServer.start(3000);
|
||||
});
|
||||
|
||||
// see if a demo request holds up
|
||||
tap.test('should issue a request', async (tools) => {
|
||||
const smartRequestInstance = smartrequest.SmartRequest.create();
|
||||
const response = await smartRequestInstance
|
||||
.url('http://127.0.0.1:3000/someroute')
|
||||
.headers({
|
||||
'X-Forwarded-Proto': 'https',
|
||||
})
|
||||
.json({
|
||||
someprop: 'hi',
|
||||
})
|
||||
.post();
|
||||
const responseBody = await response.text();
|
||||
console.log(responseBody);
|
||||
});
|
||||
|
||||
tap.test('should get a file from disk', async () => {
|
||||
const response = await fetch('http://127.0.0.1:3000/someroute/testresponse.js');
|
||||
console.log(response.status);
|
||||
console.log(response.headers);
|
||||
});
|
||||
|
||||
tap.test('should answer a preflight request', async () => {
|
||||
const response = await fetch('http://127.0.0.1:3000/some/randompath/', {
|
||||
method: 'OPTIONS',
|
||||
});
|
||||
console.log(response.headers);
|
||||
});
|
||||
|
||||
tap.test('should expose a sitemap', async () => {
|
||||
const response = await fetch('http://127.0.0.1:3000/sitemap');
|
||||
console.log(await response.text());
|
||||
});
|
||||
|
||||
// ========
|
||||
// clean up
|
||||
// ========
|
||||
|
||||
tap.test('should stop the server', async () => {
|
||||
await testServer.stop();
|
||||
});
|
||||
|
||||
tap.start();
|
||||
@@ -1,8 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
* autocreated commitinfo by @push.rocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@apiglobal/typedserver',
|
||||
version: '2.0.36',
|
||||
description: 'easy serving of static files'
|
||||
name: '@api.global/typedserver',
|
||||
version: '7.7.1',
|
||||
description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
|
||||
}
|
||||
|
||||
749
ts/classes.typedserver.ts
Normal file
749
ts/classes.typedserver.ts
Normal file
@@ -0,0 +1,749 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as paths from './paths.js';
|
||||
import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { DevToolsController } from './controllers/controller.devtools.js';
|
||||
import { TypedRequestController } from './controllers/controller.typedrequest.js';
|
||||
import { BuiltInRoutesController } from './controllers/controller.builtin.js';
|
||||
|
||||
export interface IServerOptions {
|
||||
/**
|
||||
* serve a particular directory
|
||||
*/
|
||||
serveDir?: string;
|
||||
|
||||
/**
|
||||
* inject a reload script that takes care of live reloading
|
||||
*/
|
||||
injectReload?: boolean;
|
||||
|
||||
/**
|
||||
* watch the serve directory?
|
||||
*/
|
||||
watch?: boolean;
|
||||
|
||||
cors: boolean;
|
||||
|
||||
/**
|
||||
* a default answer given in case there is no other handler.
|
||||
*/
|
||||
defaultAnswer?: () => Promise<string>;
|
||||
|
||||
/**
|
||||
* will try to reroute traffic to an ssl connection using headers
|
||||
*/
|
||||
forceSsl?: boolean;
|
||||
|
||||
/**
|
||||
* allows serving manifests
|
||||
*/
|
||||
manifest?: plugins.smartmanifest.ISmartManifestConstructorOptions;
|
||||
|
||||
/**
|
||||
* the port to listen on
|
||||
*/
|
||||
port?: number | string;
|
||||
publicKey?: string;
|
||||
privateKey?: string;
|
||||
sitemap?: boolean;
|
||||
feed?: boolean;
|
||||
robots?: boolean;
|
||||
domain?: string;
|
||||
|
||||
/**
|
||||
* convey information about the app being served
|
||||
*/
|
||||
appVersion?: string;
|
||||
feedMetadata?: plugins.smartfeed.IFeedOptions;
|
||||
articleGetterFunction?: () => Promise<plugins.tsclass.content.IArticle[]>;
|
||||
blockWaybackMachine?: boolean;
|
||||
|
||||
/**
|
||||
* SPA fallback - serve index.html for non-file routes (e.g., /login, /dashboard)
|
||||
* Useful for single-page applications with client-side routing
|
||||
*/
|
||||
spaFallback?: boolean;
|
||||
}
|
||||
|
||||
export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'ALL';
|
||||
|
||||
export interface IRouteHandler {
|
||||
(request: Request): Promise<Response | null>;
|
||||
}
|
||||
|
||||
export interface IRegisteredRoute {
|
||||
pattern: string;
|
||||
regex: RegExp;
|
||||
paramNames: string[];
|
||||
method: THttpMethod;
|
||||
handler: IRouteHandler;
|
||||
}
|
||||
|
||||
export class TypedServer {
|
||||
// instance
|
||||
public options: IServerOptions;
|
||||
public smartServe: plugins.smartserve.SmartServe;
|
||||
public smartwatchInstance: plugins.smartwatch.Smartwatch;
|
||||
public serveDirHashSubject = new plugins.smartrx.rxjs.ReplaySubject<string>(1);
|
||||
public serveHash: string = '000000';
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
// Sitemap helper
|
||||
private sitemapHelper: SitemapHelper;
|
||||
private smartmanifestInstance: plugins.smartmanifest.SmartManifest;
|
||||
|
||||
// Decorated controllers
|
||||
private devToolsController: DevToolsController;
|
||||
private typedRequestController: TypedRequestController;
|
||||
private builtInRoutesController: BuiltInRoutesController;
|
||||
|
||||
// File server for static files
|
||||
private fileServer: plugins.smartserve.FileServer;
|
||||
|
||||
// Custom route handlers (for addRoute API)
|
||||
private customRoutes: IRegisteredRoute[] = [];
|
||||
|
||||
public lastReload: number = Date.now();
|
||||
public ended = false;
|
||||
|
||||
constructor(optionsArg: IServerOptions) {
|
||||
const standardOptions: IServerOptions = {
|
||||
port: 3000,
|
||||
injectReload: false,
|
||||
serveDir: null,
|
||||
watch: false,
|
||||
cors: true,
|
||||
};
|
||||
this.options = {
|
||||
...standardOptions,
|
||||
...optionsArg,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Access sitemap URLs (for adding/replacing)
|
||||
*/
|
||||
public get sitemap() {
|
||||
return this.sitemapHelper;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a custom route handler
|
||||
* Supports Express-style path patterns like '/path/:param' and '/path/*splat'
|
||||
* @param path - The route path pattern
|
||||
* @param method - HTTP method (GET, POST, PUT, DELETE, PATCH, ALL)
|
||||
* @param handler - Async function that receives Request and returns Response or null
|
||||
*/
|
||||
public addRoute(path: string, method: THttpMethod, handler: IRouteHandler): void {
|
||||
// Convert Express-style path to regex
|
||||
const paramNames: string[] = [];
|
||||
let regexPattern = path
|
||||
// Handle named parameters :param
|
||||
.replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
|
||||
paramNames.push(paramName);
|
||||
return '([^/]+)';
|
||||
})
|
||||
// Handle wildcard *splat (matches everything including slashes)
|
||||
.replace(/\*([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
|
||||
paramNames.push(paramName);
|
||||
return '(.*)';
|
||||
});
|
||||
|
||||
// Ensure exact match
|
||||
regexPattern = `^${regexPattern}$`;
|
||||
|
||||
this.customRoutes.push({
|
||||
pattern: path,
|
||||
regex: new RegExp(regexPattern),
|
||||
paramNames,
|
||||
method,
|
||||
handler,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse route parameters from a path using a registered route
|
||||
*/
|
||||
private parseRouteParams(
|
||||
route: IRegisteredRoute,
|
||||
pathname: string
|
||||
): Record<string, string> | null {
|
||||
const match = pathname.match(route.regex);
|
||||
if (!match) return null;
|
||||
|
||||
const params: Record<string, string> = {};
|
||||
route.paramNames.forEach((name, index) => {
|
||||
params[name] = match[index + 1];
|
||||
});
|
||||
return params;
|
||||
}
|
||||
|
||||
/**
|
||||
* inits and starts the server
|
||||
*/
|
||||
public async start() {
|
||||
// Validate essential configuration before starting
|
||||
if (this.options.injectReload && !this.options.serveDir) {
|
||||
throw new Error(
|
||||
'You set to inject the reload script without a serve dir. This is not supported at the moment.'
|
||||
);
|
||||
}
|
||||
|
||||
const port =
|
||||
typeof this.options.port === 'string'
|
||||
? parseInt(this.options.port, 10)
|
||||
: this.options.port || 3000;
|
||||
|
||||
// Initialize optional helpers
|
||||
if (this.options.sitemap) {
|
||||
this.sitemapHelper = new SitemapHelper(this.options.domain);
|
||||
}
|
||||
if (this.options.manifest) {
|
||||
this.smartmanifestInstance = new plugins.smartmanifest.SmartManifest(this.options.manifest);
|
||||
}
|
||||
|
||||
// Initialize file server for static files
|
||||
if (this.options.serveDir) {
|
||||
this.fileServer = new plugins.smartserve.FileServer({
|
||||
root: this.options.serveDir,
|
||||
index: ['index.html'],
|
||||
etag: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize decorated controllers
|
||||
if (this.options.injectReload) {
|
||||
this.devToolsController = new DevToolsController({
|
||||
getLastReload: () => this.lastReload,
|
||||
getEnded: () => this.ended,
|
||||
});
|
||||
}
|
||||
|
||||
this.typedRequestController = new TypedRequestController(this.typedrouter);
|
||||
|
||||
this.builtInRoutesController = new BuiltInRoutesController({
|
||||
domain: this.options.domain,
|
||||
robots: this.options.robots,
|
||||
manifest: this.smartmanifestInstance,
|
||||
sitemap: this.options.sitemap,
|
||||
feed: this.options.feed,
|
||||
appVersion: this.options.appVersion,
|
||||
feedMetadata: this.options.feedMetadata,
|
||||
articleGetterFunction: this.options.articleGetterFunction,
|
||||
blockWaybackMachine: this.options.blockWaybackMachine,
|
||||
getSitemapUrls: () => this.sitemapHelper?.urls || [],
|
||||
});
|
||||
|
||||
// Register controllers with SmartServe's ControllerRegistry
|
||||
if (this.options.injectReload) {
|
||||
plugins.smartserve.ControllerRegistry.registerInstance(this.devToolsController);
|
||||
}
|
||||
plugins.smartserve.ControllerRegistry.registerInstance(this.typedRequestController);
|
||||
plugins.smartserve.ControllerRegistry.registerInstance(this.builtInRoutesController);
|
||||
|
||||
// Compile routes for fast matching
|
||||
plugins.smartserve.ControllerRegistry.compileRoutes();
|
||||
|
||||
// Build SmartServe options
|
||||
const smartServeOptions: plugins.smartserve.ISmartServeOptions = {
|
||||
port,
|
||||
hostname: '0.0.0.0',
|
||||
tls:
|
||||
this.options.privateKey && this.options.publicKey
|
||||
? {
|
||||
key: this.options.privateKey,
|
||||
cert: this.options.publicKey,
|
||||
}
|
||||
: undefined,
|
||||
websocket: {
|
||||
typedRouter: this.typedrouter,
|
||||
onConnectionOpen: (peer) => {
|
||||
peer.tags.add('typedserver_frontend');
|
||||
console.log(`WebSocket connected: ${peer.id}`);
|
||||
},
|
||||
onConnectionClose: (peer) => {
|
||||
console.log(`WebSocket disconnected: ${peer.id}`);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
this.smartServe = new plugins.smartserve.SmartServe(smartServeOptions);
|
||||
|
||||
// Set up custom request handler that integrates with ControllerRegistry
|
||||
this.smartServe.setHandler(async (request: Request): Promise<Response> => {
|
||||
return this.handleRequest(request);
|
||||
});
|
||||
|
||||
// Setup file watching
|
||||
if (this.options.watch && this.options.serveDir) {
|
||||
try {
|
||||
// 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();
|
||||
this.reload();
|
||||
});
|
||||
await this.createServeDirHash();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize file watching:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Start the server
|
||||
await this.smartServe.start();
|
||||
console.log(`TypedServer listening on port ${port}`);
|
||||
|
||||
// Setup TypedSocket using SmartServe integration
|
||||
try {
|
||||
this.typedsocket = plugins.typedsocket.TypedSocket.fromSmartServe(
|
||||
this.smartServe,
|
||||
this.typedrouter
|
||||
);
|
||||
|
||||
// Setup typedrouter handlers
|
||||
this.typedrouter.addTypedHandler<interfaces.IReq_GetLatestServerChangeTime>(
|
||||
new plugins.typedrequest.TypedHandler('getLatestServerChangeTime', async () => {
|
||||
return {
|
||||
time: this.lastReload,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an IRequestContext from a Request
|
||||
*/
|
||||
private async createContext(
|
||||
request: Request,
|
||||
params: Record<string, string>
|
||||
): Promise<plugins.smartserve.IRequestContext> {
|
||||
const url = new URL(request.url);
|
||||
const method = request.method.toUpperCase() as THttpMethod;
|
||||
|
||||
// Parse query params
|
||||
const query: Record<string, string> = {};
|
||||
url.searchParams.forEach((value, key) => {
|
||||
query[key] = value;
|
||||
});
|
||||
|
||||
// Parse body
|
||||
let body: unknown = undefined;
|
||||
const contentType = request.headers.get('content-type');
|
||||
if (contentType?.includes('application/json')) {
|
||||
try {
|
||||
body = await request.clone().json();
|
||||
} catch {
|
||||
body = {};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
request,
|
||||
body,
|
||||
params,
|
||||
query,
|
||||
headers: request.headers,
|
||||
path: url.pathname,
|
||||
method,
|
||||
url,
|
||||
runtime: 'node' as const,
|
||||
state: {},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Add CORS headers to a response
|
||||
*/
|
||||
private addCorsHeaders(response: Response): Response {
|
||||
if (!this.options.cors) return response;
|
||||
|
||||
const headers = new Headers(response.headers);
|
||||
headers.set('Access-Control-Allow-Origin', '*');
|
||||
headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
|
||||
headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
|
||||
headers.set('Access-Control-Max-Age', '86400');
|
||||
|
||||
return new Response(response.body, {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Main request handler - routes to appropriate sub-handlers
|
||||
*/
|
||||
private async handleRequest(request: Request): Promise<Response> {
|
||||
const url = new URL(request.url);
|
||||
const path = url.pathname;
|
||||
const method = request.method.toUpperCase() as THttpMethod;
|
||||
|
||||
// Handle OPTIONS preflight for CORS
|
||||
if (method === 'OPTIONS' && this.options.cors) {
|
||||
return this.addCorsHeaders(new Response(null, { status: 204 }));
|
||||
}
|
||||
|
||||
// Process the request and wrap response with CORS headers
|
||||
const response = await this.handleRequestInternal(request, url, path, method);
|
||||
return this.addCorsHeaders(response);
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal request handler - routes to appropriate sub-handlers
|
||||
*/
|
||||
private async handleRequestInternal(
|
||||
request: Request,
|
||||
url: URL,
|
||||
path: string,
|
||||
method: THttpMethod
|
||||
): Promise<Response> {
|
||||
// First, try to match via ControllerRegistry (decorated routes)
|
||||
const match = plugins.smartserve.ControllerRegistry.matchRoute(path, method);
|
||||
if (match) {
|
||||
try {
|
||||
const context = await this.createContext(request, match.params);
|
||||
const result = await match.route.handler(context);
|
||||
|
||||
// Handle Response or convert to Response
|
||||
if (result instanceof Response) {
|
||||
return result;
|
||||
}
|
||||
return new Response(JSON.stringify(result), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
} catch (error) {
|
||||
if (error instanceof plugins.smartserve.RouteNotFoundError) {
|
||||
// Route explicitly threw "not found", continue to other handlers
|
||||
} else {
|
||||
console.error('Controller error:', error);
|
||||
return new Response('Internal Server Error', { status: 500 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom routes (registered via addRoute)
|
||||
for (const route of this.customRoutes) {
|
||||
if (route.method === 'ALL' || route.method === method) {
|
||||
const params = this.parseRouteParams(route, path);
|
||||
if (params !== null) {
|
||||
(request as any).params = params;
|
||||
const response = await route.handler(request);
|
||||
if (response) return response;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// HTML injection for reload (if enabled)
|
||||
if (this.options.injectReload && this.options.serveDir) {
|
||||
const response = await this.handleHtmlWithInjection(request);
|
||||
if (response) return response;
|
||||
}
|
||||
|
||||
// Try static file serving
|
||||
if (this.fileServer && (method === 'GET' || method === 'HEAD')) {
|
||||
try {
|
||||
const staticResponse = await this.fileServer.serve(request);
|
||||
if (staticResponse) {
|
||||
return staticResponse;
|
||||
}
|
||||
} catch (error) {
|
||||
// Fall through to 404
|
||||
}
|
||||
}
|
||||
|
||||
// Default answer for root
|
||||
if (path === '/' && method === 'GET' && this.options.defaultAnswer) {
|
||||
const html = await this.options.defaultAnswer();
|
||||
return new Response(html, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'text/html' },
|
||||
});
|
||||
}
|
||||
|
||||
// SPA fallback - serve index.html for non-file routes
|
||||
if (this.options.spaFallback && this.options.serveDir && method === 'GET' && !path.includes('.')) {
|
||||
try {
|
||||
const indexPath = plugins.path.join(this.options.serveDir, 'index.html');
|
||||
let html = await plugins.fsInstance.file(indexPath).encoding('utf8').read() as string;
|
||||
|
||||
// Inject reload script if enabled
|
||||
if (this.options.injectReload && html.includes('<head>')) {
|
||||
const injection = `<head>
|
||||
<!-- injected by @apiglobal/typedserver start -->
|
||||
<script async defer type="module" src="/typedserver/devtools"></script>
|
||||
<script>
|
||||
globalThis.typedserver = {
|
||||
lastReload: ${this.lastReload},
|
||||
versionInfo: ${JSON.stringify({}, null, 2)},
|
||||
}
|
||||
</script>
|
||||
<!-- injected by @apiglobal/typedserver stop -->
|
||||
`;
|
||||
html = html.replace('<head>', injection);
|
||||
}
|
||||
|
||||
return new Response(html, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/html; charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
appHash: this.serveHash,
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
// Fall through to 404
|
||||
}
|
||||
}
|
||||
|
||||
// Not found
|
||||
return new Response('Not Found', { status: 404 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle HTML files with reload script injection
|
||||
*/
|
||||
private async handleHtmlWithInjection(request: Request): Promise<Response | null> {
|
||||
const url = new URL(request.url);
|
||||
const requestPath = url.pathname;
|
||||
|
||||
// Check if this is a request for an HTML file or root
|
||||
if (requestPath === '/' || requestPath.endsWith('.html') || !requestPath.includes('.')) {
|
||||
try {
|
||||
let filePath = requestPath === '/' ? 'index.html' : requestPath.slice(1);
|
||||
if (!filePath.endsWith('.html') && !filePath.includes('.')) {
|
||||
filePath = plugins.path.join(filePath, 'index.html');
|
||||
}
|
||||
|
||||
const fullPath = plugins.path.join(this.options.serveDir, filePath);
|
||||
|
||||
// Security check
|
||||
if (!fullPath.startsWith(this.options.serveDir)) {
|
||||
return new Response('Forbidden', { status: 403 });
|
||||
}
|
||||
|
||||
let fileContent = (await plugins.fsInstance
|
||||
.file(fullPath)
|
||||
.encoding('utf8')
|
||||
.read()) as string;
|
||||
|
||||
// Inject reload script
|
||||
if (fileContent.includes('<head>')) {
|
||||
const injection = `<head>
|
||||
<!-- injected by @apiglobal/typedserver start -->
|
||||
<script async defer type="module" src="/typedserver/devtools"></script>
|
||||
<script>
|
||||
globalThis.typedserver = {
|
||||
lastReload: ${this.lastReload},
|
||||
versionInfo: ${JSON.stringify({}, null, 2)},
|
||||
}
|
||||
</script>
|
||||
<!-- injected by @apiglobal/typedserver stop -->
|
||||
`;
|
||||
fileContent = fileContent.replace('<head>', injection);
|
||||
console.log('injected typedserver script.');
|
||||
}
|
||||
|
||||
return new Response(fileContent, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/html; charset=utf-8',
|
||||
'Cache-Control': 'no-cache, no-store, must-revalidate',
|
||||
Pragma: 'no-cache',
|
||||
Expires: '0',
|
||||
appHash: this.serveHash,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
// Fall through to default handling
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* reloads the page
|
||||
*/
|
||||
public async reload() {
|
||||
this.lastReload = Date.now();
|
||||
if (!this.typedsocket) {
|
||||
console.warn('TypedSocket not initialized, skipping client notifications');
|
||||
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'
|
||||
);
|
||||
for (const connection of connections) {
|
||||
const pushTime =
|
||||
this.typedsocket.createTypedRequest<interfaces.IReq_PushLatestServerChangeTime>(
|
||||
'pushLatestServerChangeTime',
|
||||
connection
|
||||
);
|
||||
pushTime.fire({
|
||||
time: this.lastReload,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to notify clients about reload:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops the server and cleans up resources
|
||||
*/
|
||||
public async stop(): Promise<void> {
|
||||
this.ended = true;
|
||||
|
||||
const stopWithErrorHandling = async (
|
||||
stopFn: () => Promise<unknown>,
|
||||
componentName: string
|
||||
): Promise<void> => {
|
||||
try {
|
||||
await stopFn();
|
||||
} catch (err) {
|
||||
console.error(`Error stopping ${componentName}:`, err);
|
||||
}
|
||||
};
|
||||
|
||||
const tasks: Promise<void>[] = [];
|
||||
|
||||
// Stop SmartServe
|
||||
if (this.smartServe) {
|
||||
tasks.push(stopWithErrorHandling(() => this.smartServe.stop(), 'SmartServe'));
|
||||
}
|
||||
|
||||
// Stop TypedSocket (in SmartServe mode, this is a no-op but good for cleanup)
|
||||
if (this.typedsocket) {
|
||||
tasks.push(stopWithErrorHandling(() => this.typedsocket.stop(), 'TypedSocket'));
|
||||
}
|
||||
|
||||
// Stop file watcher
|
||||
if (this.smartwatchInstance) {
|
||||
tasks.push(stopWithErrorHandling(() => this.smartwatchInstance.stop(), 'file watcher'));
|
||||
}
|
||||
|
||||
await Promise.all(tasks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates a hash of the served directory for cache busting
|
||||
*/
|
||||
public async createServeDirHash() {
|
||||
try {
|
||||
const serveDirHash = await plugins.fsInstance
|
||||
.directory(this.options.serveDir)
|
||||
.recursive()
|
||||
.treeHash();
|
||||
this.serveHash = serveDirHash.slice(0, 12);
|
||||
console.log('Current ServeDir hash: ' + this.serveHash);
|
||||
this.serveDirHashSubject.next(this.serveHash);
|
||||
} catch (error) {
|
||||
console.error('Failed to create serve directory hash:', error);
|
||||
const fallbackHash = Date.now().toString(16).slice(-6);
|
||||
this.serveHash = fallbackHash;
|
||||
console.log('Using fallback hash: ' + fallbackHash);
|
||||
this.serveDirHashSubject.next(fallbackHash);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Classes
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Sitemap helper class
|
||||
*/
|
||||
class SitemapHelper {
|
||||
private smartSitemap = new plugins.smartsitemap.SmartSitemap();
|
||||
public urls: plugins.smartsitemap.IUrlInfo[] = [];
|
||||
|
||||
constructor(domain?: string) {
|
||||
if (domain) {
|
||||
this.urls.push({
|
||||
url: `https://${domain}/`,
|
||||
timestamp: Date.now(),
|
||||
frequency: 'daily',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async createSitemap(): Promise<string> {
|
||||
return this.smartSitemap.createSitemapFromUrlInfoArray(this.urls);
|
||||
}
|
||||
|
||||
async createSitemapNews(articles: plugins.tsclass.content.IArticle[]): Promise<string> {
|
||||
return this.smartSitemap.createSitemapNewsFromArticleArray(articles);
|
||||
}
|
||||
|
||||
replaceUrls(urlsArg: plugins.smartsitemap.IUrlInfo[]) {
|
||||
this.urls = urlsArg;
|
||||
}
|
||||
|
||||
addUrls(urlsArg: plugins.smartsitemap.IUrlInfo[]) {
|
||||
this.urls = this.urls.concat(urlsArg);
|
||||
}
|
||||
}
|
||||
147
ts/controllers/controller.builtin.ts
Normal file
147
ts/controllers/controller.builtin.ts
Normal file
@@ -0,0 +1,147 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as paths from '../paths.js';
|
||||
|
||||
/**
|
||||
* Built-in routes controller for TypedServer
|
||||
* Handles robots.txt, manifest.json, sitemap, feed, appversion
|
||||
*/
|
||||
@plugins.smartserve.Route('')
|
||||
export class BuiltInRoutesController {
|
||||
private options: {
|
||||
domain?: string;
|
||||
robots?: boolean;
|
||||
manifest?: plugins.smartmanifest.SmartManifest;
|
||||
sitemap?: boolean;
|
||||
feed?: boolean;
|
||||
appVersion?: string;
|
||||
feedMetadata?: plugins.smartfeed.IFeedOptions;
|
||||
articleGetterFunction?: () => Promise<plugins.tsclass.content.IArticle[]>;
|
||||
blockWaybackMachine?: boolean;
|
||||
getSitemapUrls: () => plugins.smartsitemap.IUrlInfo[];
|
||||
};
|
||||
|
||||
constructor(options: typeof BuiltInRoutesController.prototype.options) {
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/robots.txt')
|
||||
async getRobots(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.robots || !this.options.domain) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
const robotsContent = [
|
||||
'User-agent: *',
|
||||
'Allow: /',
|
||||
`Sitemap: https://${this.options.domain}/sitemap`,
|
||||
];
|
||||
|
||||
if (this.options.blockWaybackMachine) {
|
||||
robotsContent.push('', 'User-agent: ia_archiver', 'Disallow: /');
|
||||
}
|
||||
|
||||
return new Response(robotsContent.join('\n'), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/manifest.json')
|
||||
async getManifest(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.manifest) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
return new Response(this.options.manifest.jsonString(), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/sitemap')
|
||||
async getSitemap(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.sitemap || !this.options.domain) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
const smartsitemap = new plugins.smartsitemap.SmartSitemap();
|
||||
const urls = this.options.getSitemapUrls();
|
||||
const sitemapXml = await smartsitemap.createSitemapFromUrlInfoArray(urls);
|
||||
|
||||
return new Response(sitemapXml, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/xml' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/sitemap-news')
|
||||
async getSitemapNews(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.sitemap || !this.options.domain || !this.options.articleGetterFunction) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
const smartsitemap = new plugins.smartsitemap.SmartSitemap();
|
||||
const articles = await this.options.articleGetterFunction();
|
||||
const sitemapNewsXml = await smartsitemap.createSitemapNewsFromArticleArray(articles);
|
||||
|
||||
return new Response(sitemapNewsXml, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/xml' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/feed')
|
||||
async getFeed(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.feed || !this.options.feedMetadata) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
const smartfeed = new plugins.smartfeed.Smartfeed();
|
||||
const articles = this.options.articleGetterFunction
|
||||
? await this.options.articleGetterFunction()
|
||||
: [];
|
||||
|
||||
const feedXml = await smartfeed.createFeedFromArticleArray(
|
||||
this.options.feedMetadata,
|
||||
articles
|
||||
);
|
||||
|
||||
return new Response(feedXml, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/atom+xml' },
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/appversion')
|
||||
async getAppVersion(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
if (!this.options.appVersion) {
|
||||
throw new plugins.smartserve.RouteNotFoundError(ctx.path, ctx.method);
|
||||
}
|
||||
|
||||
return new Response(this.options.appVersion, {
|
||||
status: 200,
|
||||
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 });
|
||||
}
|
||||
}
|
||||
}
|
||||
53
ts/controllers/controller.devtools.ts
Normal file
53
ts/controllers/controller.devtools.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import * as paths from '../paths.js';
|
||||
|
||||
/**
|
||||
* DevTools controller for TypedServer
|
||||
* Handles /typedserver/devtools and /typedserver/reloadcheck endpoints
|
||||
*/
|
||||
@plugins.smartserve.Route('/typedserver')
|
||||
export class DevToolsController {
|
||||
private getLastReload: () => number;
|
||||
private getEnded: () => boolean;
|
||||
|
||||
constructor(options: { getLastReload: () => number; getEnded: () => boolean }) {
|
||||
this.getLastReload = options.getLastReload;
|
||||
this.getEnded = options.getEnded;
|
||||
}
|
||||
|
||||
@plugins.smartserve.Get('/devtools')
|
||||
async getDevtools(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
const devtoolsContent = (await plugins.fsInstance
|
||||
.file(paths.injectBundlePath)
|
||||
.encoding('utf8')
|
||||
.read()) as string;
|
||||
|
||||
return new Response(devtoolsContent, {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/javascript',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@plugins.smartserve.Post('/reloadcheck')
|
||||
async reloadCheck(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
console.log('got request for reloadcheck');
|
||||
|
||||
if (this.getEnded()) {
|
||||
return new Response('end', {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return new Response(this.getLastReload().toString(), {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
34
ts/controllers/controller.typedrequest.ts
Normal file
34
ts/controllers/controller.typedrequest.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
/**
|
||||
* TypedRequest controller for type-safe RPC endpoint
|
||||
*/
|
||||
@plugins.smartserve.Route('/typedrequest')
|
||||
export class TypedRequestController {
|
||||
private typedRouter: plugins.typedrequest.TypedRouter;
|
||||
|
||||
constructor(typedRouter: plugins.typedrequest.TypedRouter) {
|
||||
this.typedRouter = typedRouter;
|
||||
}
|
||||
|
||||
@plugins.smartserve.Post('/')
|
||||
async handleTypedRequest(ctx: plugins.smartserve.IRequestContext): Promise<Response> {
|
||||
try {
|
||||
const response = await this.typedRouter.routeAndAddResponse(ctx.body as plugins.typedrequestInterfaces.ITypedRequest);
|
||||
|
||||
return new Response(plugins.smartjson.stringify(response), {
|
||||
status: 200,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
return new Response(JSON.stringify({ error: 'Invalid request' }), {
|
||||
status: 400,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
3
ts/controllers/index.ts
Normal file
3
ts/controllers/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './controller.devtools.js';
|
||||
export * from './controller.typedrequest.js';
|
||||
export * from './controller.builtin.js';
|
||||
@@ -1 +1,7 @@
|
||||
export * from './typedserver.classes.typedserver.js';
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
export * from './classes.typedserver.js';
|
||||
|
||||
// lets export utilityservers
|
||||
import * as utilityservers from './utilityservers/index.js';
|
||||
export { utilityservers };
|
||||
|
||||
8
ts/infohtml/00_commitinfo_data.ts
Normal file
8
ts/infohtml/00_commitinfo_data.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@losslessone_private/lole-infohtml',
|
||||
version: '1.0.39',
|
||||
description: 'html for displaying infos at lossless'
|
||||
}
|
||||
44
ts/infohtml/index.ts
Normal file
44
ts/infohtml/index.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import * as plugins from './infohtml.plugins.js';
|
||||
|
||||
import { simpleInfo } from './template.js';
|
||||
|
||||
export interface IHtmlInfoOptions {
|
||||
text: string;
|
||||
heading?: string;
|
||||
title?: string;
|
||||
sentryMessage?: string;
|
||||
sentryDsn?: string;
|
||||
redirectTo?: string;
|
||||
}
|
||||
|
||||
export class InfoHtml {
|
||||
// STATIC
|
||||
public static async fromSimpleText(textArg: string) {
|
||||
const infohtmlInstance = new InfoHtml({
|
||||
text: textArg,
|
||||
heading: null,
|
||||
});
|
||||
await infohtmlInstance.init();
|
||||
return infohtmlInstance;
|
||||
}
|
||||
|
||||
public static async fromOptions(optionsArg: IHtmlInfoOptions) {
|
||||
const infohtmlInstance = new InfoHtml(optionsArg);
|
||||
await infohtmlInstance.init();
|
||||
return infohtmlInstance;
|
||||
}
|
||||
|
||||
// INSTANCE
|
||||
public options: IHtmlInfoOptions;
|
||||
public smartntmlInstance: plugins.smartntml.Smartntml;
|
||||
public htmlString: string;
|
||||
constructor(optionsArg: IHtmlInfoOptions) {
|
||||
this.options = optionsArg;
|
||||
}
|
||||
|
||||
public async init() {
|
||||
this.smartntmlInstance = new plugins.smartntml.Smartntml();
|
||||
this.htmlString = await simpleInfo(this.smartntmlInstance, this.options);
|
||||
return this.htmlString;
|
||||
}
|
||||
}
|
||||
3
ts/infohtml/infohtml.plugins.ts
Normal file
3
ts/infohtml/infohtml.plugins.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import * as smartntml from '@push.rocks/smartntml';
|
||||
|
||||
export { smartntml };
|
||||
132
ts/infohtml/template.ts
Normal file
132
ts/infohtml/template.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import * as plugins from './infohtml.plugins.js';
|
||||
import { type IHtmlInfoOptions } from './index.js';
|
||||
|
||||
export const simpleInfo = async (
|
||||
smartntmlInstanceArg: plugins.smartntml.Smartntml,
|
||||
optionsArg: IHtmlInfoOptions
|
||||
) => {
|
||||
const html = plugins.smartntml.deesElement.html;
|
||||
const htmlTemplate = await plugins.smartntml.deesElement.html`
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>${optionsArg.title}</title>
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
const redirectUrl = '${optionsArg.redirectTo}';
|
||||
if (redirectUrl) {
|
||||
window.location = redirectUrl;
|
||||
}
|
||||
}, 5000);
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0px;
|
||||
background: #000000;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
border: 1px solid #e4002b;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 150px;
|
||||
padding-top: 70px;
|
||||
margin: 0px auto 30px auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content .maintext {
|
||||
margin: 10px;
|
||||
color: #ffffff;
|
||||
background: #333;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.content .maintext h1 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.content .addontext {
|
||||
margin: 10px;
|
||||
color: #ffffff;
|
||||
background: #222;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content .text h1 {
|
||||
margin: 0px;
|
||||
font-weight: 100;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.content .text ul {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.legal {
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
|
||||
/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
${(() => {
|
||||
const returnArray: plugins.smartntml.deesElement.TemplateResult[] = [];
|
||||
if (optionsArg.heading) {
|
||||
returnArray.push(html`
|
||||
<div class="maintext">
|
||||
<h1>${optionsArg.heading}</h1>
|
||||
${optionsArg.text}
|
||||
</div>
|
||||
`);
|
||||
} else {
|
||||
returnArray.push(html` <div class="maintext">${optionsArg.text}</div> `);
|
||||
}
|
||||
if (optionsArg.redirectTo) {
|
||||
returnArray.push(
|
||||
html`<div class="addontext">
|
||||
We will redirect you to ${optionsArg.redirectTo} in a few seconds.
|
||||
</div>`
|
||||
);
|
||||
}
|
||||
return returnArray;
|
||||
})()}
|
||||
</div>
|
||||
<div class="legal">
|
||||
<a href="https://foss.global">learn more about foss.global</a> / © 2014-${new Date().getFullYear()} Task Venture Capital GmbH
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
return smartntmlInstanceArg.renderTemplateResult(htmlTemplate);
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
import * as typedrequestInterfaces from '@apiglobal/typedrequest-interfaces';
|
||||
|
||||
export interface IReq_PushLatestServerChangeTime extends typedrequestInterfaces.implementsTR<
|
||||
typedrequestInterfaces.ITypedRequest,
|
||||
IReq_PushLatestServerChangeTime
|
||||
> {
|
||||
method: 'pushLatestServerChangeTime',
|
||||
request: {
|
||||
time: number;
|
||||
};
|
||||
response: {}
|
||||
}
|
||||
14
ts/paths.ts
Normal file
14
ts/paths.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
export const packageDir = plugins.path.join(
|
||||
plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
|
||||
'../'
|
||||
);
|
||||
|
||||
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 swdashBundleDir = plugins.path.join(packageDir, './dist_ts_swdash');
|
||||
export const swdashBundlePath = plugins.path.join(swdashBundleDir, './bundle.js');
|
||||
67
ts/plugins.ts
Normal file
67
ts/plugins.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
// node native
|
||||
import * as http from 'http';
|
||||
import * as https from 'https';
|
||||
import * as net from 'net';
|
||||
import * as path from 'path';
|
||||
import * as zlib from 'zlib';
|
||||
|
||||
export { http, https, net, path, zlib };
|
||||
|
||||
// @tsclass scope
|
||||
import * as tsclass from '@tsclass/tsclass';
|
||||
|
||||
export { tsclass };
|
||||
|
||||
// @apiglobal scope
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';
|
||||
import * as typedsocket from '@api.global/typedsocket';
|
||||
|
||||
export { typedrequest, typedrequestInterfaces, typedsocket };
|
||||
|
||||
// @pushrocks scope
|
||||
import * as lik from '@push.rocks/lik';
|
||||
import * as smartwatch from '@push.rocks/smartwatch';
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
import * as smartfeed from '@push.rocks/smartfeed';
|
||||
import * as smartfile from '@push.rocks/smartfile';
|
||||
import * as smartfs from '@push.rocks/smartfs';
|
||||
import * as smartjson from '@push.rocks/smartjson';
|
||||
import * as smartmanifest from '@push.rocks/smartmanifest';
|
||||
import * as smartmime from '@push.rocks/smartmime';
|
||||
import * as smartopen from '@push.rocks/smartopen';
|
||||
import * as smartpath from '@push.rocks/smartpath';
|
||||
import * as smartpromise from '@push.rocks/smartpromise';
|
||||
import * as smartrequest from '@push.rocks/smartrequest';
|
||||
import * as smartrx from '@push.rocks/smartrx';
|
||||
import * as smartsitemap from '@push.rocks/smartsitemap';
|
||||
import * as smartstream from '@push.rocks/smartstream';
|
||||
import * as smarttime from '@push.rocks/smarttime';
|
||||
|
||||
export {
|
||||
lik,
|
||||
smartwatch,
|
||||
smartdelay,
|
||||
smartfeed,
|
||||
smartfile,
|
||||
smartfs,
|
||||
smartjson,
|
||||
smartmanifest,
|
||||
smartmime,
|
||||
smartopen,
|
||||
smartpath,
|
||||
smartpromise,
|
||||
smartrequest,
|
||||
smartsitemap,
|
||||
smartstream,
|
||||
smarttime,
|
||||
smartrx,
|
||||
};
|
||||
|
||||
// Create a ready-to-use smartfs instance with Node.js provider
|
||||
export const fsInstance = new smartfs.SmartFs(new smartfs.SmartFsProviderNode());
|
||||
|
||||
// @push.rocks/smartserve
|
||||
import * as smartserve from '@push.rocks/smartserve';
|
||||
|
||||
export { smartserve };
|
||||
@@ -1,170 +0,0 @@
|
||||
import * as plugins from './typedserver.plugins.js';
|
||||
import * as paths from './typedserver.paths.js';
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
export interface IEasyServerConstructorOptions {
|
||||
serveDir: string;
|
||||
injectReload: boolean;
|
||||
port?: number;
|
||||
watch?: boolean;
|
||||
}
|
||||
|
||||
export class TypedServer {
|
||||
// static
|
||||
// nothing here yet
|
||||
|
||||
// instance
|
||||
public options: IEasyServerConstructorOptions;
|
||||
public smartexpressInstance: plugins.smartexpress.Server;
|
||||
public smartchokInstance: plugins.smartchok.Smartchok;
|
||||
public serveDirHashSubject = new plugins.smartrx.rxjs.ReplaySubject<string>(1);
|
||||
public serveHash: string = '000000';
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
public lastReload: number = Date.now();
|
||||
public ended = false;
|
||||
constructor(optionsArg: IEasyServerConstructorOptions) {
|
||||
const standardOptions: IEasyServerConstructorOptions = {
|
||||
injectReload: true,
|
||||
port: 3000,
|
||||
serveDir: process.cwd(),
|
||||
watch: true,
|
||||
};
|
||||
this.options = {
|
||||
...standardOptions,
|
||||
...optionsArg,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* inits and starts the server
|
||||
*/
|
||||
public async start() {
|
||||
// set the smartexpress instance
|
||||
this.smartexpressInstance = new plugins.smartexpress.Server({
|
||||
port: this.options.port,
|
||||
forceSsl: false,
|
||||
cors: true,
|
||||
});
|
||||
|
||||
// add routes to the smartexpress instance
|
||||
this.smartexpressInstance.addRoute(
|
||||
'/typedserver/:request',
|
||||
new plugins.smartexpress.Handler('ALL', async (req, res) => {
|
||||
switch (req.params.request) {
|
||||
case 'devtools':
|
||||
res.setHeader('Content-Type', 'text/javascript');
|
||||
res.status(200);
|
||||
res.write(plugins.smartfile.fs.toStringSync(paths.bundlePath));
|
||||
res.end();
|
||||
break;
|
||||
case 'reloadcheck':
|
||||
console.log('got request for reloadcheck');
|
||||
res.setHeader('Content-Type', 'text/plain');
|
||||
res.status(200);
|
||||
if (this.ended) {
|
||||
res.write('end');
|
||||
res.end();
|
||||
return;
|
||||
}
|
||||
res.write(this.lastReload.toString());
|
||||
res.end();
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
this.smartexpressInstance.addRoute(
|
||||
'/*',
|
||||
new plugins.smartexpress.HandlerStatic(this.options.serveDir, {
|
||||
responseModifier: async (responseArg) => {
|
||||
let fileString = responseArg.responseContent;
|
||||
if (plugins.path.parse(responseArg.path).ext === '.html') {
|
||||
const fileStringArray = fileString.split('<head>');
|
||||
if (this.options.injectReload && fileStringArray.length === 2) {
|
||||
fileStringArray[0] = `${fileStringArray[0]}<head>
|
||||
<!-- injected by @apiglobal/typedserver start -->
|
||||
<script async defer type="module" src="/typedserver/devtools"></script>
|
||||
<script>
|
||||
globalThis.typedserver = {
|
||||
lastReload: '${this.lastReload}',
|
||||
versionInfo: ${JSON.stringify({}, null, 2)},
|
||||
}
|
||||
</script>
|
||||
<!-- injected by @apiglobal/typedserver stop -->
|
||||
`;
|
||||
fileString = fileStringArray.join('');
|
||||
console.log('injected typedserver script.');
|
||||
} else if (this.options.injectReload) {
|
||||
console.log('Could not insert typedserver script');
|
||||
}
|
||||
}
|
||||
const headers = responseArg.headers;
|
||||
headers.appHash = this.serveHash;
|
||||
headers['Cache-Control'] = 'no-cache, no-store, must-revalidate';
|
||||
headers['Pragma'] = 'no-cache';
|
||||
headers['Expires'] = '0';
|
||||
return {
|
||||
headers,
|
||||
path: responseArg.path,
|
||||
responseContent: fileString,
|
||||
};
|
||||
},
|
||||
serveIndexHtmlDefault: true,
|
||||
})
|
||||
);
|
||||
|
||||
this.smartchokInstance = new plugins.smartchok.Smartchok([this.options.serveDir], {});
|
||||
if (this.options.watch) {
|
||||
await this.smartchokInstance.start();
|
||||
(await this.smartchokInstance.getObservableFor('change')).subscribe(async () => {
|
||||
await this.createServeDirHash();
|
||||
this.reload();
|
||||
});
|
||||
}
|
||||
|
||||
await this.createServeDirHash();
|
||||
|
||||
// lets start the server
|
||||
await this.smartexpressInstance.start();
|
||||
console.log('open url in browser');
|
||||
|
||||
this.typedsocket = await plugins.typedsocket.TypedSocket.createServer(
|
||||
this.typedrouter,
|
||||
this.smartexpressInstance
|
||||
);
|
||||
|
||||
// await plugins.smartopen.openUrl(`http://testing.git.zone:${this.options.port}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* reloads the page
|
||||
*/
|
||||
public async reload() {
|
||||
this.lastReload = Date.now();
|
||||
for (const connectionArg of await this.typedsocket.findAllTargetConnections(async () => true)) {
|
||||
const pushTime =
|
||||
this.typedsocket.createTypedRequest<interfaces.IReq_PushLatestServerChangeTime>(
|
||||
'pushLatestServerChangeTime',
|
||||
connectionArg
|
||||
);
|
||||
pushTime.fire({
|
||||
time: this.lastReload,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
this.ended = true;
|
||||
await this.smartexpressInstance.stop();
|
||||
await this.typedsocket.stop();
|
||||
await this.smartchokInstance.stop();
|
||||
}
|
||||
|
||||
public async createServeDirHash() {
|
||||
const serveDirHash = await plugins.smartfile.fs.fileTreeToHash(this.options.serveDir, '**/*');
|
||||
this.serveHash = serveDirHash;
|
||||
console.log('Current ServeDir hash: ' + serveDirHash);
|
||||
this.serveDirHashSubject.next(serveDirHash);
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import * as plugins from './typedserver.plugins.js';
|
||||
|
||||
export const packageDir = plugins.path.join(
|
||||
plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
|
||||
'../'
|
||||
);
|
||||
|
||||
export const bundlePath = plugins.path.join(packageDir, './dist_ts_web/bundle.js');
|
||||
@@ -1,36 +0,0 @@
|
||||
// node native
|
||||
import * as path from 'path';
|
||||
|
||||
export { path };
|
||||
|
||||
// @apiglobal scope
|
||||
import * as typedrequest from '@apiglobal/typedrequest';
|
||||
import * as typedrequestInterfaces from '@apiglobal/typedrequest-interfaces';
|
||||
import * as typedsocket from '@apiglobal/typedsocket';
|
||||
|
||||
export {
|
||||
typedrequest,
|
||||
typedrequestInterfaces,
|
||||
typedsocket,
|
||||
}
|
||||
|
||||
// @pushrocks scope
|
||||
import * as smartchok from '@pushrocks/smartchok';
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
import * as smartexpress from '@pushrocks/smartexpress';
|
||||
import * as smartfile from '@pushrocks/smartfile';
|
||||
import * as smartopen from '@pushrocks/smartopen';
|
||||
import * as smartpath from '@pushrocks/smartpath';
|
||||
import * as smartpromise from '@pushrocks/smartpromise';
|
||||
import * as smartrx from '@pushrocks/smartrx';
|
||||
|
||||
export {
|
||||
smartchok,
|
||||
smartdelay,
|
||||
smartexpress,
|
||||
smartfile,
|
||||
smartopen,
|
||||
smartpath,
|
||||
smartpromise,
|
||||
smartrx,
|
||||
};
|
||||
49
ts/utilityservers/classes.serviceserver.ts
Normal file
49
ts/utilityservers/classes.serviceserver.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { TypedServer } from '../classes.typedserver.js';
|
||||
|
||||
export interface ILoleServiceServerConstructorOptions {
|
||||
addCustomRoutes?: (typedserver: TypedServer) => Promise<any>;
|
||||
serviceName: string;
|
||||
serviceVersion: string;
|
||||
serviceDomain: string;
|
||||
port?: number;
|
||||
}
|
||||
|
||||
// the main service server
|
||||
export class UtilityServiceServer {
|
||||
public options: ILoleServiceServerConstructorOptions;
|
||||
public typedServer: TypedServer;
|
||||
|
||||
constructor(optionsArg: ILoleServiceServerConstructorOptions) {
|
||||
this.options = optionsArg;
|
||||
}
|
||||
|
||||
public async start() {
|
||||
console.log('starting lole-serviceserver...');
|
||||
this.typedServer = new TypedServer({
|
||||
cors: true,
|
||||
domain: this.options.serviceDomain,
|
||||
forceSsl: false,
|
||||
port: this.options.port || 3000,
|
||||
robots: true,
|
||||
defaultAnswer: async () => {
|
||||
const InfoHtml = (await import('../infohtml/index.js')).InfoHtml;
|
||||
return (
|
||||
await InfoHtml.fromSimpleText(
|
||||
`${this.options.serviceName} (version ${this.options.serviceVersion})`
|
||||
)
|
||||
).htmlString;
|
||||
},
|
||||
});
|
||||
|
||||
// Add any custom routes
|
||||
if (this.options.addCustomRoutes) {
|
||||
await this.options.addCustomRoutes(this.typedServer);
|
||||
}
|
||||
|
||||
await this.typedServer.start();
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
await this.typedServer.stop();
|
||||
}
|
||||
}
|
||||
126
ts/utilityservers/classes.websiteserver.ts
Normal file
126
ts/utilityservers/classes.websiteserver.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import * as interfaces from '../../dist_ts_interfaces/index.js';
|
||||
import { type IServerOptions, TypedServer } from '../classes.typedserver.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
|
||||
export interface IUtilityWebsiteServerConstructorOptions {
|
||||
addCustomRoutes?: (typedserver: TypedServer) => Promise<any>;
|
||||
appSemVer?: string;
|
||||
domain: string;
|
||||
serveDir: string;
|
||||
feedMetadata: IServerOptions['feedMetadata'];
|
||||
}
|
||||
|
||||
/**
|
||||
* the utility website server implements a best practice server for websites
|
||||
* It supports:
|
||||
* * live reload
|
||||
* * serviceworker
|
||||
* * pwa manifest
|
||||
*/
|
||||
export class UtilityWebsiteServer {
|
||||
public options: IUtilityWebsiteServerConstructorOptions;
|
||||
public typedserver: TypedServer;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
constructor(optionsArg: IUtilityWebsiteServerConstructorOptions) {
|
||||
this.options = optionsArg;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the website server
|
||||
*/
|
||||
public async start(portArg = 3000) {
|
||||
this.typedserver = new TypedServer({
|
||||
cors: true,
|
||||
injectReload: true,
|
||||
watch: true,
|
||||
serveDir: this.options.serveDir,
|
||||
domain: this.options.domain,
|
||||
forceSsl: false,
|
||||
manifest: {
|
||||
name: this.options.domain,
|
||||
short_name: this.options.domain,
|
||||
start_url: '/',
|
||||
display_override: ['window-controls-overlay'],
|
||||
lang: 'en',
|
||||
background_color: '#000000',
|
||||
scope: '/',
|
||||
},
|
||||
port: portArg,
|
||||
|
||||
// features
|
||||
robots: true,
|
||||
sitemap: true,
|
||||
});
|
||||
|
||||
let lswData: interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo['response'] = {
|
||||
appHash: 'xxxxxx',
|
||||
appSemVer: this.options.appSemVer || 'x.x.x',
|
||||
};
|
||||
|
||||
// -> Service worker version info handler
|
||||
this.typedserver.typedrouter.addTypedHandler<interfaces.serviceworker.IRequest_Serviceworker_Backend_VersionInfo>(
|
||||
new plugins.typedrequest.TypedHandler('serviceworker_versionInfo', async () => {
|
||||
return lswData;
|
||||
})
|
||||
);
|
||||
|
||||
// ads.txt handler
|
||||
this.typedserver.addRoute('/ads.txt', 'GET', async () => {
|
||||
const adsTxt =
|
||||
['google.com, pub-4104137977476459, DIRECT, f08c47fec0942fa0'].join('\n') + '\n';
|
||||
return new Response(adsTxt, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
});
|
||||
|
||||
// Asset broker manifest handler
|
||||
this.typedserver.addRoute(
|
||||
'/assetbroker/manifest/:manifestAsset',
|
||||
'GET',
|
||||
async (request: Request) => {
|
||||
let manifestAssetName = (request as any).params?.manifestAsset;
|
||||
if (manifestAssetName === 'favicon.png') {
|
||||
manifestAssetName = `favicon_${this.options.domain
|
||||
.replace('.', '')
|
||||
.replace('losslesscom', 'lossless')}@2x_transparent.png`;
|
||||
}
|
||||
const fullOriginAssetUrl = `https://assetbroker.lossless.one/brandfiles/00general/${manifestAssetName}`;
|
||||
console.log(`Getting ${manifestAssetName} from ${fullOriginAssetUrl}`);
|
||||
const smartRequest = plugins.smartrequest.SmartRequest.create();
|
||||
const response = await smartRequest.url(fullOriginAssetUrl).get();
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
return new Response(arrayBuffer, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'image/png' },
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// Add any custom routes
|
||||
if (this.options.addCustomRoutes) {
|
||||
await this.options.addCustomRoutes(this.typedserver);
|
||||
}
|
||||
|
||||
// Subscribe to serve directory hash changes
|
||||
this.typedserver.serveDirHashSubject.subscribe((appHash: string) => {
|
||||
lswData = {
|
||||
appHash,
|
||||
appSemVer: '1.0.0',
|
||||
};
|
||||
});
|
||||
|
||||
// Setup the typedrouter chain
|
||||
this.typedserver.typedrouter.addTypedRouter(this.typedrouter);
|
||||
|
||||
// Start everything
|
||||
console.log('routes are all set. Starting up now!');
|
||||
await this.typedserver.start();
|
||||
console.log('typedserver started!');
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
await this.typedserver.stop();
|
||||
}
|
||||
}
|
||||
2
ts/utilityservers/index.ts
Normal file
2
ts/utilityservers/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './classes.serviceserver.js';
|
||||
export * from './classes.websiteserver.js';
|
||||
8
ts_edgeworker/00_commitinfo_data.ts
Normal file
8
ts_edgeworker/00_commitinfo_data.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: 'cloudflare-workers',
|
||||
version: '1.0.192',
|
||||
description: 'cloudflare-workers'
|
||||
}
|
||||
83
ts_edgeworker/analytics/analyzer.ts
Normal file
83
ts_edgeworker/analytics/analyzer.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
|
||||
import type { EdgeWorker } from '../classes.edgeworker.js';
|
||||
import type { WorkerEvent } from '../classes.workerevent.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import { SmartlogDestination } from './smartlog.js';
|
||||
|
||||
export interface IAnalyticsData {
|
||||
requestAgent: string;
|
||||
requestUrl: string;
|
||||
requestMethod: string;
|
||||
requestStartTime: number;
|
||||
responseStatus: number;
|
||||
responseEndTime: number;
|
||||
}
|
||||
|
||||
export class Analyzer {
|
||||
cworkerEventRef: WorkerEvent;
|
||||
|
||||
public data: IAnalyticsData = {
|
||||
requestAgent: 'unknown',
|
||||
requestMethod: 'unknown',
|
||||
requestUrl: 'unknown',
|
||||
requestStartTime: 0,
|
||||
responseStatus: 0,
|
||||
responseEndTime: 0,
|
||||
};
|
||||
|
||||
public finishedDeferred = plugins.smartpromise.defer();
|
||||
|
||||
constructor(cworkerEventRefArg: WorkerEvent) {
|
||||
this.cworkerEventRef = cworkerEventRefArg;
|
||||
this.smartlog.addLogDestination(new SmartlogDestination(this.cworkerEventRef.options.edgeWorkerRef));
|
||||
}
|
||||
public smartlog = new plugins.smartlog.Smartlog({
|
||||
logContext: {
|
||||
environment: 'production',
|
||||
runtime: "cloudflare_workers",
|
||||
zone: 'servezone',
|
||||
company: 'Lossless GmbH',
|
||||
companyunit: 'Lossless Cloud',
|
||||
containerName: 'cloudflare_workers'
|
||||
}
|
||||
});
|
||||
|
||||
public setRequestData (optionsArg: {
|
||||
requestAgent: string;
|
||||
requestUrl: string;
|
||||
requestMethod: string;
|
||||
}) {
|
||||
this.data = {
|
||||
...this.data,
|
||||
...{
|
||||
requestAgent: optionsArg.requestAgent,
|
||||
requestUrl: optionsArg.requestUrl,
|
||||
requestMethod: optionsArg.requestMethod,
|
||||
requestStartTime: Date.now()
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
public setResponseData(optionsArg: {
|
||||
responseStatus: number,
|
||||
responseEndTime: number,
|
||||
}) {
|
||||
this.data = {
|
||||
...this.data,
|
||||
...{
|
||||
responseStatus: optionsArg.responseStatus,
|
||||
responseEndTime: optionsArg.responseEndTime
|
||||
}
|
||||
};
|
||||
this.sendLogs();
|
||||
}
|
||||
|
||||
public async sendLogs() {
|
||||
await this.smartlog.log('info', `
|
||||
Got a ${this.data.requestMethod} request from ${this.data.requestAgent} to
|
||||
${this.data.requestUrl}
|
||||
that took ${this.data.responseEndTime - this.data.requestStartTime}ms to resolve with status ${this.data.responseStatus}.`, this.data);
|
||||
this.finishedDeferred.resolve();
|
||||
}
|
||||
}
|
||||
26
ts_edgeworker/analytics/smartlog.ts
Normal file
26
ts_edgeworker/analytics/smartlog.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import * as smartlogInterfaces from '@push.rocks/smartlog-interfaces';
|
||||
import type { EdgeWorker } from '../classes.edgeworker.js';
|
||||
|
||||
export class SmartlogDestination implements smartlogInterfaces.ILogDestination {
|
||||
public edgeWorkerRef: EdgeWorker;
|
||||
|
||||
constructor(edgeworkerRefArg: EdgeWorker) {
|
||||
this.edgeWorkerRef = edgeworkerRefArg;
|
||||
}
|
||||
|
||||
public async handleLog(logPackageArg: smartlogInterfaces.ILogPackage) {
|
||||
if (this.edgeWorkerRef.options.smartlogConfig) {
|
||||
const requestBody: smartlogInterfaces.ILogPackageAuthenticated = {
|
||||
auth: this.edgeWorkerRef.options.smartlogConfig.token,
|
||||
logPackage: logPackageArg,
|
||||
};
|
||||
await fetch(this.edgeWorkerRef.options.smartlogConfig.endpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
67
ts_edgeworker/classes.domainrouter.ts
Normal file
67
ts_edgeworker/classes.domainrouter.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import * as plugins from './plugins.js';
|
||||
import { WorkerEvent } from './classes.workerevent.js';
|
||||
|
||||
import * as domainInstructions from './domaininstructions/index.js';
|
||||
|
||||
export class DomainRouter {
|
||||
private smartmatches: plugins.smartmatch.SmartMatch[] = [];
|
||||
|
||||
constructor() {
|
||||
for (const key of Object.keys(domainInstructions.instructionObject)) {
|
||||
this.smartmatches.push(new plugins.smartmatch.SmartMatch(key));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param cworkerevent
|
||||
*/
|
||||
public routeToResponder(cworkerevent: WorkerEvent) {
|
||||
const match = this.smartmatches.find(smartmatchArg => {
|
||||
return smartmatchArg.match(cworkerevent.request.url);
|
||||
});
|
||||
cworkerevent.responderInstruction = match
|
||||
? domainInstructions.instructionObject[match.wildcard]
|
||||
: {
|
||||
type: 'cache'
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* rendertronRouter
|
||||
*/
|
||||
public checkWetherReRouteToRendertron(cworkerevent: WorkerEvent) {
|
||||
let needsRendertron = false;
|
||||
for (const botAgentIdentifier of domainInstructions.botUserAgents) {
|
||||
if (needsRendertron) {
|
||||
continue;
|
||||
}
|
||||
if (
|
||||
cworkerevent.request.headers.get('user-agent') &&
|
||||
cworkerevent.request.headers.get('user-agent').toLowerCase().includes(botAgentIdentifier.toLowerCase()) &&
|
||||
!cworkerevent.request.url.includes('lossless.one')
|
||||
) {
|
||||
needsRendertron = true;
|
||||
}
|
||||
}
|
||||
if (needsRendertron) {
|
||||
cworkerevent.routedThroughRendertron = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check wether this is a preflight request that should be handled
|
||||
*/
|
||||
public checkWetherIsPreflight (cworkerevent: WorkerEvent) {
|
||||
if (
|
||||
cworkerevent.request.method === 'OPTIONS' &&
|
||||
cworkerevent.request.headers.get('Origin') !== null &&
|
||||
cworkerevent.request.headers.get('Access-Control-Request-Method') !== null &&
|
||||
cworkerevent.request.headers.get('Access-Control-Request-Headers') !== null
|
||||
) {
|
||||
cworkerevent.isPreflight = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
73
ts_edgeworker/classes.edgeworker.ts
Normal file
73
ts_edgeworker/classes.edgeworker.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
// imports
|
||||
import { WorkerEvent } from './classes.workerevent.js';
|
||||
import { DomainRouter } from './classes.domainrouter.js';
|
||||
import * as plugins from './plugins.js';
|
||||
import * as responders from './responders/index.js';
|
||||
|
||||
export interface IEdgeWorkerOptions {
|
||||
smartlogConfig?: {
|
||||
endpoint: string;
|
||||
token: string;
|
||||
}
|
||||
}
|
||||
|
||||
export class EdgeWorker {
|
||||
public options: IEdgeWorkerOptions;
|
||||
domainRouter: DomainRouter;
|
||||
|
||||
constructor(optionsArg: IEdgeWorkerOptions = {}) {
|
||||
this.options = optionsArg;
|
||||
this.domainRouter = new DomainRouter();
|
||||
addEventListener('fetch', this.fetchFunction as any);
|
||||
}
|
||||
|
||||
public async fetchFunction (eventArg: plugins.cloudflareTypes.FetchEvent) {
|
||||
if (new URL(eventArg.request.url).pathname.startsWith('/socket.io')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cworkerEvent = new WorkerEvent({
|
||||
edgeWorkerRef: this,
|
||||
event: eventArg,
|
||||
passThroughOnException: true
|
||||
});
|
||||
|
||||
// lets answer basic reuest things
|
||||
responders.timeoutResponder(cworkerEvent);
|
||||
cworkerEvent.hasResponse ? null : await responders.urlFormattingResponder(cworkerEvent);
|
||||
|
||||
// lets route the domain
|
||||
this.domainRouter.routeToResponder(cworkerEvent);
|
||||
this.domainRouter.checkWetherReRouteToRendertron(cworkerEvent);
|
||||
this.domainRouter.checkWetherIsPreflight(cworkerEvent);
|
||||
|
||||
// guardresponder
|
||||
cworkerEvent.hasResponse ? null : await responders.guardResponder(cworkerEvent);
|
||||
|
||||
// lets process all requests that need rendertron
|
||||
cworkerEvent.hasResponse ? null : await responders.rendertronResponder(cworkerEvent);
|
||||
|
||||
// lets process all requests that are preflight requests
|
||||
cworkerEvent.hasResponse ? null : await responders.preflightResponder(cworkerEvent);
|
||||
|
||||
switch (cworkerEvent.responderInstruction.type) {
|
||||
case 'cache':
|
||||
cworkerEvent.hasResponse ? null : await responders.cacheResponder(cworkerEvent);
|
||||
break;
|
||||
case 'origin':
|
||||
cworkerEvent.hasResponse ? null : await responders.originResponder(cworkerEvent);
|
||||
break;
|
||||
case 'redirect':
|
||||
cworkerEvent.hasResponse ? null : await responders.adsTxtResponder(cworkerEvent);
|
||||
break;
|
||||
case 'static':
|
||||
cworkerEvent.hasResponse ? null : await responders.staticResponder(cworkerEvent);
|
||||
break;
|
||||
case 'ads.txt':
|
||||
cworkerEvent.hasResponse ? null : await responders.adsTxtResponder(cworkerEvent);
|
||||
break;
|
||||
}
|
||||
// cworkerEvent.hasResponse ? null : await responders.kvResponder(cworkerEvent);
|
||||
cworkerEvent.hasResponse ? null : await responders.errorResponder(cworkerEvent);
|
||||
};
|
||||
}
|
||||
37
ts_edgeworker/classes.kvhandler.ts
Normal file
37
ts_edgeworker/classes.kvhandler.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
declare var lokv: plugins.cloudflareTypes.KVNamespace;
|
||||
|
||||
/**
|
||||
* an abstraction for the workerd KV store
|
||||
*/
|
||||
export class KVHandler {
|
||||
private getSafeIdentifier(urlString: string) {
|
||||
return encodeURI(urlString);
|
||||
}
|
||||
|
||||
async getFromKv(keyIdentifier: string) {
|
||||
const key = this.getSafeIdentifier(keyIdentifier);
|
||||
const valueString = await lokv.get(key);
|
||||
return valueString;
|
||||
}
|
||||
|
||||
async putInKv(keyIdentifier: string, valueForStorage: string) {
|
||||
const key = this.getSafeIdentifier(keyIdentifier);
|
||||
const value = valueForStorage;
|
||||
await lokv.put(key, value);
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* deletes a key/value from the cache
|
||||
* @param keyIdentifier
|
||||
*/
|
||||
async deleteInKv(keyIdentifier: string) {
|
||||
const cacheKey = this.getSafeIdentifier(keyIdentifier);
|
||||
await lokv.delete(cacheKey);
|
||||
}
|
||||
}
|
||||
|
||||
export const kvHandlerInstance = new KVHandler();
|
||||
46
ts_edgeworker/classes.responsekv.ts
Normal file
46
ts_edgeworker/classes.responsekv.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import { kvHandlerInstance } from './classes.kvhandler.js';
|
||||
|
||||
declare var lokv: plugins.cloudflareTypes.KVNamespace;
|
||||
|
||||
interface IKVResponseObject {
|
||||
headers: { [key: string]: string };
|
||||
version: string;
|
||||
body: string;
|
||||
}
|
||||
|
||||
export class ResponseKv {
|
||||
public async storeResponse(urlIdentifier: string, responseArg: any) {
|
||||
const headers: { [key: string]: string } = {};
|
||||
for (const kv of responseArg.headers.entries()) {
|
||||
headers[kv[0]] = kv[1];
|
||||
}
|
||||
const kvResponseForStorage: IKVResponseObject = {
|
||||
headers,
|
||||
version: '1.0.0',
|
||||
body: await responseArg.text()
|
||||
};
|
||||
await kvHandlerInstance.putInKv(urlIdentifier, JSON.stringify(kvResponseForStorage));
|
||||
}
|
||||
|
||||
public async getResponse(urlIdentifier: string): Promise<Response> {
|
||||
const kvValue = await kvHandlerInstance.getFromKv(urlIdentifier);
|
||||
if (kvValue) {
|
||||
let kvResponse: IKVResponseObject;
|
||||
try {
|
||||
kvResponse = JSON.parse(kvValue);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return null;
|
||||
}
|
||||
const headers = new Headers();
|
||||
for (const key of Object.keys(kvResponse.headers)) {
|
||||
headers.append(key, kvResponse.headers[key]);
|
||||
}
|
||||
headers.append('SERVEZONE_ROUTE', 'CLOUDFLARE_EDGE_LOKV');
|
||||
return new Response(kvResponse.body, { headers: headers });
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
102
ts_edgeworker/classes.workerevent.ts
Normal file
102
ts_edgeworker/classes.workerevent.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
import * as plugins from './plugins.js';
|
||||
import * as helpers from './helpers/index.js';
|
||||
import { DomainRouter } from './classes.domainrouter.js';
|
||||
import { Analyzer } from './analytics/analyzer.js';
|
||||
import type { EdgeWorker } from './classes.edgeworker.js';
|
||||
|
||||
export interface ICworkerEventOptions {
|
||||
event: plugins.cloudflareTypes.FetchEvent
|
||||
edgeWorkerRef: EdgeWorker;
|
||||
passThroughOnException?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export class WorkerEvent {
|
||||
public options: ICworkerEventOptions;
|
||||
|
||||
public analyzer: Analyzer;
|
||||
private responseDeferred: plugins.smartpromise.Deferred<any>;
|
||||
private waitUntilDeferred: plugins.smartpromise.Deferred<any>;
|
||||
|
||||
private response: Response = null;
|
||||
private waitList = [];
|
||||
|
||||
// routing settings
|
||||
public responderInstruction: interfaces.IResponderInstruction;
|
||||
public routedThroughRendertron: boolean = false;
|
||||
public isPreflight: boolean = false;
|
||||
|
||||
public request: plugins.cloudflareTypes.Request;
|
||||
|
||||
public parsedUrl: URL;
|
||||
|
||||
constructor(optionsArg: ICworkerEventOptions) {
|
||||
this.options = optionsArg;
|
||||
|
||||
// lets create an Analyzer for this request
|
||||
this.analyzer = new Analyzer(this);
|
||||
|
||||
// lets make sure we always answer
|
||||
this.options.passThroughOnException ? this.options.event.passThroughOnException() : null;
|
||||
|
||||
// lets set up some better asnyc behaviour
|
||||
this.waitUntilDeferred = plugins.smartpromise.defer();
|
||||
this.responseDeferred = plugins.smartpromise.defer();
|
||||
this.addToWaitList(this.analyzer.finishedDeferred.promise);
|
||||
|
||||
// lets entangle the event with this class instance
|
||||
this.request = this.options.event.request;
|
||||
|
||||
// lets start with analytics
|
||||
this.analyzer.setRequestData({
|
||||
requestAgent: this.request.headers.get('user-agent'),
|
||||
requestMethod: this.request.method,
|
||||
requestUrl: this.request.url
|
||||
});
|
||||
|
||||
|
||||
this.options.event.respondWith(this.responseDeferred.promise);
|
||||
this.options.event.waitUntil(this.waitUntilDeferred.promise);
|
||||
|
||||
// lets parse the url
|
||||
this.parsedUrl = new URL(this.request.url);
|
||||
|
||||
// lets check the waitlist
|
||||
this.checkWaitList();
|
||||
console.log(`Got request for ${this.request.url}`);
|
||||
}
|
||||
|
||||
get hasResponse () {
|
||||
let returnValue: boolean;
|
||||
this.response ? returnValue = true : returnValue = false;
|
||||
return returnValue;
|
||||
}
|
||||
|
||||
public addToWaitList(promiseArg: Promise<any>) {
|
||||
this.waitList.push(promiseArg);
|
||||
}
|
||||
|
||||
private async checkWaitList() {
|
||||
await this.responseDeferred.promise;
|
||||
const currentWaitList = this.waitList;
|
||||
this.waitList = [];
|
||||
await Promise.all(currentWaitList);
|
||||
if (this.waitList.length > 0) {
|
||||
this.checkWaitList();
|
||||
} else {
|
||||
this.waitUntilDeferred.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
public setResponse (responseArg: Response) {
|
||||
this.response = responseArg;
|
||||
this.responseDeferred.resolve(responseArg);
|
||||
this.analyzer.setResponseData({
|
||||
responseStatus: this.response.status,
|
||||
responseEndTime: Date.now()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
36
ts_edgeworker/domaininstructions/botuseragents.ts
Normal file
36
ts_edgeworker/domaininstructions/botuseragents.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
export const botUserAgents = [
|
||||
// Baidu
|
||||
'baiduspider',
|
||||
'embedly',
|
||||
|
||||
// Facebook
|
||||
'facebookexternalhit',
|
||||
|
||||
// Ghost
|
||||
'Ghost',
|
||||
|
||||
// Microsoft
|
||||
'bingbot',
|
||||
'BingPreview',
|
||||
'linkedinbot',
|
||||
'MissinglettrBot',
|
||||
'msnbot',
|
||||
'outbrain',
|
||||
'pinterest',
|
||||
'quora link preview',
|
||||
'rogerbot',
|
||||
'showyoubot',
|
||||
'slackbot',
|
||||
'TelegramBot',
|
||||
|
||||
// Twitter
|
||||
'twitterbot',
|
||||
'vkShare',
|
||||
'W3C_Validator',
|
||||
|
||||
// WhatsApp
|
||||
'whatsapp',
|
||||
|
||||
// woorank
|
||||
'woorank'
|
||||
];
|
||||
7
ts_edgeworker/domaininstructions/domaininstructions.ts
Normal file
7
ts_edgeworker/domaininstructions/domaininstructions.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
|
||||
export const instructionObject: { [key: string]: interfaces.IResponderInstruction } = {
|
||||
'*/ads.txt': {
|
||||
type: 'ads.txt',
|
||||
}
|
||||
};
|
||||
2
ts_edgeworker/domaininstructions/index.ts
Normal file
2
ts_edgeworker/domaininstructions/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './botuseragents.js';
|
||||
export * from './domaininstructions.js';
|
||||
9
ts_edgeworker/helpers/checks.ts
Normal file
9
ts_edgeworker/helpers/checks.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
declare var lokv: plugins.cloudflareTypes.KVNamespace;
|
||||
export const checkLokv = () => {
|
||||
if (!lokv) {
|
||||
throw new Error('lokv not defined!');
|
||||
} else {
|
||||
console.log('lokv present!');
|
||||
}
|
||||
};
|
||||
1
ts_edgeworker/helpers/index.ts
Normal file
1
ts_edgeworker/helpers/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './checks.js';
|
||||
1
ts_edgeworker/index.ts
Normal file
1
ts_edgeworker/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './classes.edgeworker.js';
|
||||
9
ts_edgeworker/interfaces/custom.ts
Normal file
9
ts_edgeworker/interfaces/custom.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { WorkerEvent } from "../classes.workerevent.js";
|
||||
|
||||
export interface IResponderInstruction {
|
||||
type: 'origin' | 'cache' | 'static' | 'redirect' | 'ads.txt';
|
||||
cacheClientSideForMin?: number;
|
||||
redirectUrl?: string;
|
||||
}
|
||||
|
||||
export type TRequestResponser = (workerEventArg: WorkerEvent) => Promise<void>;
|
||||
1
ts_edgeworker/interfaces/index.ts
Normal file
1
ts_edgeworker/interfaces/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './custom.js';
|
||||
21
ts_edgeworker/plugins.ts
Normal file
21
ts_edgeworker/plugins.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
// @pushrocks scope
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
import * as smartlog from '@push.rocks/smartlog';
|
||||
import * as smartlogInterfaces from '@push.rocks/smartlog-interfaces';
|
||||
import * as smartmatch from '@push.rocks/smartmatch';
|
||||
import * as smartpromise from '@push.rocks/smartpromise';
|
||||
|
||||
export {
|
||||
smartdelay,
|
||||
smartlog,
|
||||
smartlogInterfaces,
|
||||
smartmatch,
|
||||
smartpromise
|
||||
};
|
||||
|
||||
// cloudflarea
|
||||
import * as cloudflareTypes from '@cloudflare/workers-types';
|
||||
|
||||
export {
|
||||
cloudflareTypes
|
||||
}
|
||||
14
ts_edgeworker/responders/adstxt.responder.ts
Normal file
14
ts_edgeworker/responders/adstxt.responder.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const adsTxtResponder: interfaces.TRequestResponser = async (cWorkerEventArg: WorkerEvent) => {
|
||||
if (cWorkerEventArg.responderInstruction.type === 'ads.txt') {
|
||||
const response = new Response('google.com, pub-4104137977476459, DIRECT, f08c47fec0942fa0\n', {
|
||||
headers: {
|
||||
'Content-Type': 'text/plain; charset=utf-8'
|
||||
}
|
||||
})
|
||||
cWorkerEventArg.setResponse(response);
|
||||
}
|
||||
|
||||
};
|
||||
92
ts_edgeworker/responders/cache.responder.ts
Normal file
92
ts_edgeworker/responders/cache.responder.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
import { kvHandlerInstance } from '../classes.kvhandler.js';
|
||||
|
||||
declare const fetch: plugins.cloudflareTypes.Fetcher['fetch'];
|
||||
|
||||
declare var caches: any;
|
||||
export const cacheResponder: interfaces.TRequestResponser = async (cworkerEventArg: WorkerEvent) => {
|
||||
const host = cworkerEventArg.request.headers.get('Host');
|
||||
const appHashKey = `${host.toLowerCase()}_appHash`;
|
||||
const appHash = await kvHandlerInstance.getFromKv(appHashKey);
|
||||
|
||||
const cache = caches.default;
|
||||
let response: Response = await cache.match(cworkerEventArg.request);
|
||||
|
||||
if (
|
||||
response &&
|
||||
response.headers.get('appHash') &&
|
||||
response.headers.get('appHash') !== appHash
|
||||
) {
|
||||
response = null;
|
||||
}
|
||||
|
||||
if (response) {
|
||||
cworkerEventArg.setResponse(response);
|
||||
} else {
|
||||
response = await handleNewRequest(cworkerEventArg.request);
|
||||
if (response) {
|
||||
cworkerEventArg.addToWaitList(new Promise<void>(async (resolve, reject) => {
|
||||
const newAppHash = response.headers.get('appHash');
|
||||
if (newAppHash) {
|
||||
await kvHandlerInstance.putInKv(appHashKey, newAppHash);
|
||||
}
|
||||
resolve();
|
||||
}));
|
||||
cworkerEventArg.addToWaitList(buildCacheResponse(cache, cworkerEventArg.request, response));
|
||||
cworkerEventArg.setResponse(response);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Request} originalRequest
|
||||
*/
|
||||
const handleNewRequest = async (originalRequest: plugins.cloudflareTypes.Request): Promise<Response> => {
|
||||
console.log('answering from origin');
|
||||
const originResponse: any = await fetch(
|
||||
originalRequest
|
||||
);
|
||||
|
||||
// lets capture status
|
||||
if (originResponse.status > 399) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const responseClientPassThroughStream = new TransformStream();
|
||||
originResponse.body.pipeTo(responseClientPassThroughStream.writable);
|
||||
|
||||
// build response for client
|
||||
const clientHeaders = new Headers();
|
||||
for (const kv of originResponse.headers.entries()) {
|
||||
clientHeaders.append(kv[0], kv[1]);
|
||||
}
|
||||
clientHeaders.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_ORIGIN_INITIAL');
|
||||
const responseForClient = new Response(responseClientPassThroughStream.readable, {
|
||||
...originResponse,
|
||||
headers: clientHeaders
|
||||
});
|
||||
|
||||
// lets return the responses
|
||||
return responseForClient;
|
||||
};
|
||||
|
||||
const buildCacheResponse = async (cache, matchRequest: plugins.cloudflareTypes.Request, originResponse: any) => {
|
||||
const cacheHeaders = new Headers();
|
||||
for (const kv of originResponse.headers.entries()) {
|
||||
cacheHeaders.append(kv[0], kv[1]);
|
||||
}
|
||||
cacheHeaders.delete('SERVEZONE_ROUTE');
|
||||
cacheHeaders.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_CACHE');
|
||||
cacheHeaders.delete('Cache-Control');
|
||||
cacheHeaders.append('Cache-Control', 'public, max-age=60');
|
||||
cacheHeaders.delete('Expires');
|
||||
cacheHeaders.append('Expires', new Date(Date.now() + 60 * 1000).toUTCString());
|
||||
|
||||
const responseForCache = new Response(await originResponse.clone().body, {
|
||||
...originResponse,
|
||||
headers: cacheHeaders
|
||||
});
|
||||
await cache.put(matchRequest, responseForCache);
|
||||
};
|
||||
6
ts_edgeworker/responders/error.responder.ts
Normal file
6
ts_edgeworker/responders/error.responder.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
export const errorResponder: interfaces.TRequestResponser = async (cWorkerEvent: WorkerEvent) => {
|
||||
const errorResponse = await fetch('https://nullresolve.lossless.one/status/firewall');
|
||||
cWorkerEvent.setResponse(errorResponse);
|
||||
};
|
||||
8
ts_edgeworker/responders/guard.responder.ts
Normal file
8
ts_edgeworker/responders/guard.responder.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
export const guardResponder: interfaces.TRequestResponser = async (cWorkerEvent: WorkerEvent) => {
|
||||
if (cWorkerEvent.parsedUrl.pathname.endsWith('.map')) {
|
||||
const errorResponse = await fetch('https://nullresolve.lossless.one/status/firewall');
|
||||
cWorkerEvent.setResponse(errorResponse);
|
||||
}
|
||||
};
|
||||
12
ts_edgeworker/responders/index.ts
Normal file
12
ts_edgeworker/responders/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export * from './adstxt.responder.js';
|
||||
export * from './cache.responder.js';
|
||||
export * from './urlformatting.responder.js';
|
||||
export * from './error.responder.js';
|
||||
export * from './guard.responder.js';
|
||||
export * from './kv.responder.js';
|
||||
export * from './origin.responder.js';
|
||||
export * from './preflight.responder.js';
|
||||
export * from './redirect.reponder.js';
|
||||
export * from './rendertron.responder.js';
|
||||
export * from './static.responder.js';
|
||||
export * from './timeout.responder.js';
|
||||
34
ts_edgeworker/responders/kv.responder.ts
Normal file
34
ts_edgeworker/responders/kv.responder.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
import { ResponseKv } from '../classes.responsekv.js';
|
||||
|
||||
declare const fetch: plugins.cloudflareTypes.Fetcher['fetch'];
|
||||
|
||||
export const kvResponder: interfaces.TRequestResponser = async (cworkerEventArg: WorkerEvent) => {
|
||||
const responseKvInstance = new ResponseKv();
|
||||
let response = await responseKvInstance.getResponse(cworkerEventArg.request.url);
|
||||
if (response) {
|
||||
console.log('Got response from KV');
|
||||
} else {
|
||||
response = await handleNewRequest(cworkerEventArg.request, responseKvInstance);
|
||||
}
|
||||
cworkerEventArg.setResponse(response);
|
||||
};
|
||||
|
||||
const handleNewRequest = async (request: plugins.cloudflareTypes.Request, responseKvInstance: ResponseKv) => {
|
||||
const originResponse: any = await fetch(request);
|
||||
// build response for cache
|
||||
const cacheHeaders = new Headers();
|
||||
for (const kv of originResponse.headers.entries()) {
|
||||
cacheHeaders.append(kv[0], kv[1]);
|
||||
}
|
||||
cacheHeaders.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_KVRESPONSE');
|
||||
cacheHeaders.append('Cache-Control', 'max-age=600');
|
||||
const responseForKV = new Response(await originResponse.body, {
|
||||
...originResponse,
|
||||
headers: cacheHeaders
|
||||
});
|
||||
await responseKvInstance.storeResponse(request.url, responseForKV.clone());
|
||||
return responseForKV.clone();
|
||||
};
|
||||
31
ts_edgeworker/responders/origin.responder.ts
Normal file
31
ts_edgeworker/responders/origin.responder.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
declare const fetch: plugins.cloudflareTypes.Fetcher['fetch'];
|
||||
|
||||
export const originResponder: interfaces.TRequestResponser = async (eventArg: WorkerEvent) => {
|
||||
const originResponse: any = await fetch(eventArg.request);
|
||||
// lets capture status
|
||||
if (originResponse.status > 399) {
|
||||
return;
|
||||
}
|
||||
|
||||
const headers = new Headers();
|
||||
for (const kv of originResponse.headers.entries()) {
|
||||
headers.append(kv[0], kv[1]);
|
||||
}
|
||||
headers.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_FASTORIGIN');
|
||||
|
||||
const responsePassThroughStream = new TransformStream();
|
||||
originResponse.body.pipeTo(responsePassThroughStream.writable);
|
||||
|
||||
// response
|
||||
|
||||
const responseForClient = new Response(responsePassThroughStream.readable, {
|
||||
...originResponse,
|
||||
headers,
|
||||
});
|
||||
|
||||
eventArg.setResponse(responseForClient);
|
||||
};
|
||||
18
ts_edgeworker/responders/preflight.responder.ts
Normal file
18
ts_edgeworker/responders/preflight.responder.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const preflightResponder: interfaces.TRequestResponser = async (eventArg: WorkerEvent) => {
|
||||
if (eventArg.isPreflight) {
|
||||
const corsHeaders = new Headers();
|
||||
corsHeaders.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_PREFLIGHT');
|
||||
corsHeaders.append('Access-Control-Allow-Origin', '*');
|
||||
corsHeaders.append('Access-Control-Allow-Methods', '*');
|
||||
corsHeaders.append('Access-Control-Allow-Headers', '*');
|
||||
|
||||
eventArg.setResponse(
|
||||
new Response(null, {
|
||||
headers: corsHeaders,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
9
ts_edgeworker/responders/redirect.reponder.ts
Normal file
9
ts_edgeworker/responders/redirect.reponder.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const redirectResponder: interfaces.TRequestResponser = async (cWorkerEventArg: WorkerEvent) => {
|
||||
if (cWorkerEventArg.responderInstruction.type === 'redirect') {
|
||||
cWorkerEventArg.setResponse(Response.redirect(cWorkerEventArg.responderInstruction.redirectUrl, 302));
|
||||
}
|
||||
|
||||
};
|
||||
22
ts_edgeworker/responders/rendertron.responder.ts
Normal file
22
ts_edgeworker/responders/rendertron.responder.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import * as plugins from '../plugins.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const rendertronResponder = async (cworkerevent: WorkerEvent) => {
|
||||
if (cworkerevent.routedThroughRendertron) {
|
||||
const oldHeaders: any = cworkerevent.request.headers;
|
||||
const rendertronHeaders = new Headers();
|
||||
for (const kv of oldHeaders.entries()) {
|
||||
const headerName = kv[0];
|
||||
const headerValue = headerName === 'user-agent' ? 'Lossless Rendertron' : kv[1];
|
||||
rendertronHeaders.append(headerName, headerValue);
|
||||
}
|
||||
const rendertronRequest = new Request(
|
||||
`https://rendertron.lossless.one/render/${cworkerevent.request.url}`,
|
||||
{
|
||||
method: cworkerevent.request.method,
|
||||
headers: rendertronHeaders
|
||||
}
|
||||
);
|
||||
cworkerevent.setResponse(await fetch(rendertronRequest));
|
||||
}
|
||||
};
|
||||
31
ts_edgeworker/responders/static.responder.ts
Normal file
31
ts_edgeworker/responders/static.responder.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const staticResponder: interfaces.TRequestResponser = async (cWorkerEventArg: WorkerEvent) => {
|
||||
if (cWorkerEventArg.responderInstruction.type === 'static') {
|
||||
const originResponse: any = await fetch(
|
||||
`https://statichost.lossless.one/resolve?url=${encodeURI(cWorkerEventArg.request.url)}`
|
||||
);
|
||||
|
||||
const cacheHeaders = new Headers();
|
||||
for (const kv of originResponse.headers.entries()) {
|
||||
cacheHeaders.append(kv[0], kv[1]);
|
||||
}
|
||||
cacheHeaders.delete('SERVEZONE_ROUTE');
|
||||
cacheHeaders.append('SERVEZONE_ROUTE', 'LOSSLESS_EDGE_STATICHOST');
|
||||
|
||||
if (cWorkerEventArg.responderInstruction.cacheClientSideForMin) {
|
||||
cacheHeaders.delete('Cache-Control');
|
||||
cacheHeaders.append('Cache-Control', `public, max-age=${cWorkerEventArg.responderInstruction.cacheClientSideForMin * 60}`);
|
||||
cacheHeaders.delete('Expires');
|
||||
cacheHeaders.append('Expires', new Date(Date.now() + cWorkerEventArg.responderInstruction.cacheClientSideForMin * 1000).toUTCString());
|
||||
}
|
||||
|
||||
const responseForClient = new Response(await originResponse.clone().body, {
|
||||
...originResponse,
|
||||
headers: cacheHeaders
|
||||
});
|
||||
|
||||
cWorkerEventArg.setResponse(responseForClient);
|
||||
}
|
||||
};
|
||||
23
ts_edgeworker/responders/timeout.responder.ts
Normal file
23
ts_edgeworker/responders/timeout.responder.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import * as plugins from '../plugins.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const timeoutResponder: interfaces.TRequestResponser = async (cWorkerEvent: WorkerEvent) => {
|
||||
await plugins.smartdelay.delayFor(10000);
|
||||
if (cWorkerEvent.routedThroughRendertron) {
|
||||
await plugins.smartdelay.delayFor(10000);
|
||||
}
|
||||
if (!cWorkerEvent.hasResponse) {
|
||||
const errorResponse = await fetch(
|
||||
`https://nullresolve.lossless.one/custom?title=${encodeURI(
|
||||
`Lossless Network: Request Cancellation!`
|
||||
)}&heading=${encodeURI(`Error: Request Cancellation`)}&text=${encodeURI(
|
||||
`Lossless Network could not decide how to respond to this request within 5 seconds. Therefore it timed out and has been canceled.
|
||||
<p>requestUrl: ${cWorkerEvent.request.url}<br>
|
||||
requestTime: ${Date.now()}<br>
|
||||
referenceNumber: xxxxxx</p>`
|
||||
)}`
|
||||
);
|
||||
cWorkerEvent.setResponse(errorResponse);
|
||||
}
|
||||
};
|
||||
21
ts_edgeworker/responders/urlformatting.responder.ts
Normal file
21
ts_edgeworker/responders/urlformatting.responder.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import * as interfaces from '../interfaces/index.js';
|
||||
import { WorkerEvent } from '../classes.workerevent.js';
|
||||
|
||||
export const urlFormattingResponder: interfaces.TRequestResponser = async (eventArg: WorkerEvent) => {
|
||||
let shouldCorrect = false;
|
||||
const correctedUrl = new URL(eventArg.request.url);
|
||||
if (eventArg.parsedUrl.hostname.startsWith('www.')) {
|
||||
shouldCorrect = true;
|
||||
correctedUrl.hostname = eventArg.parsedUrl.hostname.substring(
|
||||
4,
|
||||
eventArg.parsedUrl.hostname.length
|
||||
);
|
||||
}
|
||||
if (eventArg.parsedUrl.protocol.startsWith('http:')) {
|
||||
shouldCorrect = true;
|
||||
correctedUrl.protocol = 'https:';
|
||||
}
|
||||
if (shouldCorrect) {
|
||||
eventArg.setResponse(Response.redirect(`${correctedUrl.protocol}//${correctedUrl.host}${correctedUrl.pathname}${correctedUrl.search}`, 301));
|
||||
}
|
||||
};
|
||||
7
ts_edgeworker/versionhandler.ts
Normal file
7
ts_edgeworker/versionhandler.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as interfaces from './interfaces/index.js';
|
||||
|
||||
export class VersionHandler {
|
||||
|
||||
}
|
||||
|
||||
export const versionHandlerInstance = new VersionHandler();
|
||||
9
ts_interfaces/index.ts
Normal file
9
ts_interfaces/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export * from './requestmodifier.js';
|
||||
export * from './responsemodifier.js';
|
||||
export * from './typedrequests.js';
|
||||
|
||||
import * as serviceworker from './serviceworker.js';
|
||||
|
||||
export {
|
||||
serviceworker,
|
||||
}
|
||||
5
ts_interfaces/plugins.ts
Normal file
5
ts_interfaces/plugins.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';
|
||||
|
||||
export {
|
||||
typedrequestInterfaces,
|
||||
}
|
||||
11
ts_interfaces/requestmodifier.ts
Normal file
11
ts_interfaces/requestmodifier.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export type TRequestModifier = <T>(responseArg: {
|
||||
headers: { [header: string]: string | string[] | undefined };
|
||||
path: string;
|
||||
body: string;
|
||||
travelData?: T;
|
||||
}) => Promise<{
|
||||
headers: { [header: string]: string | string[] | undefined };
|
||||
path: string;
|
||||
body: string;
|
||||
travelData?: T;
|
||||
}>;
|
||||
11
ts_interfaces/responsemodifier.ts
Normal file
11
ts_interfaces/responsemodifier.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export type TResponseModifier = <T>(responseArg: {
|
||||
headers: { [header: string]: number | string | string[] | undefined };
|
||||
path: string;
|
||||
responseContent: Buffer;
|
||||
travelData?: T;
|
||||
}) => Promise<{
|
||||
headers: { [header: string]: number | string | string[] | undefined };
|
||||
path: string;
|
||||
responseContent: Buffer;
|
||||
travelData?: T;
|
||||
}>;
|
||||
512
ts_interfaces/serviceworker.ts
Normal file
512
ts_interfaces/serviceworker.ts
Normal file
@@ -0,0 +1,512 @@
|
||||
import * as plugins from './plugins.js';
|
||||
|
||||
export interface CacheStorage {
|
||||
keys: () => Promise<string[]>;
|
||||
match: any;
|
||||
open: any;
|
||||
delete: any;
|
||||
}
|
||||
export declare var caches: CacheStorage;
|
||||
|
||||
|
||||
// =============================
|
||||
// Interfaces for communication
|
||||
// =============================
|
||||
|
||||
export interface IMessage_Serviceworker_Client_UpdateInfo
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_Client_UpdateInfo
|
||||
> {
|
||||
method: 'serviceworker_newVersion';
|
||||
request: {
|
||||
appVersion: string;
|
||||
appHash: string;
|
||||
};
|
||||
response: {};
|
||||
}
|
||||
|
||||
export interface IMessage_Serviceworker_Client_RequestReload
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_Client_RequestReload
|
||||
> {
|
||||
method: 'serviceworker_requestReload';
|
||||
request: {};
|
||||
response: {};
|
||||
}
|
||||
|
||||
export interface IRequest_Serviceworker_Backend_VersionInfo
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_Backend_VersionInfo
|
||||
> {
|
||||
method: 'serviceworker_versionInfo';
|
||||
request: {};
|
||||
response: {
|
||||
appHash: string;
|
||||
appSemVer: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ===============
|
||||
// web
|
||||
// ===============
|
||||
/**
|
||||
* purges the service workers cache
|
||||
*/
|
||||
export interface IRequest_PurgeServiceWorkerCache extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_PurgeServiceWorkerCache
|
||||
> {
|
||||
method: 'purgeServiceWorkerCache';
|
||||
request: {};
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* updates the info in all connected tabs
|
||||
*/
|
||||
export interface IMessage_Serviceworker_Client_UpdateInfo
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_Client_UpdateInfo
|
||||
> {
|
||||
method: 'serviceworker_newVersion';
|
||||
request: {
|
||||
appVersion: string;
|
||||
appHash: string;
|
||||
};
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* requests all clients to reload
|
||||
*/
|
||||
export interface IMessage_Serviceworker_Client_RequestReload
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IMessage_Serviceworker_Client_RequestReload
|
||||
> {
|
||||
method: 'serviceworker_requestReload';
|
||||
request: {};
|
||||
response: {};
|
||||
}
|
||||
|
||||
/**
|
||||
* updates version infos
|
||||
*/
|
||||
export interface IRequest_Serviceworker_Backend_VersionInfo
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Serviceworker_Backend_VersionInfo
|
||||
> {
|
||||
method: 'serviceworker_versionInfo';
|
||||
request: {};
|
||||
response: {
|
||||
appHash: string;
|
||||
appSemVer: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* ensures a stable connection between clients and the serviceworker
|
||||
*/
|
||||
export interface IRequest_Client_Serviceworker_ConnectionPolling
|
||||
extends plugins.typedrequestInterfaces.implementsTR<
|
||||
plugins.typedrequestInterfaces.ITypedRequest,
|
||||
IRequest_Client_Serviceworker_ConnectionPolling
|
||||
> {
|
||||
method: 'broadcastConnectionPolling',
|
||||
request: {
|
||||
tabId: string;
|
||||
},
|
||||
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: {};
|
||||
}
|
||||
26
ts_interfaces/typedrequests.ts
Normal file
26
ts_interfaces/typedrequests.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
// not using the global plugins here to support better bundling...
|
||||
import * as typedrequestInterfaces from '@api.global/typedrequest-interfaces';
|
||||
|
||||
export interface IReq_PushLatestServerChangeTime
|
||||
extends typedrequestInterfaces.implementsTR<
|
||||
typedrequestInterfaces.ITypedRequest,
|
||||
IReq_PushLatestServerChangeTime
|
||||
> {
|
||||
method: 'pushLatestServerChangeTime';
|
||||
request: {
|
||||
time: number;
|
||||
};
|
||||
response: {};
|
||||
}
|
||||
|
||||
export interface IReq_GetLatestServerChangeTime
|
||||
extends typedrequestInterfaces.implementsTR<
|
||||
typedrequestInterfaces.ITypedRequest,
|
||||
IReq_GetLatestServerChangeTime
|
||||
> {
|
||||
method: 'getLatestServerChangeTime';
|
||||
request: {};
|
||||
response: {
|
||||
time: number;
|
||||
};
|
||||
}
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@apiglobal/typedserver',
|
||||
version: '2.0.36',
|
||||
description: 'easy serving of static files'
|
||||
}
|
||||
137
ts_web/index.ts
137
ts_web/index.ts
@@ -1,137 +0,0 @@
|
||||
import * as plugins from './typedserver_web.plugins.js';
|
||||
import * as interfaces from '../ts/interfaces/index.js';
|
||||
import { logger } from './typedserver_web.logger.js';
|
||||
logger.log('info', `TypedServer-Devtools initialized!`);
|
||||
|
||||
import { TypedserverInfoscreen } from './typedserver_web.infoscreen.js';
|
||||
|
||||
export class ReloadChecker {
|
||||
public reloadJustified = false;
|
||||
public backendConnectionLost = false;
|
||||
public infoscreen = new TypedserverInfoscreen();
|
||||
public store = new plugins.webstore.WebStore({
|
||||
dbName: 'apiglobal__typedserver',
|
||||
storeName: 'apiglobal__typedserver',
|
||||
});
|
||||
public storeKey = 'lastServerChange';
|
||||
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
|
||||
constructor() {}
|
||||
|
||||
public async reload() {
|
||||
// this looks a bit hacky, but apparently is the safest way to really reload stuff
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* starts the reload checker
|
||||
*/
|
||||
public async performHttpRequest() {
|
||||
logger.log('info', 'performing http check...');
|
||||
(await this.store.get(this.storeKey))
|
||||
? null
|
||||
: await this.store.set(this.storeKey, globalThis.typedserver.lastReload);
|
||||
|
||||
let response: Response;
|
||||
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
plugins.smartdelay.delayFor(5000).then(() => {
|
||||
controller.abort();
|
||||
});
|
||||
response = await fetch('/typedserver/reloadcheck', {
|
||||
method: 'POST',
|
||||
signal: controller.signal,
|
||||
});
|
||||
} catch (err: any) {}
|
||||
|
||||
if (response?.status !== 200) {
|
||||
this.backendConnectionLost = true;
|
||||
logger.log('warn', `got a status ${response?.status}.`);
|
||||
this.infoscreen.setText(`backend connection lost... Status ${response?.status}`);
|
||||
}
|
||||
if (response?.status === 200 && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('regained connection to backend...');
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
public async checkReload(lastServerChange: number) {
|
||||
let reloadJustified = false;
|
||||
(await this.store.get(this.storeKey)) !== lastServerChange ? (reloadJustified = true) : null;
|
||||
|
||||
if (reloadJustified) {
|
||||
this.store.set(this.storeKey, lastServerChange);
|
||||
const reloadText = `about to reload ${
|
||||
globalThis.globalSw ? '(purging the sw cache first...)' : ''
|
||||
}`;
|
||||
this.infoscreen.setText(reloadText);
|
||||
if (globalThis.globalSw?.purgeCache) {
|
||||
await globalThis.globalSw.purgeCache();
|
||||
} else {
|
||||
console.log('globalThis.globalSw not found...');
|
||||
}
|
||||
this.infoscreen.setText(`cleaned caches`);
|
||||
await plugins.smartdelay.delayFor(200);
|
||||
this.reload();
|
||||
return;
|
||||
} else {
|
||||
if (this.infoscreen) {
|
||||
this.infoscreen.hide();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
public async connectTypedsocket() {
|
||||
if (!this.typedsocket) {
|
||||
this.typedrouter.addTypedHandler<interfaces.IReq_PushLatestServerChangeTime>(
|
||||
new plugins.typedrequest.TypedHandler('pushLatestServerChangeTime', async (dataArg) => {
|
||||
this.checkReload(dataArg.time);
|
||||
return {};
|
||||
})
|
||||
);
|
||||
this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
|
||||
this.typedrouter,
|
||||
plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl()
|
||||
);
|
||||
this.typedsocket.eventSubject.subscribe(eventArg => {
|
||||
console.log(`typedsocket event subscription: ${eventArg}`);
|
||||
if (eventArg === 'disconnected' || eventArg === 'disconnecting' || eventArg === 'timedOut') {
|
||||
this.backendConnectionLost = true;
|
||||
this.infoscreen.setText(`typedsocket ${eventArg}!`)
|
||||
} else if (eventArg === 'connected' && this.backendConnectionLost) {
|
||||
this.backendConnectionLost = false;
|
||||
this.infoscreen.setSuccess('typedsocket connected!')
|
||||
}
|
||||
|
||||
});
|
||||
logger.log('success', `ReloadChecker connected through typedsocket!`)
|
||||
}
|
||||
}
|
||||
|
||||
public started = false;
|
||||
public async start() {
|
||||
this.started = true;
|
||||
logger.log('info', `starting ReloadChecker...`);
|
||||
while (this.started) {
|
||||
const response = await this.performHttpRequest();
|
||||
if (response.status === 200) {
|
||||
logger.log('info', `ReloadChecker reached backend!`);
|
||||
await this.checkReload(parseInt(await response.text()));
|
||||
await this.connectTypedsocket();
|
||||
}
|
||||
await plugins.smartdelay.delayFor(120000);
|
||||
}
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
this.started = false;
|
||||
}
|
||||
}
|
||||
|
||||
const reloadCheckInstance = new ReloadChecker();
|
||||
reloadCheckInstance.start();
|
||||
@@ -1,21 +0,0 @@
|
||||
// @apiglobal scope
|
||||
import * as typedrequest from '@apiglobal/typedrequest';
|
||||
import * as typedsocket from '@apiglobal/typedsocket';
|
||||
|
||||
export {
|
||||
typedrequest,
|
||||
typedsocket,
|
||||
}
|
||||
|
||||
// pushrocks scope
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
import * as smartlog from '@pushrocks/smartlog';
|
||||
import * as smartlogDestinationDevtools from '@pushrocks/smartlog-destination-devtools';
|
||||
import * as webstore from '@pushrocks/webstore';
|
||||
|
||||
export {
|
||||
smartdelay,
|
||||
smartlog,
|
||||
smartlogDestinationDevtools,
|
||||
webstore,
|
||||
};
|
||||
8
ts_web_inject/00_commitinfo_data.ts
Normal file
8
ts_web_inject/00_commitinfo_data.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@api.global/typedserver',
|
||||
version: '3.0.29',
|
||||
description: 'A TypeScript-based project for easy serving of static files with support for live reloading, compression, and typed requests.'
|
||||
}
|
||||
275
ts_web_inject/index.ts
Normal file
275
ts_web_inject/index.ts
Normal file
@@ -0,0 +1,275 @@
|
||||
import * as plugins from './typedserver_web.plugins.js';
|
||||
import * as interfaces from '../dist_ts_interfaces/index.js';
|
||||
import { logger } from './typedserver_web.logger.js';
|
||||
logger.log('info', `TypedServer-Devtools initialized!`);
|
||||
|
||||
import { TypedserverStatusPill } from './typedserver_web.statuspill.js';
|
||||
|
||||
export class ReloadChecker {
|
||||
public reloadJustified = false;
|
||||
public backendConnectionLost = false;
|
||||
public statusPill = new TypedserverStatusPill();
|
||||
public store = new plugins.webstore.WebStore({
|
||||
dbName: 'apiglobal__typedserver',
|
||||
storeName: 'apiglobal__typedserver',
|
||||
});
|
||||
public storeKey = 'lastServerChange';
|
||||
|
||||
public typedsocket: plugins.typedsocket.TypedSocket;
|
||||
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||
private swStatusUnsubscribe: (() => void) | null = null;
|
||||
|
||||
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
|
||||
*/
|
||||
public async performHttpRequest() {
|
||||
logger.log('info', 'performing http check...');
|
||||
(await this.store.get(this.storeKey))
|
||||
? null
|
||||
: await this.store.set(this.storeKey, globalThis.typedserver.lastReload);
|
||||
|
||||
let response: Response;
|
||||
|
||||
try {
|
||||
const controller = new AbortController();
|
||||
plugins.smartdelay.delayFor(5000).then(() => {
|
||||
controller.abort();
|
||||
});
|
||||
response = await fetch('/typedserver/reloadcheck', {
|
||||
method: 'POST',
|
||||
signal: controller.signal,
|
||||
});
|
||||
} catch (err: any) {}
|
||||
|
||||
if (response?.status !== 200) {
|
||||
this.backendConnectionLost = true;
|
||||
logger.log('warn', `got a 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.statusPill.updateStatus({
|
||||
source: 'backend',
|
||||
type: 'connected',
|
||||
message: 'Backend connection restored',
|
||||
persist: false,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
}
|
||||
return response;
|
||||
}
|
||||
|
||||
public async checkReload(lastServerChange: number) {
|
||||
let reloadJustified = false;
|
||||
let storedLastServerChange = await this.store.get(this.storeKey);
|
||||
if (storedLastServerChange && storedLastServerChange !== lastServerChange) {
|
||||
reloadJustified = true;
|
||||
} else {
|
||||
}
|
||||
|
||||
if (reloadJustified) {
|
||||
this.store.set(this.storeKey, lastServerChange);
|
||||
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 and Cache API not available...');
|
||||
}
|
||||
|
||||
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 {
|
||||
// All good, hide after brief show
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
public async connectTypedsocket() {
|
||||
if (!this.typedsocket) {
|
||||
this.typedrouter.addTypedHandler<interfaces.IReq_PushLatestServerChangeTime>(
|
||||
new plugins.typedrequest.TypedHandler('pushLatestServerChangeTime', async (dataArg) => {
|
||||
this.checkReload(dataArg.time);
|
||||
return {};
|
||||
})
|
||||
);
|
||||
this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
|
||||
this.typedrouter,
|
||||
plugins.typedsocket.TypedSocket.useWindowLocationOriginUrl()
|
||||
);
|
||||
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.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.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>(
|
||||
'getLatestServerChangeTime'
|
||||
);
|
||||
const response = await getLatestServerChangeTime.fire({});
|
||||
this.checkReload(response.time);
|
||||
}
|
||||
});
|
||||
logger.log('success', `ReloadChecker connected through typedsocket!`);
|
||||
}
|
||||
}
|
||||
|
||||
public started = false;
|
||||
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) {
|
||||
logger.log('info', `ReloadChecker reached backend!`);
|
||||
await this.checkReload(parseInt(await response.text()));
|
||||
await this.connectTypedsocket();
|
||||
}
|
||||
await plugins.smartdelay.delayFor(120000);
|
||||
}
|
||||
}
|
||||
|
||||
public async stop() {
|
||||
this.started = false;
|
||||
if (this.swStatusUnsubscribe) {
|
||||
this.swStatusUnsubscribe();
|
||||
this.swStatusUnsubscribe = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const reloadCheckInstance = new ReloadChecker();
|
||||
reloadCheckInstance.start();
|
||||
@@ -14,10 +14,10 @@ export class TypedserverInfoscreen extends LitElement {
|
||||
//INSTANCE
|
||||
|
||||
@property()
|
||||
private text = 'Hello';
|
||||
accessor text = 'Hello';
|
||||
|
||||
@property()
|
||||
private success = false;
|
||||
accessor success = false;
|
||||
|
||||
public static styles = [
|
||||
css`
|
||||
@@ -95,10 +95,13 @@ export class TypedserverInfoscreen extends LitElement {
|
||||
|
||||
public async hide() {
|
||||
this.text = '';
|
||||
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||
mainbox.classList.add('show');
|
||||
if (this.appended) {
|
||||
const mainbox = this.shadowRoot.querySelector('.mainbox');
|
||||
mainbox.classList.remove('show');
|
||||
}
|
||||
await plugins.smartdelay.delayFor(300);
|
||||
if (this.appended) {
|
||||
this.appended = false;
|
||||
document.body.removeChild(this);
|
||||
}
|
||||
}
|
||||
21
ts_web_inject/typedserver_web.plugins.ts
Normal file
21
ts_web_inject/typedserver_web.plugins.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
// @apiglobal scope
|
||||
import * as typedrequest from '@api.global/typedrequest';
|
||||
import * as typedsocket from '@api.global/typedsocket';
|
||||
|
||||
export {
|
||||
typedrequest,
|
||||
typedsocket,
|
||||
}
|
||||
|
||||
// pushrocks scope
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
import * as smartlog from '@push.rocks/smartlog';
|
||||
import * as smartlogDestinationDevtools from '@push.rocks/smartlog-destination-devtools';
|
||||
import * as webstore from '@push.rocks/webstore';
|
||||
|
||||
export {
|
||||
smartdelay,
|
||||
smartlog,
|
||||
smartlogDestinationDevtools,
|
||||
webstore,
|
||||
};
|
||||
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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
8
ts_web_serviceworker/00_commitinfo_data.ts
Normal file
8
ts_web_serviceworker/00_commitinfo_data.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* autocreated commitinfo by @pushrocks/commitinfo
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@losslessone_private/lole-serviceworker',
|
||||
version: '1.0.206',
|
||||
description: 'serviceworker implementation for lossless websites'
|
||||
}
|
||||
465
ts_web_serviceworker/classes.backend.ts
Normal file
465
ts_web_serviceworker/classes.backend.ts
Normal file
@@ -0,0 +1,465 @@
|
||||
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 {
|
||||
interface ServiceWorkerGlobalScope extends EventTarget {
|
||||
clients: Clients;
|
||||
registration: ServiceWorkerRegistration;
|
||||
}
|
||||
|
||||
// Define Clients interface
|
||||
interface Clients {
|
||||
matchAll(options?: ClientQueryOptions): Promise<Client[]>;
|
||||
openWindow(url: string): Promise<WindowClient>;
|
||||
claim(): Promise<void>;
|
||||
get(id: string): Promise<Client | undefined>;
|
||||
}
|
||||
|
||||
interface ClientQueryOptions {
|
||||
includeUncontrolled?: boolean;
|
||||
type?: 'window' | 'worker' | 'sharedworker' | 'all';
|
||||
}
|
||||
|
||||
interface Client {
|
||||
id: string;
|
||||
type: 'window' | 'worker' | 'sharedworker';
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface WindowClient extends Client {
|
||||
focused: boolean;
|
||||
visibilityState: 'hidden' | 'visible' | 'prerender' | 'unloaded';
|
||||
focus(): Promise<WindowClient>;
|
||||
navigate(url: string): Promise<WindowClient>;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This class is meant to be used only on the backend side
|
||||
*/
|
||||
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;
|
||||
|
||||
/**
|
||||
* Helper to create properly formatted TypedRequest messages for DeesComms
|
||||
*/
|
||||
private createMessage<T>(method: string, request: T): any {
|
||||
const id = `${method}_${Date.now()}`;
|
||||
return {
|
||||
method,
|
||||
request,
|
||||
messageId: id,
|
||||
correlation: {
|
||||
id,
|
||||
phase: 'request' as const
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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) => {
|
||||
if (event.data && event.data.type === 'wakeUpCall') {
|
||||
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(this.createMessage('serviceworker_statusUpdate', status));
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* reloads all clients
|
||||
*/
|
||||
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(this.createMessage('serviceworker_newVersion', {}));
|
||||
|
||||
// As a fallback, also use the clients API to reload clients that might not catch the broadcast
|
||||
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
|
||||
(client as any).navigate(client.url);
|
||||
logger.log('info', `Navigated client to: ${client.url}`);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.log('error', `Failed to reload clients: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* display notification
|
||||
*/
|
||||
public async addNotification(notificationArg: {
|
||||
title: string;
|
||||
body: string;
|
||||
}) {
|
||||
try {
|
||||
// Check if we have permission to show notifications
|
||||
const permission = self.Notification?.permission;
|
||||
if (permission !== 'granted') {
|
||||
logger.log('warn', `Cannot show notification: permission is ${permission}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Type-cast self to ServiceWorkerGlobalScope
|
||||
const swSelf = self as unknown as ServiceWorkerGlobalScope;
|
||||
|
||||
// Use type assertion for notification options to include vibrate
|
||||
const options = {
|
||||
body: notificationArg.body,
|
||||
icon: '/favicon.ico', // Assuming there's a favicon
|
||||
badge: '/favicon.ico',
|
||||
vibrate: [200, 100, 200]
|
||||
} as NotificationOptions;
|
||||
|
||||
await swSelf.registration.showNotification(notificationArg.title, options);
|
||||
|
||||
logger.log('info', `Notification shown: ${notificationArg.title}`);
|
||||
} catch (error) {
|
||||
logger.log('error', `Failed to show notification: ${error instanceof Error ? error.message : String(error)}`);
|
||||
}
|
||||
}
|
||||
|
||||
public async alert(alertText: string) {
|
||||
// Since we can't directly show alerts from service worker context,
|
||||
// we'll use notifications as a fallback
|
||||
await this.addNotification({
|
||||
title: 'Alert',
|
||||
body: alertText
|
||||
});
|
||||
|
||||
// Send message to clients who might be able to show an actual alert
|
||||
try {
|
||||
await this.deesComms.postMessage(this.createMessage('serviceworker_alert', { message: alertText }));
|
||||
logger.log('info', `Alert message sent to clients: ${alertText}`);
|
||||
} catch (error) {
|
||||
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(this.createMessage('serviceworker_eventLogged', entry));
|
||||
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(this.createMessage('serviceworker_metricsUpdate', snapshot));
|
||||
} 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(this.createMessage('serviceworker_resourceCached', { url, contentType, size, cached }));
|
||||
} catch (error) {
|
||||
logger.log('warn', `Failed to push resource cached: ${error}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
438
ts_web_serviceworker/classes.cachemanager.ts
Normal file
438
ts_web_serviceworker/classes.cachemanager.ts
Normal file
@@ -0,0 +1,438 @@
|
||||
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;
|
||||
|
||||
public usedCacheNames = {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the service worker's fetch event to intercept and cache responses.
|
||||
*/
|
||||
private _setupCache = () => {
|
||||
// Create a matching request. For internal requests, reuse the original; for external requests, create one with CORS settings.
|
||||
const createMatchRequest = (requestArg: Request): Request => {
|
||||
let matchRequest: Request;
|
||||
try {
|
||||
if (
|
||||
requestArg.url.startsWith(
|
||||
this.losslessServiceWorkerRef.serviceWindowRef.location.origin
|
||||
)
|
||||
) {
|
||||
// Internal request
|
||||
matchRequest = requestArg;
|
||||
} else {
|
||||
// External request: create a new Request with appropriate CORS settings.
|
||||
matchRequest = new Request(requestArg.url, {
|
||||
method: requestArg.method,
|
||||
headers: requestArg.headers,
|
||||
mode: 'cors',
|
||||
credentials: 'same-origin',
|
||||
redirect: 'follow'
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `Error creating match request for ${requestArg.url}: ${err}`);
|
||||
throw err;
|
||||
}
|
||||
return matchRequest;
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a 500 error response.
|
||||
*/
|
||||
const create500Response = async (requestArg: Request, responseArg: Response): Promise<Response> => {
|
||||
try {
|
||||
const responseText = await responseArg.clone().text();
|
||||
return new Response(
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.note {
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
border-bottom: 1px solid #e4002b;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="note">
|
||||
<strong>ServiceWorker error 500</strong><br>
|
||||
</div>
|
||||
ServiceWorker is unable to fetch this request.<br>
|
||||
<br>
|
||||
<strong>Request URL:</strong> ${requestArg.url}<br>
|
||||
<strong>Response Type:</strong> ${responseArg.type}<br>
|
||||
<strong>Response Body:</strong> ${responseText}<br>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
{
|
||||
headers: { 'Content-Type': 'text/html' },
|
||||
status: 500
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
logger.log('error', `Error creating 500 response for ${requestArg.url}: ${err}`);
|
||||
return new Response('Internal error', { status: 500 });
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for fetch events on the service worker's controlled window.
|
||||
this.losslessServiceWorkerRef.serviceWindowRef.addEventListener('fetch', async (fetchEventArg: any) => {
|
||||
try {
|
||||
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') ||
|
||||
parsedUrl.hostname.includes('paypal.com') ||
|
||||
parsedUrl.hostname.includes('reception.lossless.one') ||
|
||||
parsedUrl.pathname.startsWith('/socket.io') ||
|
||||
originalRequest.url.startsWith('https://umami.')
|
||||
) {
|
||||
logger.log('note', `ServiceWorker not active for ${parsedUrl.toString()}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a deferred promise for the fetch event's response.
|
||||
const done = plugins.smartpromise.defer<Response>();
|
||||
fetchEventArg.respondWith(done.promise);
|
||||
|
||||
// Determine whether this request should be cached.
|
||||
if (
|
||||
(originalRequest.method === 'GET' &&
|
||||
originalRequest.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin) &&
|
||||
!originalRequest.url.includes('/api/') &&
|
||||
!originalRequest.url.includes('smartserve/reloadcheck')) ||
|
||||
originalRequest.url.includes('https://assetbroker.') ||
|
||||
originalRequest.url.includes('https://unpkg.com') ||
|
||||
originalRequest.url.includes('https://fonts.googleapis.com') ||
|
||||
originalRequest.url.includes('https://fonts.gstatic.com')
|
||||
) {
|
||||
// Kick off an asynchronous update check.
|
||||
this.losslessServiceWorkerRef.updateManager.checkUpdate(this);
|
||||
|
||||
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 {
|
||||
// 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));
|
||||
}
|
||||
|
||||
// Check if the response should be cached. In this version, if the response status is >299 or the response is opaque, we do not cache.
|
||||
if (newResponse.status > 299 || newResponse.type === 'opaque') {
|
||||
logger.log(
|
||||
'error',
|
||||
`NOTCACHED: Can't cache response for ${matchRequest.url} (status: ${newResponse.status}, type: ${newResponse.type})`
|
||||
);
|
||||
// Optionally, you can force a 500 response so errors are clearly visible.
|
||||
done.resolve(await create500Response(matchRequest, newResponse));
|
||||
} else {
|
||||
try {
|
||||
const cache = await caches.open(this.usedCacheNames.runtimeCacheName);
|
||||
const responseToPutToCache = newResponse.clone();
|
||||
|
||||
// Create new headers preserving all except caching-related ones.
|
||||
const headers = new Headers();
|
||||
responseToPutToCache.headers.forEach((value, key) => {
|
||||
if (!['Cache-Control', 'cache-control', 'Expires', 'expires', 'Pragma', 'pragma'].includes(key)) {
|
||||
headers.set(key, value);
|
||||
}
|
||||
});
|
||||
|
||||
// Ensure that CORS-related headers are present.
|
||||
if (!headers.has('Access-Control-Allow-Origin')) {
|
||||
headers.set('Access-Control-Allow-Origin', '*');
|
||||
}
|
||||
if (!headers.has('Access-Control-Allow-Methods')) {
|
||||
headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||
}
|
||||
if (!headers.has('Access-Control-Allow-Headers')) {
|
||||
headers.set('Access-Control-Allow-Headers', 'Content-Type');
|
||||
}
|
||||
|
||||
// Set Cross-Origin-Resource-Policy
|
||||
if (matchRequest.url.startsWith(this.losslessServiceWorkerRef.serviceWindowRef.location.origin)) {
|
||||
// For same-origin resources
|
||||
headers.set('Cross-Origin-Resource-Policy', 'same-origin');
|
||||
} else {
|
||||
// For cross-origin resources that we explicitly allow
|
||||
headers.set('Cross-Origin-Resource-Policy', 'cross-origin');
|
||||
}
|
||||
|
||||
// Set caching headers - use modern Cache-Control only
|
||||
headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
|
||||
|
||||
// IMPORTANT: Read the full response body as a blob to avoid issues (e.g., Safari locked streams).
|
||||
const bodyBlob = await responseToPutToCache.blob();
|
||||
const newCachedResponse = new Response(bodyBlob, {
|
||||
status: responseToPutToCache.status,
|
||||
statusText: responseToPutToCache.statusText,
|
||||
headers
|
||||
});
|
||||
|
||||
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) {
|
||||
logger.log('error', `Error caching response for ${matchRequest.url}: ${err}`);
|
||||
done.resolve(await create500Response(matchRequest, newResponse));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// For requests not intended for caching, simply fetch from the origin.
|
||||
logger.log('ok', `NOTCACHED: Not caching ${originalRequest.url}. Fetching from origin...`);
|
||||
try {
|
||||
const originResponse = await fetch(originalRequest);
|
||||
done.resolve(originResponse);
|
||||
} catch (err: any) {
|
||||
logger.log('error', `Fetch error for ${originalRequest.url}: ${err}`);
|
||||
done.resolve(await create500Response(originalRequest, new Response(err.message)));
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `Unhandled fetch event error: ${err}`);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Cleans all caches.
|
||||
* Should only be run when a new ServiceWorker is activated.
|
||||
*/
|
||||
public cleanCaches = async (reasonArg = 'no reason given'): Promise<void> => {
|
||||
try {
|
||||
logger.log('info', `MAJOR CACHEEVENT: Cleaning caches now! Reason: ${reasonArg}`);
|
||||
const cacheNames = await caches.keys();
|
||||
const deletePromises = cacheNames.map((cacheToDelete) =>
|
||||
caches.delete(cacheToDelete).then(() => {
|
||||
logger.log('ok', `Deleted cache ${cacheToDelete}`);
|
||||
})
|
||||
);
|
||||
await Promise.all(deletePromises);
|
||||
} catch (err) {
|
||||
logger.log('error', `Error cleaning caches: ${err}`);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Revalidates the runtime cache by fetching fresh responses and updating the cache.
|
||||
*/
|
||||
public async revalidateCache(): Promise<void> {
|
||||
try {
|
||||
const runtimeCache = await caches.open(this.usedCacheNames.runtimeCacheName);
|
||||
const cacheKeys = await runtimeCache.keys();
|
||||
for (const requestArg of cacheKeys) {
|
||||
try {
|
||||
const clonedRequest = requestArg.clone();
|
||||
const response = await plugins.smartpromise.timeoutWrap(fetch(clonedRequest), 5000);
|
||||
if (response && response.status >= 200 && response.status < 300) {
|
||||
await runtimeCache.delete(requestArg);
|
||||
await runtimeCache.put(requestArg, response);
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `Error revalidating cache for ${requestArg.url}: ${err}`);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
logger.log('error', `Error revalidating runtime cache: ${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();
|
||||
151
ts_web_serviceworker/classes.networkmanager.ts
Normal file
151
ts_web_serviceworker/classes.networkmanager.ts
Normal file
@@ -0,0 +1,151 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
import { logger } from './logging.js';
|
||||
|
||||
export class NetworkManager {
|
||||
public serviceWorkerRef: ServiceWorker;
|
||||
public webRequest: plugins.webrequest.WebrequestClient;
|
||||
private isOffline: boolean = false;
|
||||
private lastOnlineCheck: number = 0;
|
||||
private readonly ONLINE_CHECK_INTERVAL = 30000; // 30 seconds
|
||||
|
||||
public previousState: string;
|
||||
|
||||
constructor(serviceWorkerRefArg: ServiceWorker) {
|
||||
this.serviceWorkerRef = serviceWorkerRefArg;
|
||||
this.webRequest = new plugins.webrequest.WebrequestClient();
|
||||
|
||||
// Listen for connection changes
|
||||
this.getConnection()?.addEventListener('change', () => {
|
||||
this.updateConnectionStatus();
|
||||
});
|
||||
|
||||
// Listen for online/offline events
|
||||
self.addEventListener('online', () => {
|
||||
this.isOffline = false;
|
||||
logger.log('info', 'Device is now online');
|
||||
this.updateConnectionStatus();
|
||||
});
|
||||
|
||||
self.addEventListener('offline', () => {
|
||||
this.isOffline = true;
|
||||
logger.log('warn', 'Device is now offline');
|
||||
this.updateConnectionStatus();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* gets the connection
|
||||
*/
|
||||
public getConnection() {
|
||||
const navigatorLocal: any = self.navigator;
|
||||
return navigatorLocal?.connection;
|
||||
}
|
||||
|
||||
public getEffectiveType() {
|
||||
return this.getConnection()?.effectiveType || '4g';
|
||||
}
|
||||
|
||||
public updateConnectionStatus() {
|
||||
const currentType = this.getEffectiveType();
|
||||
logger.log('info', `Connection type changed from ${this.previousState} to ${currentType}`);
|
||||
this.previousState = currentType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the device is currently online by attempting to contact the server
|
||||
* @returns Promise<boolean> true if online, false if offline
|
||||
*/
|
||||
public async checkOnlineStatus(): Promise<boolean> {
|
||||
const now = Date.now();
|
||||
// Only check if enough time has passed since last check
|
||||
if (now - this.lastOnlineCheck < this.ONLINE_CHECK_INTERVAL) {
|
||||
return !this.isOffline;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/sw-typedrequest', {
|
||||
method: 'HEAD',
|
||||
cache: 'no-cache'
|
||||
});
|
||||
this.isOffline = false;
|
||||
this.lastOnlineCheck = now;
|
||||
return true;
|
||||
} catch (error) {
|
||||
this.isOffline = true;
|
||||
this.lastOnlineCheck = now;
|
||||
logger.log('warn', 'Device appears to be offline');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Makes a network request with offline handling
|
||||
* @param request The request to make
|
||||
* @param options Additional options
|
||||
* @returns Promise<Response>
|
||||
*/
|
||||
public async makeRequest<T>(request: Request | string, options: {
|
||||
timeoutMs?: number;
|
||||
retries?: number;
|
||||
backoffMs?: number;
|
||||
} = {}): Promise<Response> {
|
||||
const {
|
||||
timeoutMs = 5000,
|
||||
retries = 1,
|
||||
backoffMs = 1000
|
||||
} = options;
|
||||
|
||||
let lastError: Error | unknown;
|
||||
for (let i = 0; i <= retries; i++) {
|
||||
let timeoutId: number | undefined;
|
||||
const controller = new AbortController();
|
||||
|
||||
try {
|
||||
const isOnline = await this.checkOnlineStatus();
|
||||
if (!isOnline) {
|
||||
throw new Error('Device is offline');
|
||||
}
|
||||
|
||||
// Set up timeout
|
||||
timeoutId = setTimeout(() => controller.abort(), timeoutMs) as unknown as number;
|
||||
|
||||
const response = await fetch(request, {
|
||||
...typeof request === 'string' ? {} : request,
|
||||
signal: controller.signal
|
||||
});
|
||||
|
||||
// Clear timeout on successful response
|
||||
clearTimeout(timeoutId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
// Always clear timeout, even on error
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
|
||||
lastError = error;
|
||||
logger.log('warn', `Request attempt ${i+1}/${retries+1} failed: ${error instanceof Error ? error.message : String(error)}`);
|
||||
|
||||
// Check if this was an abort error (timeout)
|
||||
if (error instanceof Error && error.name === 'AbortError') {
|
||||
logger.log('warn', `Request timed out after ${timeoutMs}ms`);
|
||||
}
|
||||
|
||||
// Retry with backoff if we have retries left
|
||||
if (i < retries) {
|
||||
const backoffTime = backoffMs * (i + 1);
|
||||
logger.log('info', `Retrying in ${backoffTime}ms...`);
|
||||
await new Promise(resolve => setTimeout(resolve, backoffTime));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Convert lastError to Error if it isn't already
|
||||
const finalError = lastError instanceof Error
|
||||
? lastError
|
||||
: new Error(typeof lastError === 'string' ? lastError : 'Unknown error during request');
|
||||
|
||||
throw finalError;
|
||||
}
|
||||
}
|
||||
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();
|
||||
166
ts_web_serviceworker/classes.serviceworker.ts
Normal file
166
ts_web_serviceworker/classes.serviceworker.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import * as interfaces from './env.js';
|
||||
|
||||
// imports
|
||||
import { CacheManager } from './classes.cachemanager.js';
|
||||
import { Deferred } from '@push.rocks/smartpromise';
|
||||
|
||||
import { logger } from './logging.js';
|
||||
|
||||
// imported classes
|
||||
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
|
||||
|
||||
// INSTANCE
|
||||
public serviceWindowRef: interfaces.ServiceWindow;
|
||||
public leleServiceWorkerBackend: ServiceworkerBackend;
|
||||
|
||||
public cacheManager: CacheManager;
|
||||
|
||||
public updateManager: UpdateManager;
|
||||
public networkManager: NetworkManager;
|
||||
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;
|
||||
this.leleServiceWorkerBackend = new ServiceworkerBackend({
|
||||
self: selfArg,
|
||||
purgeCache: async (reqArg) => {
|
||||
await this.cacheManager.cleanCaches(),
|
||||
logger.log('info', `cleaned caches in serviceworker as per request from frontend.`);
|
||||
return {}
|
||||
}
|
||||
});
|
||||
|
||||
this.updateManager = new UpdateManager(this);
|
||||
this.networkManager = new NetworkManager(this);
|
||||
this.taskManager = new TaskManager(this);
|
||||
|
||||
this.cacheManager = new CacheManager(this);
|
||||
|
||||
this.store = new plugins.webstore.WebStore({
|
||||
dbName: 'losslessServiceworker',
|
||||
storeName: 'losslessServiceworker',
|
||||
});
|
||||
|
||||
// =================================
|
||||
// Installation and Activation
|
||||
// =================================
|
||||
this.serviceWindowRef.addEventListener('install', async (event: interfaces.ServiceEvent) => {
|
||||
const done = new Deferred();
|
||||
event.waitUntil(done.promise);
|
||||
// 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();
|
||||
} catch (error) {
|
||||
logger.log('error', `Service worker installation error: ${error}`);
|
||||
done.reject(error);
|
||||
}
|
||||
});
|
||||
|
||||
this.serviceWindowRef.addEventListener('activate', async (event: interfaces.ServiceEvent) => {
|
||||
const done = new Deferred();
|
||||
event.waitUntil(done.promise);
|
||||
|
||||
// its important to not go async before event.waitUntil
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle wake-up scenario: if already activated, connect immediately
|
||||
// (install/activate events don't fire on wake-up)
|
||||
if (selfArg.registration?.active) {
|
||||
logger.log('info', 'SW woke up (already activated) - connecting to server');
|
||||
this.connectToServer();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
24
ts_web_serviceworker/classes.taskmanager.ts
Normal file
24
ts_web_serviceworker/classes.taskmanager.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import * as plugins from './plugins.js';
|
||||
import { ServiceWorker } from './classes.serviceworker.js';
|
||||
|
||||
/**
|
||||
* Taskmanager
|
||||
* should use times allocated by browser
|
||||
*/
|
||||
export class TaskManager {
|
||||
public serviceworkerRef: ServiceWorker;
|
||||
public taskmanager = new plugins.taskbuffer.TaskManager();
|
||||
|
||||
constructor(serviceWorkerRefArg: ServiceWorker) {
|
||||
this.serviceworkerRef = serviceWorkerRefArg;
|
||||
this.taskmanager.start();
|
||||
}
|
||||
|
||||
public updateTask = new plugins.taskbuffer.Task({
|
||||
name: 'updateTask',
|
||||
taskFunction: async () => {
|
||||
await this.serviceworkerRef.cacheManager.cleanCaches('a new app version has been communicated by the server.');
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
1
ts_web_serviceworker/classes.typedrequestmanager.ts
Normal file
1
ts_web_serviceworker/classes.typedrequestmanager.ts
Normal file
@@ -0,0 +1 @@
|
||||
import * as plugins from './plugins.js';
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user