A service worker building framework using a middleware pattern.
npm install sworknpm install swork
yarn add swork
ts
import { Swork, FetchContext } from "swork";
const app = new Swork();
app.use((context: FetchContext, next: () => Promise)) => {
context.response = new Response("Hello World!");
});
app.listen();
`
Middleware
Swork is a middleware framework that accepts both async and standard functions. Middleware take two parameters: context and next. The supplied context is created anew for each request and encapsulates the initiating fetch event, request and eventual response. next is a function that when invoked will execute the downstream middleware.
Async Function
`ts
app.use(async (context: FetchContext, next: () => Promise) => {
const start = performance.now();
await next();
const timeElapsed = (performance.now() - start).toFixed(2);
console.log( ${context.request.method} ${context.request.url} - ${timeElapsed} ms);
});
`
Standard Function
`ts
app.use((context: FetchContext, next: () => Promise) => {
const start = performance.now();
next().then(() => {
const timeElapsed = (performance.now() - start).toFixed(2);
console.log( ${context.request.method} ${context.request.url} - ${timeElapsed} ms);
});
});
`
$3
| Middleware | Description | Package | Repository |
|------------|-------------|---------|------------|
| swork-router| Router middleware | npmjs | github |
| swork-cache| Cache strategies and events | npmjs | github |
| swork-link| Link separate middleware pipelines | npmjs | github |
| swork-claim-clients | Claim active clients | npmjs | github |
| swork-logger | Logs all fetch requests | npmjs | github |
| swork-when | Middleware branching strategies | npmjs | github |
Methods
use
`ts
use(...params: Array<(Swork | Middleware | Array<(Swork | Middleware)>)>): Swork
`
The use method accepts a middleware. Middleware are executed in the order provided for each incoming request via a fetch event handler. use can also accept arrays of middlewares or even provide a different Swork app instance.
on
`ts
on(event: EventType, ...handlers: Array<(event: any) => Promise | void>): void
`
Use the on method to provide any handlers to be executed during service worker events. The event type will vary based upon the event fired. On supports the following events: activate, install, message, notificationclick, notificationclose, push, pushsubscriptionchange, sync
listen
`ts
listen(): void
`
To initialize your Swork application, call listen. This will add the event handlers and callbacks to your service worker application.
Configuration
These properties apply globally to the Swork application.
version
The version of the service worker. Defaults to "1.0.0".
origin
The origin of the service worker. Defaults to self.location.origin.
environment
The running environment. Defaults to "production".
These configurations can be referenced through the swork module.
`ts
import { configuration } from "swork";
configuration.environment = "production";
console.log(configuration);
// => { version: "1.0.0", origin: "https://localhost", environment: "production" }
`
Notes
As service workers do not yet natively support ES6 modules, a Swork implementation is expected to be built with your preferred bundler (e.g. Webpack, Rollup)
Contact
If you are using swork` or any of its related middlewares, please let me know on gitter. I am always looking for feedback or additional middleware ideas.